Grid panel with comboboxes as columns cell Editing extjs - 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'
}
]
});