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
Here is store:
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);
}
}
});
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?
I tryed used customEditors, but he don't work with store!
Here is Grid:
grid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
id: 'propGrid',
autoFill: true,
autoHeight: true,
width: 600
});
Please, help me!
UPDATING
Here's updating store:
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'}
]});
Here's updating grid:
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?!
See the partially implemented solution in 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: It is not entirely clear what you are trying to achieve, consider elaborating a bit more on the use case in your description.
来源：https://stackoverflow.com/questions/52950926/property-grid-in-extjs