如何获取 Extjs Grid 中单元格字段的句柄
How to get handle to a cell field in Extjs Grid
网格的数据如下所示:
data: [{
field1: abc
field2: [
{value: 0, label: Blue},
{value: 1, label: Green}
]
},
{
field1: def
field2: [
{value: 0, label: Red},
{value: 1, label: Pink}
]
}]
网格组件配置类似于:
{
xtype: 'grid',
....
columns: [
{
dataIndex: field1
},
{
dataIndex: field2
editor: {
xtype: combobox,
displayField: label,
valueField: value,
store: new someSampleStore();
}
}
]
}
现在,网格的第 2 列有一个组合框。
对于Grid的第0行,第1列;组合框下拉菜单应显示以下选项:蓝色、绿色
对于 Grid 的第 1 行,第 1 列;组合框下拉菜单应显示这些选项:红色、粉色
我是否需要手动将数据加载到每个组合框(每行)中,或者有什么方法可以在列定义中指定配置,以便组合框为 'field2' 提取数据?
看看下面的代码。本质上它会做你想做的,但只有在第一次点击后才有效。我会让你弄明白的。 ;-)
演示:https://fiddle.sencha.com/#fiddle/gec
Ext.application({
name: 'Fiddle',
launch: function() {
var comboStore = Ext.create('Ext.data.Store', {
fields: ['value', 'label'],
data: [{
name: '',
value: ''
}],
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott",
seniority: 7,
dep: "Management",
hired: "01/10/2004",
comboData: [{
label: 'Test1',
value: 'testval1'
}, {
label: 'Test2',
value: 'testval2'
}, {
label: 'Test3',
value: 'testval3'
}]
}, {
firstname: "Dwight",
lastname: "Schrute",
seniority: 2,
dep: "Sales",
hired: "04/01/2004",
comboData: [{
label: 'Dwight1',
value: 'testval1'
}, {
label: 'Dwight2',
value: 'testval2'
}, {
label: 'Dwight3',
value: 'testval3'
}]
}, {
firstname: "Jim",
lastname: "Halpert",
seniority: 3,
dep: "Sales",
hired: "02/22/2006",
comboData: [{
label: 'Jim1',
value: 'testval1'
}, {
label: 'Jim2',
value: 'testval2'
}, {
label: 'Jim3',
value: 'testval3'
}]
}, {
firstname: "Kevin",
lastname: "Malone",
seniority: 4,
dep: "Accounting",
hired: "06/10/2007",
comboData: [{
label: 'Kevin1',
value: 'testval1'
}, {
label: 'Kevin2',
value: 'testval2'
}, {
label: 'Kevin3',
value: 'testval3'
}]
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname',
editor: {
xtype: 'combobox',
displayField: 'label',
valueField: 'value',
store: comboStore,
fields: ['value', 'label']
}
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
text: 'Hired Month',
dataIndex: 'hired',
xtype: 'datecolumn',
format: 'M'
}, {
text: 'Department (Yrs)',
xtype: 'templatecolumn',
tpl: '{dep} ({seniority})'
}],
selType: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, context, eOpts) {
testData = context.record.data.comboData;
comboStore.setData(testData);
}
}
},
width: 400,
forceFit: true,
renderTo: Ext.getBody()
});
}
});
网格的数据如下所示:
data: [{
field1: abc
field2: [
{value: 0, label: Blue},
{value: 1, label: Green}
]
},
{
field1: def
field2: [
{value: 0, label: Red},
{value: 1, label: Pink}
]
}]
网格组件配置类似于:
{
xtype: 'grid',
....
columns: [
{
dataIndex: field1
},
{
dataIndex: field2
editor: {
xtype: combobox,
displayField: label,
valueField: value,
store: new someSampleStore();
}
}
]
}
现在,网格的第 2 列有一个组合框。 对于Grid的第0行,第1列;组合框下拉菜单应显示以下选项:蓝色、绿色 对于 Grid 的第 1 行,第 1 列;组合框下拉菜单应显示这些选项:红色、粉色
我是否需要手动将数据加载到每个组合框(每行)中,或者有什么方法可以在列定义中指定配置,以便组合框为 'field2' 提取数据?
看看下面的代码。本质上它会做你想做的,但只有在第一次点击后才有效。我会让你弄明白的。 ;-)
演示:https://fiddle.sencha.com/#fiddle/gec
Ext.application({
name: 'Fiddle',
launch: function() {
var comboStore = Ext.create('Ext.data.Store', {
fields: ['value', 'label'],
data: [{
name: '',
value: ''
}],
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott",
seniority: 7,
dep: "Management",
hired: "01/10/2004",
comboData: [{
label: 'Test1',
value: 'testval1'
}, {
label: 'Test2',
value: 'testval2'
}, {
label: 'Test3',
value: 'testval3'
}]
}, {
firstname: "Dwight",
lastname: "Schrute",
seniority: 2,
dep: "Sales",
hired: "04/01/2004",
comboData: [{
label: 'Dwight1',
value: 'testval1'
}, {
label: 'Dwight2',
value: 'testval2'
}, {
label: 'Dwight3',
value: 'testval3'
}]
}, {
firstname: "Jim",
lastname: "Halpert",
seniority: 3,
dep: "Sales",
hired: "02/22/2006",
comboData: [{
label: 'Jim1',
value: 'testval1'
}, {
label: 'Jim2',
value: 'testval2'
}, {
label: 'Jim3',
value: 'testval3'
}]
}, {
firstname: "Kevin",
lastname: "Malone",
seniority: 4,
dep: "Accounting",
hired: "06/10/2007",
comboData: [{
label: 'Kevin1',
value: 'testval1'
}, {
label: 'Kevin2',
value: 'testval2'
}, {
label: 'Kevin3',
value: 'testval3'
}]
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname',
editor: {
xtype: 'combobox',
displayField: 'label',
valueField: 'value',
store: comboStore,
fields: ['value', 'label']
}
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
text: 'Hired Month',
dataIndex: 'hired',
xtype: 'datecolumn',
format: 'M'
}, {
text: 'Department (Yrs)',
xtype: 'templatecolumn',
tpl: '{dep} ({seniority})'
}],
selType: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, context, eOpts) {
testData = context.record.data.comboData;
comboStore.setData(testData);
}
}
},
width: 400,
forceFit: true,
renderTo: Ext.getBody()
});
}
});