Today, we are going to see how to display drop down field with dynamic Time Zone values in Sencha Touch 2.
Create a Time Zone Model
First, let's create a Time Zone model with two fields
name and
value using
fields configuration
.
Ext.define('MyApp.model.TimeZoneModel', {
extend: 'Ext.data.Model',
alias: 'model.TimeZoneModel',
config: {
fields: [{
name: 'name',
type: 'string'
}, {
name: 'value',
type: 'string'
}]
}
});
Create a Time Zone Store
Now, we are going to create a Time Zone Store and associate the above
model to the store using
model Configuration. Then, we are going to assign static time zone array data using
data configuration. you can also load this time zone array data from
json file using store
reader configuration.
Ext.define('MyApp.store.TimeZoneStore', {
extend: 'Ext.data.Store',
alias: 'store.TimeZoneStore',
requires: [
'MyApp.model.TimeZoneModel'
],
config: {
autoLoad: true,
data: [{
name: '--Please Select--',
value: ''
}, {
name: 'America Chicago',
value: 'America/Chicago'
}, {
name: 'America Jamaica',
value: 'America/Jamaica'
}, {
name: 'America Mexico City',
value: 'America/Mexico_City'
}, {
name: 'America New York',
value: 'America/New_York'
}, {
name: 'America Panama',
value: 'America/Panama'
}, {
name: 'America Port of Spain',
value: 'America/Port_of_Spain'
}, {
name: 'America Los Angeles',
value: 'America/Los_Angeles'
}, {
name: 'America Guyana',
value: 'America/Guyana'
}],
model: 'MyApp.model.TimeZoneModel',
storeId: 'TimeZoneStore'
}
});
Create Select drop down field
Now, we are going to assign the above
store to the Select drop down field using
store configuration.
displayField configuration will be mapped to the model field
name and
valueField configuration will be mapped to the model field
value.
Ext.define('MyApp.view.FormPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.FormPanel',
config: {
items: [{
xtype: 'toolbar',
docked: 'top',
title: 'Dynamic Select Demo'
}, {
xtype: 'selectfield',
label: 'Select Time Zone',
labelWrap: true,
required: true,
displayField: 'name',
valueField: 'value',
store: 'TimeZoneStore'
}]
}
});
Following is the output, when i run the above code in
Google Chrome
Hope, you enjoyed this Post.
