在网格中动态更改类型 [英] Dynamacly Changing type in 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 可编辑插件 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
这篇关于在网格中动态更改类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
