How to get handle to a cell field in Extjs Grid - extjs

Question

The data for the grid looks something like this:
data: [{
field1: abc
field2: [
{value: 0, label: Blue},
{value: 1, label: Green}
]
},
{
field1: def
field2: [
{value: 0, label: Red},
{value: 1, label: Pink}
]
}]
grid component config looks something like:
{
xtype: 'grid',
....
columns: [
{
dataIndex: field1
},
{
dataIndex: field2
editor: {
xtype: combobox,
displayField: label,
valueField: value,
store: new someSampleStore();
}
}
]
}
Now, the grid's column #2 has a combobox.
For Grid's row 0, column 1; combobox dropdown should display these options: Blue, Green
For Grid's row 1, column 1; combobox dropdown should display these options: Red, Pink
Do I need to manually load the data into each combobox (each row) or is there any way I can specify config in column definition so that the combobox picks up data for 'field2' ?

Answer 1

Have a look at the code below. In essence it does what you want but only works after the first click. I'll let you figure that out. ;-)
Demo: https://fiddle.sencha.com/#fiddle/gec
Ext.application({
name: 'Fiddle',
launch: function() {
var comboStore = Ext.create('Ext.data.Store', {
fields: ['value', 'label'],
data: [{
name: '',
value: ''
}],
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott",
seniority: 7,
dep: "Management",
hired: "01/10/2004",
comboData: [{
label: 'Test1',
value: 'testval1'
}, {
label: 'Test2',
value: 'testval2'
}, {
label: 'Test3',
value: 'testval3'
}]
}, {
firstname: "Dwight",
lastname: "Schrute",
seniority: 2,
dep: "Sales",
hired: "04/01/2004",
comboData: [{
label: 'Dwight1',
value: 'testval1'
}, {
label: 'Dwight2',
value: 'testval2'
}, {
label: 'Dwight3',
value: 'testval3'
}]
}, {
firstname: "Jim",
lastname: "Halpert",
seniority: 3,
dep: "Sales",
hired: "02/22/2006",
comboData: [{
label: 'Jim1',
value: 'testval1'
}, {
label: 'Jim2',
value: 'testval2'
}, {
label: 'Jim3',
value: 'testval3'
}]
}, {
firstname: "Kevin",
lastname: "Malone",
seniority: 4,
dep: "Accounting",
hired: "06/10/2007",
comboData: [{
label: 'Kevin1',
value: 'testval1'
}, {
label: 'Kevin2',
value: 'testval2'
}, {
label: 'Kevin3',
value: 'testval3'
}]
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname',
editor: {
xtype: 'combobox',
displayField: 'label',
valueField: 'value',
store: comboStore,
fields: ['value', 'label']
}
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
text: 'Hired Month',
dataIndex: 'hired',
xtype: 'datecolumn',
format: 'M'
}, {
text: 'Department (Yrs)',
xtype: 'templatecolumn',
tpl: '{dep} ({seniority})'
}],
selType: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, context, eOpts) {
testData = context.record.data.comboData;
comboStore.setData(testData);
}
}
},
width: 400,
forceFit: true,
renderTo: Ext.getBody()
});
}
});