属性网格在 extJs 中

Question

我有一些存储，这是形成的数据。在面板上，它查看"字段名称"和文本字段(从调用形式中解脱(。例如，在一个窗体上显示"名称文档"和字段，在另一个窗体上显示：销售日期和日期字段。数据是动态形成的

这是商店：

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。我该怎么做？

我尝试使用自定义编辑器，但他不适用于商店！

这是网格：

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)
});
}
}
]
});

但是桌子是空的，我做错了什么？！

Answer 1

请参阅此小提琴中的部分实现的解决方案

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：目前还不完全清楚您要实现的目标，请考虑在描述中

详细说明用例。