问题
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.
Here is 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 grid
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'.
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?
回答1:
This is definitely an interesting problem statement to solve with ExtJS!!
I did managed to get solved with some modifications to the ExtJS 6.6.0 Editable Plugin api.
Here is working poc code for same:
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)
});
}
}
}]
}]
})
}
});
Link to working fiddle with ExtJS 6.6.0: https://fiddle.sencha.com/#view/editor&fiddle/2nig
来源：https://stackoverflow.com/questions/53004507/dynamacly-changing-type-in-grid