[英]ExtJS 4 Cannot render values in combo inside grid (cell editor plugin)
我已经使用Sencha ExtJS 4.2实现了一段时间的用户界面,几乎可以完成所有工作,但是在尝试将网格与由combobox
处理的celleditor
一起使用时遇到了一些问题。
我用来在网格中显示信息的数据对象如下:
属性ASSOCIATED_TICKETS
是数组的对象数组:
->[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': ''
}
我应该为每个条目显示3行,并且条目内的数组应组合显示。
_________________________
|ticket|associated tickets|
---------------------------
|123 |[XY v]|
|456 |[CD v]|
|789 | |
---------------------------
我设法在网格中进行组合,但是每当加载页面时,我只会收到第一个元素,而当单击组合时,它将显示空格,但根本没有文本。 如果我想为第一行选择另一个值,则它在我的组合中应该显示“ AB”作为选项,但它显示的是空字符串。
字段“ DEFAULT_TKT”只是一个参考,用于知道当时选择了哪个关联的票证,因此我可以根据用户的选择执行一些其他操作。
我为网格编写的代码如下:
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;
}
}
}
});
我在这里想念什么吗? 任何帮助,将不胜感激。
在此先感谢您的时间和帮助。
问题在于celleditor
的存储未指定任何字段,因此加载的记录中没有数据。
我还建议您使用单元格编辑插件的'beforeedit'事件,因为渲染将被多次调用,并且完全不起作用,但是我什至不想尝试。
代码片段
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
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.