我有一些商店，它是数据。在面板上，它看起来如何“ fieldName”和文本字段（与调用的形式有所不同）。例如，在一种形式上显示“名称文档”和字段，在另一种形式上显示：销售日期和日期字段。数据是动态形成的
这是商店：
tableTempStore = new Ext.data.JsonStore({
url: objectUrlAddress,
baseParams: {
'objectID': objectID
},
root: 'Fields',
fields: [{
name: 'Type',
type: 'int'
}, {
name: 'Value'
}, {
name: 'IsRequired',
type: 'bool'
}, {
name: 'Identifier'
}, {
name: 'Data'
}],
listeners: {
load: function(obj, records) {
Ext.each(records, function(rec) {
var item = null;
switch (rec.get('Type')) {
case 0: // int
item = new Ext.form.NumberField();
item.id = rec.get('Identifier');
item.fieldLabel = rec.get('Hint');
var isRequired = rec.get('IsRequired');
item.anchor = '100%';
item.allowBlank = ! isRequired;
item.disabled = editDisabled;
item.value = rec.get('Data');
break;
case 1: // demical
item = new Ext.form.NumberField();
item.id = rec.get('Identifier');
item.fieldLabel = rec.get('Hint');
var isRequired = rec.get('IsRequired');
item.anchor = '100%';
item.allowBlank = ! isRequired;
item.allowDecimals = true;
item.disabled = editDisabled;
item.value = rec.get('Data');
break;
case 2: // text
item = new Ext.form.TextField();
item.id = rec.get('Identifier');
item.fieldLabel = rec.get('Hint');
item.anchor = '100%';
var isRequired = rec.get('IsRequired');
item.allowBlank = ! isRequired;
item.value = rec.get('Data');
if (item.id == 'DocumentName') {
if (optype == "create") {
item.disabled = false;
} else {
item.disabled = true;
}
} else {
item.disabled = editDisabled;
}
break;
case 3: // date
var isRequired = rec.get('IsRequired');
item = new Ext.form.DateField();
item.id = rec.get('Identifier');
item.format = 'd.m.y H:i';
item.allowBlank = ! isRequired;
item.value = rec.get('Data');
item.emptyText = 'дд.мм.гггг чч:мм';
item.fieldLabel = rec.get('Hint');
item.disabled = editDisabled;
item.anchor = '100%';
break;
case 4: // enum
var dataValues = Ext.util.JSON.decode(rec.get('EnumList'));
var dataArray = Object.keys(dataValues).map(function(k) { return [k, dataValues[k]] });
item = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
forceSelection:true,
editable: false,
hiddenName: rec.get('Identifier'),
mode: 'local',
store: new Ext.data.ArrayStore({
fields: [
{name: 'myId', type: 'string'},
{name: 'displayText'}
],
data: dataArray
}),
valueField: 'myId',
displayField: 'displayText',
disabled: editDisabled
});
item.id = '_' + rec.get('Identifier');
item.anchor = '100%';
item.fieldLabel = rec.get('Hint');
var isRequired = rec.get('IsRequired');
item.allowBlank = ! isRequired;
item.value = rec.get('Data');
break;
case 5: // SQL
var dataValues = Ext.util.JSON.decode(rec.get('EnumList'));
var dataArray = Object.keys(dataValues).map(function(k) { return [k, dataValues[k]] });
item = new Ext.form.ComboBox({
typeAhead: true,
width: '100%',
triggerAction: 'all',
forceSelection:true,
editable: false,
hiddenName: rec.get('Identifier'),
mode: 'local',
store: new Ext.data.ArrayStore({
fields: [
{name: 'myId', type: 'string'},
{name: 'displayText'}
],
data: dataArray
}),
valueField: 'myId',
displayField: 'displayText',
disabled: editDisabled
});
item.id = '_' + rec.get('Identifier');
item.anchor = '100%';
item.fieldLabel = rec.get('Hint');
var isRequired = rec.get('IsRequired');
item.allowBlank = ! isRequired;
item.value = rec.get('Data');
break;
}
if (item != null) {
grid.add(item);
tableValue = Ext.getCmp('propGrid').doLayout();
source[item.fieldLabel] = tableValue;
//grid.doLayout();
}
});
grid.setSource(source);
}
}
});
此代码已与表单一起使用，但我需要使用属性网格。我知道如何显示字段名称（“文档名称”等），但是我不明白如何显示文本字段等。对于表单，我使用过doLayout。我该怎么办？
我尝试使用customEditors，但他不能与商店合作！
这是网格：
grid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
id: 'propGrid',
autoFill: true,
autoHeight: true,
width: 600
});
请帮帮我！
更新
这里正在更新商店：
someStore = new Ext.data.JsonStore({
storeId: 'myStore',
url: objectUrlAddress,
baseParams: {
'objectID' : objectID
},
root: 'Fields',
fields: [
{name: 'Hint'},
{name:'Type', type: 'int'},
{name: 'Value'},
{name: 'Index', type: 'int'},
{name: 'IsRequired', type:'bool'},
{name: 'Identifier'},
{name: 'EnumList'},
{name: 'Directory'},
{name: 'Data'}
]});
这里正在更新网格：
var mainGrid = new Ext.grid.EditorGridPanel({
id: 'tableId',
height:300,
width: '100%',
clicksToEdit:1,
frame: true,
store: someStore,
columns:
[
{header: 'Объект'},
{header: 'Значение', dataIndex: 'Value', editor: {xtype: 'textfield'},
getEditor: function(record) {
var xtype = null,
args = {
fieldLabel: record.get('Hint'),
allowBlank: !record.get('IsRequired'),
value: record.get('Data'),
disabled: false
};
switch (record.get('Type')) {
case 0: // int
xtype = 'Ext.form.field.Number';
args.allowDecimals = false;
break;
case 1: // decimal
xtype = 'Ext.form.field.Number';
args.allowDecimals = true;
break;
case 2: // text
xtype = 'Ext.form.field.Text';
break;
case 3: // date
xtype = 'Ext.form.field.Date';
args.emptyText = 'дд.мм.гггг чч:мм';
args.format = 'd.m.y H:i';
break;
case 4: // enum
case 5: // sql
var dataValues = Ext.util.JSON.decode(record.get('EnumList'));
var dataArray = Object.keys(dataValues).map(function(k) { return [k, dataValues[k]] });
xtype = 'Ext.form.field.ComboBox ';
args.store = new Ext.data.ArrayStore({
fields: [
{name: 'myId', type: 'string'},
{name: 'displayText'}
],
data: dataArray
});
break;
}
return new Ext.grid.CellEditor({
field: Ext.create(xtype, args)
});
}
}
]
});
但是表是空的，我在做什么错？！
答案 0 :(得分：0)
请参阅this fiddle
中的部分实现的解决方案Ext.create('Ext.data.Store', {
storeId: 'myStore',
fields:[ 'Type', 'Value', 'IsRequired', 'Identifier', 'Data'],
data: [
{
"Type": 0,
"IsRequired": false,
"Identifier": "id-1",
"Data": 1001
},
{
"Type": 0,
"IsRequired": true,
"Identifier": "id-2",
"Data": 2002
},
{
"Type": 1,
"IsRequired": true,
"Identifier": "id-3",
"Data": 0.71
},
{
"Type": 3,
"IsRequired": true,
"Identifier": "id-4",
"Data": "24.10.18 00:00"
}
]
});
Ext.create({
title: 'Properties Grid',
xtype: 'grid',
renderTo: Ext.getBody(),
height: 400,
width: 600,
plugins: ['cellediting'],
store: Ext.data.StoreManager.lookup('myStore'),
selModel: 'cellmodel',
columns: [
{ text: 'Identifier', dataIndex: 'Identifier' },
{
text: 'Data',
dataIndex: 'Data',
editor: {
xtype: 'textfield' // will default to this
},
getEditor: function(record) {
var xtype = null,
args = {
fieldLabel: record.get('Hint'),
allowBlank: !record.get('IsRequired'),
value: record.get('Data'),
disabled: false
};
console.log({
type: record.get('Type')
});
switch (record.get('Type')) {
case 0: // int
xtype = 'Ext.form.field.Number';
args.allowDecimals = false;
break;
case 1: // decimal
xtype = 'Ext.form.field.Number';
args.allowDecimals = true;
break;
case 2: // text
xtype = 'Ext.form.field.Text';
break;
case 3: // date
xtype = 'Ext.form.field.Date';
args.emptyText = 'дд.мм.гггг чч:мм';
args.format = 'd.m.y H:i';
break;
case 4: // enum
case 5: // sql
var dataValues = Ext.util.JSON.decode(record.get('EnumList'));
var dataArray = Object.keys(dataValues).map(function(k) { return [k, dataValues[k]] });
xtype = 'Ext.form.field.ComboBox ';
args.store = new Ext.data.ArrayStore({
fields: [
{name: 'myId', type: 'string'},
{name: 'displayText'}
],
data: dataArray
});
break;
}
if (!xtype) {
return false;
}
return Ext.create('Ext.grid.CellEditor', {
field: Ext.create(xtype, args)
});
}
}
]
});
PS：目前尚不清楚要实现的目标，请考虑在描述中对用例进行详细说明。