The combobox in action

Another common task that used to cause a lot of heartburn is the addition of a multi select box, or a way for a user to populate a control with multiple values. Fortunately, there is an excellent user extension that will allow you to do this with some style, using the common email to line style where the selected values are displayed in the form field and the additional selections are displayed in a drop down type box.

First you will have to download the extension (http://www.sencha.com/forum/showthread.php?69090-Ext.ux.form.SuperBoxSelect-as-seen-on-facebook-and-hotmail ) – or – (http://www.technomedia.co.uk/SuperBoxSelect/examples3.html )

Once downloaded make sure you add the references to it in the of your html document, and include the CSS and images as well (otherwise you will not see the ‘x’ or down arrow that basically tells the user how to work with this control). The code for adding the select box is identical to the code for adding a normal combo box :

var sampleSuperSelect = new Ext.ux.form.SuperBoxSelect({
       store:sample_store,
       fieldLabel:'Test',
       allowBlank:false,
       id:'sample_pk_id',
       mode:'local',
       displayField: 'sample_display_value',
       valueField: 'sample_pk_id',
       name:'sample_pk_id',
       anchor:'95%'
});

The trick to every multiple select box is to figure out a way to populate the multiple values that you have stored in your database, with this control it is a simple comma separated list that does all of the work. The ExtJs JSON that would be needed to populate the box with existing values based on the following sample table structure would be:

Main data table

Linked table that holds multiple values for each main type

Now in order to show the selected values in the multi select box you would just have to query the second table based on the primary key of the top table, so something like:

select sample_linked_pk_id from linked table where fk_sample_pk_id = main_table.sample_pk_id

The JSON that the multi select box requires when passing in the selected values looks like this (where the numbers in the values property = your keys that are the value field of the multi select box above:

{success:true, values:’3,5,6,9….’}

An example Ext Ajax call that would populate the multiple values is shown below:

Ext.Ajax.request({
           url: 'some_values.php',
           params:{'sample_pk_id':sample_pk_id},
           success: function(action){
               var return_statement = Ext.decode(action.responseText); 
                    if (return_statement.success == true){   
// This is the statement that does the work!
 Ext.getCmp('sample_pk_id').setValue(return_statement.values); 

                     } else {
                                  Ext.Msg('Whoa!', 'There has been an error populating the multi-select box.'); 
                      }
           },
               failure: function(action){ 
                   // Something happened that prevented the record from being updated
                              Ext.Msg('Whoa!', 'There has been an error populating the multi-select box.');
 }); 

Hopefully this will help you navigate the multiple value problem that seems to consume way too much time, way too often.