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

Configuring Select Fields

Page of 168
Using a selectfield control

Instances of Ext.field.Select (xtype: selectfield) allows the user to select a single item from a list of mututally exclusive options. Select fields are populated with data from a Store.

Depending on the screen resolution of the device, a selectfield selector may appear as either a picker (depicted at right) or as a floating panel.

You will typically configure the following properties:

Config Property Description
store String/Ext.data.Store. The Store instance used to populate the items in the component.
displayField String. The name of the field from the Store's underlying data Model from which to display labels in the control.
valueField String. The name of the field from the Store's underlying data Model from which to bind a value to a select option.
options An inline array of objects containing a valueField and displayField suitable for generating selectField options.

The following code snippet illustrates how to configure a selectfield:

{
 xtype: 'selectfield',
 store: 'Beers',
 displayField: 'name',
 valueField: 'beerId'
 label: 'Favorite Beer',
 labelWrap: true,
 name: 'favoriteBeer',
}
Page of 168
comments powered by Disqus