ExtJS 4 Cannot render values in combo inside grid (cell editor plugin)

Question

I've been implementing some user interfaces for a while using Sencha ExtJS 4.2, I managed to do almost everything, but I'm facing some issues when trying to use a grid with a celleditor which is handled by a combobox.

The data object I'm using to display information in my grid is as following:

Array of Objects where the property ASSOCIATED_TICKETS is an array:

->[0]{'TKTNUM': '123', 
      'ASSOCIATED_TICKETS': 
              [{ASSOC_TKT_VAL:'XY', AGE: 2}, {ASSOC_TKT_VAL:'AB', AGE: 3}], 
      'DEFAULT_TKT': 'XY'
     }

->[1]{'TKTNUM': '234', 
      'ASSOCIATED_TICKETS': 
              [{ASSOC_TKT_VAL:'CD', AGE: 1}], 
      'DEFAULT_TKT': 'CD'
     }

->[2]{'TKTNUM': '567', 
      'ASSOCIATED_TICKETS': 
              [], 
      'DEFAULT_TKT': ''
     }

I should display 3 rows for each entry and the arrays inside my entries should be displayed in a combo.

 _________________________
|ticket|associated tickets|
---------------------------
|123   |[XY             v]|
|456   |[CD             v]|
|789   |                  |
---------------------------

I managed to do my combo in the grid, but whenever I load the page I'm just receiving the first element and when I click on the combo, it is displaying spaces but no text at all. If I want to select another value for my first row, it should display 'AB' as an option in my combo, but it is displaying an empty String.

The field "DEFAULT_TKT" is just a reference to know which associated ticket is selected at that moment so I can perform some additional actions based on the user's selection.

The code I have for the grid is the following:

Ext.define('TKTSYS.webportal.MyGrid', {
    extend: 'Ext.grid.Panel',
    //Create the grid in the init Component method 
    initComponent: function() {
        var me = this;
        Ext.apply(this, {
            id: 'mygrid',
            scope: this,
            //Here is my Store, it will handle the information
            store: Ext.create('Ext.data.JsonStore', {
                fields: ["TKTNUM", "ASSOCIATED_TICKETS", "DEFAULT_TKT"]
            }),
            columns: [{
                    text: "Main ticket",
                    dataIndex: 'TKTNUM'
                    flex: 1
                },
                {
                    text: "Associated Tickets",
                    dataIndex: 'DEFAULT_TKT',
                    flex: 1,
                    //This will render the values of the combo
                    renderer: renderCombo,
                    //This will be the combo editor
                    editor: Ext.create('Ext.form.field.ComboBox', {
                        id: 'associated_tkts',
                        queryMode: 'local'
                        displayField: 'ASSOC_TKT_VAL',
                        valueField: 'ASSOC_TKT_VAL',
                        ,
                        editable: false,
                        store: []
                    })
                }
            ],
            plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })]
        })
        me.generateData();
    },
    //Retrieves data and put into the grid
    generateData: function() {
        //Call Web Service REST and retrieve the data
        var dataArray = getArrayOfObjectsFromRest();
        var chart = Ext.getCmp('mygrid');
        var chartStore = chart.store;
        chartStore.removeAll(true);
        chartStore.clearFilter(true);
        chartStore.loadData(dataArray);
    },

    //Render the information of the combo
    renderCombo: function(value, meta, record) {
        var targetStore = record.data.ASSOCIATED_TICKETS;
        meta.column.editor.getStore().loadData(targetStore);
        for (var i = 0; i < targetStore.length; i++) {
            var currTktInfo = targetStore[i];
            if (currTktInfo.ASSOC_TKT_VAL === value) {
                return value;
            }
        }
    }
});

Is there something I'm missing here? Any help would be appreciated.

Thanks in advance for your time and help.

Answer 1

The problem was that the store of the celleditor did not specify any fields, so the loaded records had no data.

I also suggest you use the 'beforeedit' event of the cell editing plugin, as render will be called multiple times, and will not work at all but I don't even want to try that.

CODE SNIPPET

Ext.create('Ext.grid.Panel', {
    id: 'mygrid',
    width: 500,
    height: 200,
    title: 'Test Grid',
    //Here is my Store, it will handle the information
    store: Ext.create('Ext.data.JsonStore', {
        fields: ["TKTNUM", "ASSOCIATED_TICKETS", "DEFAULT_TKT"],
        data: [{
            "TKTNUM": 123,
            "ASSOCIATED_TICKETS": [{
                "ASSOC_TKT_VAL": "XY",
                "AGE": 2
            }, {
                "ASSOC_TKT_VAL": "AB",
                "AGE": 3
            }],
            "DEFAULT_TKT": "XY"
        }, {
            "TKTNUM": "234",
            "ASSOCIATED_TICKETS": [{
                "ASSOC_TKT_VAL": "CD",
                "AGE": 1
            }],
            "DEFAULT_TKT": "CD"
        }, {
            "TKTNUM": 567,
            "ASSOCIATED_TICKETS": [],
            "DEFAULT_TKT": ""
        }]
    }),
    columns: [{
        text: 'Main ticket',
        dataIndex: 'TKTNUM',
        flex: 1
    }, {
        text: 'Associated Tickets',
        dataIndex: 'DEFAULT_TKT',
        flex: 1,
        //This will be the combo editor
        editor: {
            xtype: 'combobox',
            queryMode: 'local',
            displayField: 'ASSOC_TKT_VAL',
            valueField: 'ASSOC_TKT_VAL',
            editable: false,
            store: {
                xtype: 'array',
                fields: ["ASSOC_TKT_VAL", "AGE"]
            }
        }
    }],
    renderTo: document.body,
    plugins: [{
        ptype: 'cellediting',
        clicksToEdit: 1
    }],
    listeners: {
        beforeedit: function(e, eOpts) {
            console.log(arguments)
            var store = eOpts.column.getEditor().getStore();
            var targetStore = eOpts.record.get('ASSOCIATED_TICKETS');
            console.log(targetStore);
            store.loadData(targetStore);
            console.log(store.getRange()); //check what is read
        }
    }
});