I've been implementing some user interfaces for a while using Sencha ExtJS 4.2, I managed to do almost everything, but I'm facing some issues when trying to use a grid with a celleditor which is handled by a combobox.
The data object I'm using to display information in my grid is as following:
Array of Objects where the property ASSOCIATED_TICKETS is an array:
->[0]{'TKTNUM': '123',
'ASSOCIATED_TICKETS':
[{ASSOC_TKT_VAL:'XY', AGE: 2}, {ASSOC_TKT_VAL:'AB', AGE: 3}],
'DEFAULT_TKT': 'XY'
}
->[1]{'TKTNUM': '234',
'ASSOCIATED_TICKETS':
[{ASSOC_TKT_VAL:'CD', AGE: 1}],
'DEFAULT_TKT': 'CD'
}
->[2]{'TKTNUM': '567',
'ASSOCIATED_TICKETS':
[],
'DEFAULT_TKT': ''
}
I should display 3 rows for each entry and the arrays inside my entries should be displayed in a combo.
_________________________
|ticket|associated tickets|
---------------------------
|123 |[XY v]|
|456 |[CD v]|
|789 | |
---------------------------
I managed to do my combo in the grid, but whenever I load the page I'm just receiving the first element and when I click on the combo, it is displaying spaces but no text at all. If I want to select another value for my first row, it should display 'AB' as an option in my combo, but it is displaying an empty String.
The field "DEFAULT_TKT" is just a reference to know which associated ticket is selected at that moment so I can perform some additional actions based on the user's selection.
The code I have for the grid is the following:
Ext.define('TKTSYS.webportal.MyGrid', {
extend: 'Ext.grid.Panel',
//Create the grid in the init Component method
initComponent: function() {
var me = this;
Ext.apply(this, {
id: 'mygrid',
scope: this,
//Here is my Store, it will handle the information
store: Ext.create('Ext.data.JsonStore', {
fields: ["TKTNUM", "ASSOCIATED_TICKETS", "DEFAULT_TKT"]
}),
columns: [{
text: "Main ticket",
dataIndex: 'TKTNUM'
flex: 1
},
{
text: "Associated Tickets",
dataIndex: 'DEFAULT_TKT',
flex: 1,
//This will render the values of the combo
renderer: renderCombo,
//This will be the combo editor
editor: Ext.create('Ext.form.field.ComboBox', {
id: 'associated_tkts',
queryMode: 'local'
displayField: 'ASSOC_TKT_VAL',
valueField: 'ASSOC_TKT_VAL',
,
editable: false,
store: []
})
}
],
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})]
})
me.generateData();
},
//Retrieves data and put into the grid
generateData: function() {
//Call Web Service REST and retrieve the data
var dataArray = getArrayOfObjectsFromRest();
var chart = Ext.getCmp('mygrid');
var chartStore = chart.store;
chartStore.removeAll(true);
chartStore.clearFilter(true);
chartStore.loadData(dataArray);
},
//Render the information of the combo
renderCombo: function(value, meta, record) {
var targetStore = record.data.ASSOCIATED_TICKETS;
meta.column.editor.getStore().loadData(targetStore);
for (var i = 0; i < targetStore.length; i++) {
var currTktInfo = targetStore[i];
if (currTktInfo.ASSOC_TKT_VAL === value) {
return value;
}
}
}
});
Is there something I'm missing here? Any help would be appreciated.
Thanks in advance for your time and help.
The problem was that the store of the celleditor did not specify any fields, so the loaded records had no data.
I also suggest you use the 'beforeedit' event of the cell editing plugin, as render will be called multiple times, and will not work at all but I don't even want to try that.
CODE SNIPPET
Ext.create('Ext.grid.Panel', {
id: 'mygrid',
width: 500,
height: 200,
title: 'Test Grid',
//Here is my Store, it will handle the information
store: Ext.create('Ext.data.JsonStore', {
fields: ["TKTNUM", "ASSOCIATED_TICKETS", "DEFAULT_TKT"],
data: [{
"TKTNUM": 123,
"ASSOCIATED_TICKETS": [{
"ASSOC_TKT_VAL": "XY",
"AGE": 2
}, {
"ASSOC_TKT_VAL": "AB",
"AGE": 3
}],
"DEFAULT_TKT": "XY"
}, {
"TKTNUM": "234",
"ASSOCIATED_TICKETS": [{
"ASSOC_TKT_VAL": "CD",
"AGE": 1
}],
"DEFAULT_TKT": "CD"
}, {
"TKTNUM": 567,
"ASSOCIATED_TICKETS": [],
"DEFAULT_TKT": ""
}]
}),
columns: [{
text: 'Main ticket',
dataIndex: 'TKTNUM',
flex: 1
}, {
text: 'Associated Tickets',
dataIndex: 'DEFAULT_TKT',
flex: 1,
//This will be the combo editor
editor: {
xtype: 'combobox',
queryMode: 'local',
displayField: 'ASSOC_TKT_VAL',
valueField: 'ASSOC_TKT_VAL',
editable: false,
store: {
xtype: 'array',
fields: ["ASSOC_TKT_VAL", "AGE"]
}
}
}],
renderTo: document.body,
plugins: [{
ptype: 'cellediting',
clicksToEdit: 1
}],
listeners: {
beforeedit: function(e, eOpts) {
console.log(arguments)
var store = eOpts.column.getEditor().getStore();
var targetStore = eOpts.record.get('ASSOCIATED_TICKETS');
console.log(targetStore);
store.loadData(targetStore);
console.log(store.getRange()); //check what is read
}
}
});