1. #1
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Vote Rating
    3
    Answers
    2
    harman is on a distinguished road

      0  

    Default Unanswered: Cell editing combobox with remote data

    Unanswered: Cell editing combobox with remote data


    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?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  3. #3
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Vote Rating
    3
    Answers
    2
    harman is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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:

    Code:
    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.

  5. #5
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Vote Rating
    3
    Answers
    2
    harman is on a distinguished road

      0  

    Default


    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

    Code:
    {
        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 ?!!

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

Thread Participants: 1

Tags for this Thread