Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Instantiating a Combo Box

Page of 168

The Combo Box displays data from an Ext.data.Store while optionally allowing the user to enter a custom value. A typical instantiation resembles the following:

{
 xtype: 'combo',
 store: Ext.getStore('States'),
 fieldLabel: 'Filter By State:',
 forceSelection: true,
 queryMode: 'local',
 displayField: 'label',
 valueField: 'abbr'
} 


A typical combo box

Note that changes to the Store automatically change the options displayed in the combo box. By default, items are filtered on local stores as soon as the user starts typing into the box. Items are filtered on paginated stores after the user types a minimum of four characters in the box.

Commonly specified configuration options include the following:

Config Property Description
store The Ext.data.Store that is bound to the combo box.
valueField The name of the field from the bound store from which option values are generated.
displayField The name of the field from the bound store from which option labels are generated.
fieldLabel The text prompt displayed adjacent to the control.
queryMode Set to 'local' if the store is loaded with all available records. Set to 'remote' if you are using a data paginated store.
forceSelection Set to true to prevent the user from entering a custom value for the field.
multiSelect Set to true to enable the user to select multiple items.

Customizing the Output of a Combo Box

Ext JS 4 gives you two additional configuration properties that enable you to customize the data displayed in the dropdown menu and text field sections of a combo box.

  • Use the tpl property to define a template for the selectable items in the combo box.
  • Use the displayTpl property to define a template to render selected items inside of the text field section of the combo box.

The following code snippet illustrates how to use these attributes in order to customize the display of options in a Combo box.

A combobox with a customized displayfield rendering template.
{
 xtype: 'combobox',
 tpl: Ext.create('Ext.XTemplate',
                  '',
                   '
', '{abbr} - {label}', '
', '
' ), fieldLabel: 'Filter by State:', displayField: 'label', forceSelection: true, multiSelect: true, queryMode: 'local', store: 'States', valueField: 'abbr' }

Note the following:

  • The <tpl for='.'> meta command is a looping construct that cycles through each item of the bound Ext.data.Store.
  • Combobox items must be wrapped in the style class x-boundlist-item in order for them to be selectable.
  • Fields from the store are dynamically output by wrapping the associated model's field names in curly braces, i.e. {fieldName}
Page of 168
comments powered by Disqus