How to create dynamic combobox in extjs5?

Question

ExtJS/Sencha

There is a sample code https://fiddle.sencha.com/#fiddle/ita On the beforeedit event, you need to change the dropbox list. I'm trying to do this:

beforeedit: function(editor, context, eOpts) {
    var store = Ext.data.StoreManager.lookup('columnStore');

    store.loadRawData([{name: '666', value: '666'}], false);
    Ext.getCmp('myComboBox').bindStore(store);
 },

This example works correctly only after the second click on the grid cell. How to make the combobox list dynamically change immediately on click on the cell from the first time? P/S/ Full sheet of code I modified:

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        store: Ext.create('Ext.data.Store', {
            fields: ['combo', 'val'],
            data: [{combo: 1, val: 1},{combo: 2, val: 2}]
        }),
        columns: [{
            text: 'ComboColumn',
            dataIndex: 'combo',
            flex: 1,
            editor: {
                xtype: 'combobox',
                id: 'myComboBox',
                displayField: 'name',
                valueField: 'value',
                store: Ext.create('Ext.data.Store', {
                    queryMode: 'local',
                    storeId: 'columnStore',
                    fields: ['name', 'value'],
                    data: [{
                        name: '1', value: '1'
                    },{
                        name: '1', value: '1'
                    },{
                        name: '2', value: '2'
                    },{
                        name: '2', value: '2'
                    }]
                })
            }
        }],
        plugins: {
            ptype: 'cellediting',
            clicksToEdit: 1
        },
        listeners: {
                beforeedit: function(editor, context, eOpts) {
                    var store = Ext.data.StoreManager.lookup('columnStore');

                    store.loadRawData([{name: '666', value: '666'}], false);
                    Ext.getCmp('myComboBox').bindStore(store);
                },
                edit: function(editor, context, eOpts) {
                    var store = Ext.data.StoreManager.lookup('columnStore');
                    store.clearFilter(true);
                    store.load();
                }
            }
    });
}
});

Answer 1

I hope the answer is useful to someone. Create a prototype of your store and pass the desired values ​​to the constructor. I'm not sure how correct the solution is, but it works :)

Ext.getCmp('myComboBox').bindStore(Ext.create('Ext.data.Store',{
   fields: ['name', 'value'], 
   data: [{name: '666', value: '666'}]
  })
);