Cell editing combobox with remote data

[harman]

Hi All,

I am using ExtJS 4.0.7 cell editing grid that gets populated using XML data.
I intend to show combo as an editor for a column. Each combo in each row must have its individual store populated from the data from XML.
How can i do this in ExtJS?
What must be the format of XML that i send?

[scottmartin]

Here is a good example:
http://www.sencha.com/forum/showthread.php?238021

Scott.

[harman]

Thanks Scott but my question was a little different.
I know we can populate a combo store like that. All i wanted to know is
Within XML how would every individual combo recognize its own store, as each store needs to have different values.
The editor combo in first row might have option1 , option2 and option3
while the combo in second row might have option 3, option5, option6 and so on.

[scottmartin]

Do you have any data to distinguish the records? You could load the XML into each store and set a filter. See the following example:

var store1 = Ext.create('Ext.data.Store', {
    fields  : ['type', 'name', 'email', 'change'],
    data    : {'items' : [
        { 'type' : 2, 'name' : 'Lisa', 'email'  : 'lisa@simpsons.com', 'change' : 100  },
        { 'type' : 2, 'name' : 'Bart', 'email'  : 'bart@simpsons.com', 'change' : -20  },
        { 'type' : 1, 'name' : 'Homer', 'email' : 'homer@simpsons.com', 'change' : 23   },
        { 'type' : 1, 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11   }
    ]},
    proxy   : {
        type   : 'memory',
        reader : {
            type : 'json',
            root : 'items'
        }
    }
});

// stores are cheap; create new one for combo
var store2 = Ext.create('Ext.data.Store', {
    fields  : ['type', 'name', 'email', 'change'],
    proxy   : {
        type   : 'memory',
        reader : {
            type : 'json',
            root : 'items'
        }
    }
   
});

// data from orig store
store2.loadData(store1.data.items);

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Select',
    store: store1,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'name',
    renderTo: Ext.getBody()
});

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Select',
    store: store2,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'name',
    renderTo: Ext.getBody(),
    listeners: {
        beforequery: function(queryEvent){
            store2.clearFilter(true);
            store2.filter({
                property: 'type',
                value: 2
            });
        }
    }
    
});

Scott.

[harman]

I wont have clue of what data would be coming from the DB so cant filter anything.
Its like i fetch different player names to show in combo box and every row represents a different game.
I dont know what all game's records would come to UI.

So all i can do is create a separate store for every combo.
OR
I can populate the combo store from the main store's record corresponding to the row index of the cell clicked.
Something like

{
    header: 'Light',
    dataIndex: 'light',
    width: 130,
    editor: {
        xtype: 'combobox',
        typeAhead: true,
        triggerAction: 'all',
        selectOnTab: true,
        store: someFunction,
        lazyRender: true,
        listClass: 'x-combo-list-small',

    }
}


function someFunction() { 
        //Step !.Get the row index clicked
        //step 2. mainstore.getAt(rowIndex).get(fieldName);
        //step 3. return the data array
        }​

just that we need to run that function every time
May be we can keep that on cell click event ?!!

[scottmartin]

As shown, use beforequery to perform your criteria to filter data based on your row index.

Scott.