Dynamacly在Grid中更改类型 [英] Dynamacly Changing type in Grid
本文介绍了Dynamacly在Grid中更改类型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些商店，这是形成数据。在面板上，它查看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 dynamically.
这是商店：
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 templateGrids = new Ext.grid.EditorGridPanel({
id: 'tableId',
height: 300,
width: '100%',
clicksToEdit: 1,
frame: true,
store: tableTempStore,
columns: [{
header: 'Поле',
id: 'name',
width: 200
}, {
header: 'Значения',
id: 'val',
dataIndex: 'Value',
width: 300,
editor: colm,
edit: function(colm, record) {
if (record.get('Type') == 2) {
return colm = {
xtype: 'textfield'
};
} else if (record.get('Type') == 3) {
return colm = {
xtype: 'datefield'
};
} else if (record.get('Type') == 4) {
return colm = {
xtype: 'combo'
};
}
}
}]
});
单元格类型可以根据类型的值显示在网格中。
Type of cell may be displayed in a grid in dependence from value of 'Type'.
例如，如果 Type == 2 ，列的编辑必须是 textvalue 等等。但我的听众没有工作，类型没有变化。
For example if Type == 2, editor of column must be textvalue and etc. But my listener is not working and type is not changing.
请帮我理解我做错了什么？
Please help me to understand what wrong am I doing?
推荐答案
这绝对是一个有趣的问题陈述，需要用ExtJS来解决!!
This is definitely an interesting problem statement to solve with ExtJS!!
我确实设法通过对ExtJS 6.6.0 Editable Plugin api的一些修改来解决。
I did managed to get solved with some modifications to the ExtJS 6.6.0 Editable Plugin api.
以下是相同的poc代码：
Ext.application({
name: 'Fiddle',
launch: function () {
//Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');
var someStore = new Ext.data.JsonStore({
storeId: 'myStore',
data: [{
Type: 2,
Value: 'Value 1'
}, {
Type: 3,
Value: 'Passowrd field value'
}, {
Type: 4,
Value: 'smaple@gmail.com'
}],
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'
}]
});
Ext.Viewport.add({
xtype: 'panel',
title: 'Dynamic editor',
items: [{
xtype: 'grid',
id: 'tableId',
plugins: {
type: 'grideditable',
'$configStrict': false,
onTrigger: function (grid, location) {
var me = this,
record = location.record,
formConfig = me.getFormConfig(),
toolbarConfig = me.getToolbarConfig(),
fields, form, sheet, toolbar;
if (!record || !location.row) {
return;
}
if (formConfig) {
me.form = form = Ext.factory(formConfig, Ext.form.Panel);
} else {
me.form = form = Ext.factory(me.getDefaultFormConfig());
form.setRecord(record); /// This is added to original code
fields = me.getEditorFields(grid.getColumns());
form.down('fieldset').setItems(fields);
form.clearFields = true;
}
toolbar = Ext.factory(toolbarConfig, Ext.form.TitleBar);
me.submitButton = toolbar.down('button[action=submit]');
toolbar.down('button[action=cancel]').on('tap', 'onCancelTap', me);
me.submitButton.on('tap', 'onSubmitTap', me);
form.on({
change: 'onFieldChange',
delegate: 'field',
scope: me
});
form.setRecord(record);
me.sheet = sheet = grid.add({
xtype: 'sheet',
items: [
toolbar,
form
],
hideOnMaskTap: true,
enter: 'right',
exit: 'right',
right: 0,
width: 320,
layout: 'fit',
stretchY: true,
hidden: true
});
if (me.getEnableDeleteButton()) {
form.add({
xtype: 'button',
text: 'Delete',
ui: 'decline',
margin: 10,
handler: function () {
grid.getStore().remove(record);
sheet.hide();
}
});
}
sheet.on('hide', 'onSheetHide', me);
sheet.show();
},
getEditorFields: function (columns) {
console.log('hhhhh')
var fields = [],
ln = columns.length,
map = {},
i, column, editor, editable, cfg;
for (i = 0; i < ln; i++) {
column = columns[i];
editable = column.getEditable();
editor = editable !== false && column.getEditor();
console.log(column);
if (!editor && editable) {
cfg = column.getDefaultEditor();
editor = Ext.create(cfg);
column.setEditor(editor);
}
if (editor) {
if (map[column.getDataIndex()]) {
Ext.raise('An editable column with the same dataIndex "' + column.getDataIndex() + '" already exists.');
}
map[column.getDataIndex()] = true;
if (editor.isEditor) {
editor = editor.getField();
}
editor.setLabel(column.getText());
editor.setName(column.getDataIndex());
fields.push(editor);
}
}
return fields;
},
},
height: 300,
width: '100%',
clicksToEdit: 1,
frame: true,
store: someStore,
columns: [{
header: 'Поле',
id: 'name',
width: 200
}, {
header: 'Значения',
id: 'val',
dataIndex: 'Value',
width: 300,
editable: true,
'$configStrict': false,
getEditor: function () {
var editablePlugin = Ext.getCmp('tableId').findPlugin('grideditable');
var record = editablePlugin.form.getRecord();
console.log(record);
console.log(editablePlugin);
var args = {
value: record.get('Value')
}; //Additional arguments you might want to pass
if (record.get('Type') === 2) {
console.log('rendering text field')
return new Ext.grid.CellEditor({
field: Ext.create('Ext.field.Text', args)
});
} else if (record.get('Type') === 3) {
console.log('rendering password field')
return new Ext.grid.CellEditor({
field: Ext.create('Ext.field.Password', args)
});
} else {
console.log('rendering email field')
return new Ext.grid.CellEditor({
field: Ext.create('Ext.field.Email', args)
});
}
}
}]
}]
})
}
});
链接到工作小提琴ExtJS 6.6.0： https://fiddle.sencha.com/#view/editor&fiddle/2nig
这篇关于Dynamacly在Grid中更改类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
