Combo Boxes in ExtJS

From Snapp CMS Developer Documentation

When building administration UIs, one of the fiddliest parts of the system to get one's head around is ExtJS's handling of combo (Select) boxes.

Here's an example of a simple options form that contains a hidden field for an object's ID ("int_property"), a text field for a text property ("text_property"), and a combo box for a numeric property ("selected_int_property")

                    var optionsForm =  new Ext.form.FormPanel({
                        labelWidth:150,
                        bodyStyle:'padding:5px;',
                        border:false,
                        items:[


                       // Select box - note the use of "hiddenName" instead of "name"
                       {
                            xtype:'combo',                                       // Specify that we're using a Combo box 
                            hiddenName:'selected_int_property',                  // The field name posted back to the back end on a save operation
                            fieldLabel:'Selected INT field ',                    // The label
                            displayField:'title',                                // The column from the store that holds the name to be displayed in the select box
                            valueField: 'id',                                    // The column from the store that holds the value to get posted back on save
                            allowBlank:false,                                   // Validation - force the user to make a selection
                            typeAhead:false,                                    // Turn off keyboard selection 
                            triggerAction:'all',                                 // Retrieve all possible options when combo is clicked
                            editable:false,                                     // Do not allow free-form typing
                            singleSelect:true,                                  // Element is a single select, not a list box 
                            labelStyle:'text-align:right;font-weight:bold;',     // CSS
                            msgTarget:'side',                                    // Validation messages should be displayed to the right

                            store: new Ext.data.JsonStore({
                                url:'load.php',                                  // Always the same URL
                                autoLoad:true,                                   // Do a query as soon as the store is instantiated
                                root:'data',                                     // Array element of load.php's returned JSON that holds the store's data
                                baseParams:{
                                    module:'adminMyModule',            // Our module
                                    action:'loadMyComboValues'              // The load method select the relevant data from the database
                                }
                                ,
                                // These are the columns retrieved from the database - simplified format
                                // 'id' is used as the valueField, 'title' is used as the displayField
                                fields:['id', 'title']
                            })
                        },



                       // Hidden integer field
                        {
                            xtype:'numberfield',
                            inputType:'hidden',
                            name:'int_property'
                        },



                       // Visible text field
                        {
                            xtype:'textfield',
                            fieldLabel: 'Text Property',
                            name:'text_property',
                            maxLength:20,
                            anchor:'100%'
                        }
                      ]
                    });