在网格中动态更改类型

问题描述

我有一些存储，这是形成的数据.在面板上，它看起来如何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

这篇关于在网格中动态更改类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！