ExtJs中的属性网格 [英] Property Grid in ExtJs
本文介绍了ExtJs中的属性网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些商店，这是形成数据。在面板上，它查看fieldName和文本字段（来自调用表单的依赖）。例如，在一个表单上显示名称文档和字段，在另一个表单上显示：销售日期和日期字段。数据是动态形成的
I have some store, which is formed data. On panel it looks how "fieldName" and text field (in depension from invoked form). For example, on one form is displayed "name document" and field, on another: date of selling and date field. Data is formed dynamicly
这是商店：
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);
}
}
});
此代码使用了表单，但我需要使用Property Grid。我知道，如何显示字段名称（文档名称等），但我不明白，如何显示文本字段等。对于表单我使用过doLayout。我怎么能这样做？
This code had worked with form, but I need to use Property Grid. I know, how displayed field name ("document name" and etc.), but I don't understand, how displayed text field or etc. For form I had used doLayout. How can I do this?
我尝试使用customEditors，但他不使用商店！
I tryed used customEditors, but he don't work with store!
这是Grid：
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)
});
}
}
]
});
但是表格是空的，我做错了什么？！
But table is empty, what i doing wrong?!
推荐答案
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：目前还不完全清楚你想要实现的目标，考虑详细说明一下更多关于您的描述中的用例。
这篇关于ExtJs中的属性网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
