Grid panel with comboboxes as columns cell Editing extjs

Question

I have a gridpanel with three columns I made these 3 columns as comboboxes using editor and I added a cell editing plugin. I should be able to add a row and select the values from the comboboxes coming from three different stores. The problem is I am unable to add a row which doesn't have a default grid store. How can I add a row in order to see the combobox columns to select values. Here is the fiddle

Answer 1

"Grids are composed of two main pieces - a Ext.data.Store full of data and a set of columns to render."

You must add a store to gridpanel and then try to add a row to the store by clicking the add button. I have modified the code and is working now.

Ext.application({
    models: [
        'OneModel',
        'TwoModel',
        'ThreeModel'
    ],
    views: [
        'MyGridPanel'
    ],
    name: 'combo',

    launch: function() {
        Ext.create('combo.view.MyGridPanel', {renderTo: Ext.getBody()});
    }

});

Ext.define('combo.view.MyGridPanel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.mygridpanel',

    requires: [
        'combo.view.MyGridPanelViewModel',
        'combo.view.MyGridPanelViewController',
        'Ext.grid.column.Column',
        'Ext.form.field.ComboBox',
        'Ext.view.Table',
        'Ext.toolbar.Toolbar',
        'Ext.button.Button',
        'Ext.grid.plugin.CellEditing'
    ],
    store:Ext.create('Ext.data.Store',{
        fields:[{   
            name:'One',
            name:'Two',
            name:'Three'
        }]
    }),

    controller: 'mygridpanel',
    viewModel: {
        type: 'mygridpanel'
    },
    height: 501,
    width: 562,
    title: 'My Grid Panel',

    columns: [
        {
            xtype: 'gridcolumn',
            dataIndex: 'string',
            text: 'One',
            editor: {
                xtype: 'combobox',
                displayField: 'description',
                valueField: 'description',
                bind: {
                    store: '{oneStore}'
                }
            }
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'number',
            text: 'Two',
            editor: {
                xtype: 'combobox',
                displayField: 'lastname',
                valueField: 'id',
                bind: {
                    store: '{twoStore}'
                }
            }
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'date',
            text: 'Three',
            editor: {
                xtype: 'combobox',
                displayField: 'name',
                valueField: 'id',
                bind: {
                    store: '{threeStore}'
                }
            }
        }
    ],
    dockedItems: [
        {
            xtype: 'toolbar',
            dock: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'Add',
                    listeners: {
                        click: 'onButtonClick'
                    }
                }
            ]
        }
    ],
    plugins: [
        {
            ptype: 'cellediting',
            clicksToEdit: 1
        }
    ]

});
Ext.define('combo.view.MyGridPanelViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.mygridpanel',

    requires: [
        'Ext.data.Store',
        'Ext.data.proxy.Memory'
    ],

    stores: {
        oneStore: {
            model: 'combo.model.OneModel',
            data: [
                {
                    description: 'vel'
                },
                {
                    description: 'magni'
                },
                {
                    description: 'delectus'
                },
                {
                    description: 'quas'
                },
                {
                    description: 'asperiores'
                },
                {
                    description: 'molestias'
                },
                {
                    description: 'sunt'
                },
                {
                    description: 'facere'
                },
                {
                    description: 'et'
                },
                {
                    description: 'magnam'
                }
            ],
            proxy: {
                type: 'memory'
            }
        },
        twoStore: {
            model: 'combo.model.TwoModel',
            data: [
                {
                    id: 'aperiam_01',
                    lastname: 'aut'
                },
                {
                    id: 'iure_11',
                    lastname: 'dolores'
                },
                {
                    id: 'fugiat_21',
                    lastname: 'excepturi'
                },
                {
                    id: 'et_31',
                    lastname: 'praesentium'
                },
                {
                    id: 'necessitatibus_41',
                    lastname: 'aperiam'
                },
                {
                    id: 'fugiat_51',
                    lastname: 'quia'
                },
                {
                    id: 'ullam_61',
                    lastname: 'nihil'
                },
                {
                    id: 'tempora_71',
                    lastname: 'nisi'
                },
                {
                    id: 'ea_81',
                    lastname: 'tempora'
                },
                {
                    id: 'doloribus_91',
                    lastname: 'nostrum'
                }
            ],
            proxy: {
                type: 'memory'
            }
        },
        threeStore: {
            model: 'combo.model.ThreeModel',
            data: [
                {
                    id: 'sapiente_01',
                    name: 'dolorem'
                },
                {
                    id: 'eum_11',
                    name: 'animi'
                },
                {
                    id: 'rerum_21',
                    name: 'rerum'
                },
                {
                    id: 'earum_31',
                    name: 'quaerat'
                },
                {
                    id: 'voluptatem_41',
                    name: 'modi'
                },
                {
                    id: 'omnis_51',
                    name: 'autem'
                },
                {
                    id: 'autem_61',
                    name: 'autem'
                },
                {
                    id: 'voluptatem_71',
                    name: 'voluptatum'
                },
                {
                    id: 'ut_81',
                    name: 'pariatur'
                },
                {
                    id: 'dolore_91',
                    name: 'dolorem'
                }
            ],
            proxy: {
                type: 'memory'
            }
        }
    }

});
Ext.define('combo.view.MyGridPanelViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.mygridpanel',

    onButtonClick: function(button, e, eOpts) {
        button.up('grid').getStore().insert(0, {});
        grid.getPlugin('CellEditing').startEditByPosition({row: 0, column: 1});
    }

});
Ext.define('combo.model.OneModel', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.field.Field'
    ],

    fields: [
        {
            name: 'description'
        }
    ]
});
Ext.define('combo.model.ThreeModel', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.field.Field'
    ],

    fields: [
        {
            name: 'id'
        },
        {
            name: 'name'
        }
    ]
});
Ext.define('combo.model.TwoModel', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.field.Field'
    ],

    fields: [
        {
            name: 'id'
        },
        {
            name: 'lastname'
        }
    ]
});