Populating combobox in editor grid from Parent Store

[ksandeepa]

I have a gridpanel and I want it to be editable having combobox. I need to populate this combobox with the values which is coming from parent store. All the examples I looked into refers to external store and that works. I have pasted my code for your reference.
Sample JSON
{
'success': true,
'results': [
{'sectionId': 'sectionId', 'sectionName': 'Section Name' ,'units': 'units', 'gradingBasis': 'gradingBasis','instructors': 'instructors', 'meetingTimes': [{'timeone':'Daft Punk'}],
'gradingBasisOptions' : [{'label': 'label1', 'value': 'val1'}, {'label': 'label1', 'value': 'val1'},{'label': 'label1', 'value': 'val1'}]},
{'sectionId': 'sectionId', 'sectionName': 'Section Name' ,'units': 'units', 'gradingBasis': 'gradingBasis','instructors': 'instructors', 'meetingTimes': [{'timeone':'Daft Punk'}]
]
}

and my view

Ext.define('studentenrollment.view.availableView', {
extend:'Ext.panel.Panel',
alias:'widget.availableView',
requires:['studentenrollment.store.availableStore',
'studentenrollment.model.availableModel',
'studentenrollment.controller.enrollmentController'
],
margins:'10 10 10 10',
width:'100%',
title:false,
autoScroll : false,
layout : 'fit',
items:[
{ id:'availableview-grid',
xtype :'grid',
store: 'availableStore',
autoScroll : true,
columns: [
{
xtype:'actioncolumn',
width:90,
sortable: false,
align : 'center',
id : 'addpreferenceAction',
items: [{
icon: 'ext-4.0/resources/themes/images/default/dd/drop-add.gif', // Use a URL in the icon config
tooltip: 'Add Preference'
}]
},
{text: "Section", width : 90, sortable: true, dataIndex: 'sectionName'},
{text: "Units", width: 90, sortable: true, dataIndex: 'units'},
{
text: "Grading Basis",
width: 90,
sortable: true,
dataIndex: 'gradingBasis',
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
],
lazyRender: false,
listClass: 'x-combo-list-small'


}
},
{text: "Instructor", width: 90, sortable: true, dataIndex: 'instructors'}
],


columnLines: false,
dockedItems: [{
xtype: 'toolbar',


items: ['Available','->',{
text:'Submit',
tooltip:'Add a new row',
iconCls:'add',
xtype : 'button'
}, '-', {
text:'Options',
tooltip:'Set options',
iconCls:'option'
}]
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
frame: true,
title: false,
iconCls: 'icon-grid'
}
],


padding:1,
height:'100%',
id:'availableViewId'
});

My requirement is that I want to refer to parent store's gradingBasisOptions list to populate the combobox (something like store =
record.get('gradingBasisOptions
')
)


Thanks for help

[vietits]

You can catch 'beforeedit' event of cell editor:


plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
beforeedit: function(event){
if(event.field == 'gradingBasis'){
var options = event.record.get('gradingBasisOptions') || [];
var store = event.column.field.store; // combobox store
store.removeAll();
var data = [];
for(var idx = 0, len = options.length; idx < len; idx++){
data.push([options[idx].label, options[idx].value])
}
store.loadData(data);
}
}
}
})
]

[ksandeepa]

Thank you very much for the quick reply.
I have changed the code slightly and is working fine with one issue, i.e. it is not loading the data for the first time and is working from next time onwards
Mycode:
Changes in the editor

editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: new Ext.data.Store({
fields: ['label', 'value'],
data : [
{"label":"Select One", "value":"0"}
]
}),
// mode: 'local',
validateOnChange:false,
valueField: 'value',
displayField: 'label',
lazyRender: false,
listClass: 'x-combo-list-small'
}


Changes in the listner:

listeners: {
beforeedit: function(e) {
console.log(e);
if(e.field == 'gradingBasis'){
var store = e.column.getEditor().store,
record = e.record;
console.log(record.get('gradingOptions'));
store.removeAll();
store.loadData(record.get('gradingOptions'));
//e.grid.doComponentLayout();
}
}
}