Binding a json array with combobox

Question

I am getting a json array string as response from a page. I want to bind it with a combobox.

This is the success block which gives me the json array string:

The json array string looks like this:

Please let me know hoe to bind this with the combobox drop down.

Regards,

EDIT:

This is the latest code I tried:

Ext.define('Country',{
extend: 'Ext.data.Model',
fields: [
    { name: 'id', type: 'string' },
    { name: 'name', type: 'string' }
]
});

Ext.define('CountryCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.countrycombo',
allowBlank: false,
queryMode: 'local',
valueField: 'id',
displayField: 'name',
store: {
    model: 'Country',
    data: [
        { id: 'China', name: 'China'},
        { id: 'Japan', name: 'Japan'},
        { id: 'Malaysia', name: 'Malaysia'}
    ]
},
listeners: {
    "select": function(obj){  
        Ext.Ajax.request({
            url: '/CellEditing/FormServlet',
            method: 'POST',
            params: {
                data: obj.getValue()
            },
            success: function(obj){
                alert('success');
                alert(obj.responseText);
                console.log(StateCombo.storeStates); //This is undefined hence getting error
                StateCombo.storeStates.loadData(obj.responseText);
            },
            failure: function(obj){
                alert('failure');
            }
        });                 
    }
}
});

var storeStates = Ext.create('Ext.data.Store', {
autoLoad: false,
fields: ['State']
});

Ext.define('State',{
extend: 'Ext.data.Model',
fields: [
    { name: 'id', type: 'int' },
    { name: 'name', type: 'string' }
]
});

Ext.define('StateCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.statecombo',
queryMode: 'local',
valueField: 'State',
displayField: 'State',
store: storeStates
});

This is the latest I tried but still when I select something from 1st combobox, the second combobox is not getting populated. any Help on this please?

Answer 1

Technically this code will work:

http://jsfiddle.net/sdt6585/wPzPD/29/

Ext.define('Country',{
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'string' },
        { name: 'name', type: 'string' }
    ]
});

Ext.define('CountryCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.countrycombo',
    allowBlank: false,
    queryMode: 'local',
    valueField: 'id',
    displayField: 'name',
    store: {
        model: 'Country',
        data: [
            { id: 'China', name: 'China'},
            { id: 'Japan', name: 'Japan'},
            { id: 'Malaysia', name: 'Malaysia'}
        ]
    },
    listeners: {
        "select": function(obj){
            Ext.Ajax.request({
                url: '/CellEditing/FormServlet',
                method: 'POST',
                params: {
                    data: obj.getValue()
                },
                callback: function (response, operation) {
                    //This should be the text string in reponseText, just putting it there since I don't have it
                    response.responseText = '{data: [{state: "State One"}, {state: "State Two"}, {state: "State Three"}]}'
                    //Put this in your success function
                    var data = Ext.JSON.decode(response.responseText).data;
                    storeStates.loadData(data);
                }
            });
        }
    }
});

var storeStates = Ext.create('Ext.data.Store', {
    autoLoad: false,
    fields: ['state']
});

Ext.define('State',{
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ]
});

Ext.define('StateCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.statecombo',
    queryMode: 'local',
    valueField: 'state',
    displayField: 'state',
    store: storeStates
});

Ext.form.Panel.create({
    title: 'Tester',
    renderTo: Ext.getBody(),
    items: [
        CountryCombo.create(),
        StateCombo.create()
    ]
});​

The major changes are these:

• You need to decode the json string you got back with Ext.JSON.decode(response.responseText)) in the success function of your ajax call
• You defined a state model, but the state store didn't use it. It can be removed.
• You had the state variable capitalized everywhere except in your json string. Corrected it to lower case.
• Your reference to state combo was only to the template class for that view, not to an instance of it. In addition, if it were an initialized class, it's store property is defined as such and has nothing to do with your variable name. You can either store a reference to the created combo box and call it's store properties loadData function, or like I did, just use the storeStates reference to the store to load the data.

While that technically works, it's not the most elegant solution. You would be working with much more maintainable code to follow this process.

1. Define Models for Country and State (ideally not in the global namespace!!) and give the state store a proxy to automatically decode the json responses.
2. Define stores that use the models as their base
3. Define views for your combo boxes (only if they will be reused elsewhere)
4. Put instances of the combo boxes in a container of some sort (use either Ext.create() or the create() function of your view classes.
5. Attach a listener to the instance of the country combo that you have created and have it call the load function of stateCombo's store.

---

Ext.define('MyApp.models.Country',{
    extend: 'Ext.data.Model',
    requires: ['Ext.data.SequentialIdGenerator'],
    idgen: 'sequential',
    fields: [
        { name: 'name', type: 'string' }
    ]
});

Ext.define('MyApp.stores.Country', {
    model: 'MyApp.models.Country',
    data: [
        { name: 'China'},
        { name: 'Japan'},
        { name: 'Malaysia'}
    ]
});

Ext.define('MyApp.models.State',{
    extend: 'Ext.data.Model',
    requires: ['Ext.data.SequentialIdGenerator'],
    idgen: 'sequential',
    fields: [
        { name: 'state', type: 'string' }
    ],
    proxy: {
        type: 'ajax',
        method: 'post',
        url: '/CellEditing/FormServlet',
        reader: {
            type: 'json',
            root: 'data',
            successProperty: false
        }
    }
});

Ext.define('MyApp.stores.State', {
    model: MyApp.models.State
});

Ext.define('MyApp.views.CountryCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.countrycombo',
    allowBlank: false,
    queryMode: 'local',
    valueField: 'name',
    displayField: 'name',
    store: MyApp.stores.Country.create()
});

Ext.define('MyApp.views.StateCombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.statecombo',
    queryMode: 'local',
    valueField: 'state',
    displayField: 'state',
    store: MyApp.stores.State.create()
});

Ext.form.Panel.create({
    title: 'Tester',
    renderTo: Ext.getBody(),
    items: [
        countryCombo = MyApp.views.CountryCombo.create(),
        stateCombo = MyApp.views.StateCombo.create()
    ]
});

countryCombo.on('beforeselect', function (combo, record, index, eOpts) {
    stateCombo.store.load({
        params: {data: record.get('name')}
    });
});​

Answer 2

use loadData method to load data to your combobox.

yourCombo.store.loadData(obj.responsetext);