Dynamic Select drop down with Store in Sencha Touch 2

Today Post, we are going to see how to make select drop down field dynamic with store in Sencha Touch 2. We are going to display two drop down fields 'Country' and 'State'. By selecting Country drop down, their corresponding States will be dynamically updated in the State Drop down.

Form Panel:

First, we are going to create a FormPanel Class with Toolbar and two select drop down fields Country and State and their corresponding configuration settings.

Then, we are attaching onchange event using the listeners configuration, which will trigger onCountryChange method when Country is selected in Country drop down.

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.MyFormPanel',

    config: {

        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Dynamic Select '
            },
            {
                xtype: 'selectfield',
                itemId: 'Country',
                label: 'Country',
                labelWrap: true,
                displayField: 'name',
                store: 'Countries',
                valueField: 'id'
            },
            {
                xtype: 'selectfield',
                itemId: 'State',
                label: 'State',
                labelWrap: true,
                placeHolder: 'Please select Country',
                displayField: 'name',
                valueField: 'id'
            }
        ],

        listeners: [
            {
                fn: 'onCountryChange',
                event: 'change',
                delegate: '#Country'
            }
        ]
    },

    onCountryChange: function(selectfield, newValue, oldValue, options) {

        var formpanel = selectfield.up('MyFormPanel');

        var statefield = formpanel.down('#State');

        var stateStore = Ext.getStore('States');

        stateStore.filter('countryid',newValue);

        stateStore.load();

        statefield.setStore(stateStore);
    }
});

Inside onCountryChange method, i am getting the reference of the Country and State drop down fields and apply the filter to the state store with selected country value in order to get all the states for the country. Then set the state store to the State drop down field.

Country Store:

Create an Country Store with two fields id, name and configure country data using data configuration.

Ext.define('MyApp.store.CountryStore', {
    extend: 'Ext.data.Store',
    alias: 'store.countrystore',

    config: {

        autoLoad: true,
        data: [
            {
                id: 0,
                name: 'please select'
            },
            {
                id: 1,
                name: 'india'
            },
            {
                id: 2,
                name: 'USA'
            },
            {
                id: 3,
                name: 'UK'
            }
        ],

        storeId: 'Countries',

        fields: [
           {
                name: 'id'
            },
            {
                name: 'name'
            }
        ]
    }
});

State Store:

Create an State Store with three fields id, countryID, name and configure State data using data configuration.

Ext.define('MyApp.store.StateStore', {
    extend: 'Ext.data.Store',
    alias: 'store.statestore',

    config: {

        data: [
            {
                id: 1,
                countryid: 1,
                name: 'Tamil Nadu'
            },
            {
                id: 2,
                countryid: 1,
                name: 'Mumbai'
            },
            {
                id: 3,
                countryid: 1,
                name: 'Delhi'
            },
            {
                id: 4,
                countryid: 2,
                name: 'Los Angles'
            },
            {
                id: 5,
                countryid: 2,
                name: 'San francisco'
            },
            {
                id: 6,
                countryid: 2,
                name: 'California'
            },
            {
                id: 7,
                countryid: 3,
                name: 'London'
            },
            {
                id: 8,
                countryid: 3,
                name: 'New York'
            }
        ],

        storeId: 'States',

        fields: [
            {
                name: 'id'
            },
            {
                name: 'countryid'
            },
            {
                name: 'name'
            }
        ]
    }
});

Following is the output, when i run the above code in the Google Chrome.

Screen 1:
                Below is the initial screen that will be displayed when you first access the Form Page.

Screen 2:
              Second and Third screen will be show, when the country is selected and their corresponding states will be displayed in the State drop down.

Download the Source Code

Hope, you enjoyed this Post.