ExtJS 4不能在网格内的组合中呈现值(单元格编辑器插件)
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'事件,因为渲染将被多次调用,并且根本不起作用,但我甚至不想尝试。
<<p> 代码片段/strong>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
}
}
});
相关文章:
- ExtJS网格单元格编辑器,防止焦点松动问题
- dhtmlx添加新行并启动单元格编辑器
- 可以将单元格编辑为下拉列表并使用 JQGard 进行多选
- 在单元格编辑时获取extjs中的行数据
- Kendo ui Grid:标准的HTML5输入日期时间可以用作单元格编辑器吗
- 如何在编辑行调用中使用 jqGrid 单元格编辑进行滚动
- 禁用光滑网格中的特定单元格编辑
- 启用 JQ 网格上的“保存”按钮,其中包含内联编辑和单元格编辑
- nggrid单元格编辑:在编辑之前获取值
- Extjs从单元格编辑器访问网格记录
- 如何只允许在jqGrid单元格编辑中使用数字
- 对象值Extjs4的单元格编辑器
- 如何在DojoGridX的单元格编辑器中根据另一个单元格的值过滤select组件的选项
- 如何在可编辑的GridX中将局部变量作为属性提供给单元格编辑器
- 如何使用extjs存储管理器进行单元格编辑
- Slickgrid自定义单元格编辑器更新所有单元格
- JQGrid子网格和父网格中的单元格编辑
- ExtJs - Javascript -网格中的组合框(单元格编辑插件)-网格/窗口后面的下拉列表
- 单元格编辑网格中的组合框编辑器在选择值后不会取消选择
- ExtJS 4不能在网格内的组合中呈现值(单元格编辑器插件)