Dynamacly Changing type in Grid

Question

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?

Answer 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: '[e-mail]'
            }],
            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