[英]ExtJS 5: Complex grid data - set column editor value
我有“复杂”数据-意味着我的数据中存在关联-我正在尝试在网格中使用这些关联。 我根据一些数据创建列,并且由于数据嵌套在数组中,因此我为每个列设置了一个渲染器...我还设置了一个编辑器。 渲染器工作正常,但是设置编辑器的值却无法达到我的预期。 这是我的代码(和Fiddle ):
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('Phone', {
extend: 'Ext.data.Model',
fields: [
{name: 'phone', type: 'int'},
{name: 'type', type: 'string'}
]
});
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'}
],
hasMany: [
{associationKey: 'phones', model: 'Phone', name: 'getPhonesStore'}
]
});
var beforeEdit = function(editor, context, eOpts) {
var grid = context.grid;
var record = context.record;
if (grid && record) {
var phonesStore = record.getPhonesStore();
var columns = grid.columns;
if (columns && phonesStore) {
for (var i = 1; i < columns.length; i++) {
var column = columns[i];
if (column) {
var editor = column.getEditor();
if (editor) {
alert(phonesStore.getAt(i - 1).get('phone'));
editor.setValue(phonesStore.getAt(i - 1).get('phone'));
}
}
}
}
}
};
Ext.define('MyView', {
extend: 'Ext.grid.Panel',
store: Ext.create('Ext.data.Store', {
model: 'Person',
proxy: {
type: 'memory'
},
data: [
{name: 'blah', phones: [{phone: 123456789, type: 'Home'}, {phone: 9999999999, type: 'Cell'}]},
{name: 'bleh', phones: [{phone: 222222222, type: 'Home'}, {phone: 1111111111, type: 'Cell'}]}
]
}),
plugins: [
{ptype: 'rowediting', clicksToEdit: 1, listeners: {beforeedit: beforeEdit}}
],
height: 300,
width: 400,
initComponent: function() {
var store = this.getStore();
if (store) {
var firstRecord = store.first();
if (firstRecord) {
var phonesStore = firstRecord.getPhonesStore();
if (phonesStore) {
var columns = [{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name',
editor: {
xtype: 'textfield',
hideTrigger: true
}
}];
phonesStore.each(function(phoneRec) {
columns.push({
xtype: 'gridcolumn',
text: phoneRec.get('type'),
renderer: this.phoneRenderer,
editor: {
xtype: 'numberfield',
hideTrigger: true
}
});
}, this);
this.columns = columns;
}
}
}
this.callParent();
},
phoneRenderer: function(value, metaData, record, rowIndex, colIndex) {
return record.getPhonesStore().getAt(colIndex - 1).get('phone');
}
});
Ext.create('MyView', {
renderTo: Ext.getBody()
});
}
});
总的来说,我有3列... Name
, Home
和Cell
。 现在您可能在想,为什么我不只是拥有一个Cell和Home对象而不是phones
数组...好吧,这不是我想要做的事情,因为我不认为这是如何正确构造此对象的方法数据。 无论如何,我在初始化网格时会创建这两个额外的列。
问题出在我为“首页”和“单元格”列设置的编辑器中……因为我使用的是嵌套数据,并且没有正确的dataIndex,所以当编辑器呈现时,它的空值编辑。 因此,我想到尝试利用beforeedit事件,就可以获取我的值,但是不幸的是,它看起来像我无法设置编辑器的值,因为我假设startEdit方法存在一些麻烦。
您会看到,当您单击一行时,它会提醒我要在其编辑器中设置的Home和Cell值,但是对编辑器使用setValue无效...没有人对如何获取有任何见解。这去了吗?
单击行时,可以使用setEditor方法(在列上)解决此问题:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.define('Phone', {
extend: 'Ext.data.Model',
fields: [
{name: 'phone', type: 'int'},
{name: 'type', type: 'string'}
]
});
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'}
],
hasMany: [
{associationKey: 'phones', model: 'Phone', name: 'getPhonesStore'}
]
});
var beforeEdit = function(editor, context, eOpts) {
var grid = context.grid;
var record = context.record;
if (grid && record) {
var phonesStore = record.getPhonesStore();
var columns = grid.getView().getGridColumns();
if (columns && phonesStore) {
for (var i = 1; i < columns.length; i++) {
var column = columns[i];
if (column) {
column.setEditor({
xtype: 'numberfield',
hideTrigger: true,
value: phonesStore.getAt(i - 1).get('phone')
});
}
}
}
}
};
Ext.define('MyView', {
extend: 'Ext.grid.Panel',
store: Ext.create('Ext.data.Store', {
model: 'Person',
proxy: {
type: 'memory'
},
data: [
{name: 'blah', phones: [{phone: 123456789, type: 'Home'}, {phone: 9999999999, type: 'Cell'}]},
{name: 'bleh', phones: [{phone: 222222222, type: 'Home'}, {phone: 1111111111, type: 'Cell'}]}
]
}),
plugins: [
{ptype: 'rowediting', clicksToEdit: 1, listeners: {beforeedit: beforeEdit}}
],
height: 300,
width: 400,
initComponent: function() {
var store = this.getStore();
if (store) {
var firstRecord = store.first();
if (firstRecord) {
var phonesStore = firstRecord.getPhonesStore();
if (phonesStore) {
var columns = [{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
}];
phonesStore.each(function(phoneRec) {
columns.push({
xtype: 'gridcolumn',
text: phoneRec.get('type'),
renderer: this.phoneRenderer
});
}, this);
this.columns = columns;
}
}
}
this.callParent();
},
phoneRenderer: function(value, metaData, record, rowIndex, colIndex) {
return record.getPhonesStore().getAt(colIndex - 1).get('phone');
}
});
Ext.create('MyView', {
renderTo: Ext.getBody()
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.