Question

在extjs网格中添加可编辑行，并且同时打开以供编辑

2023-08-16

128

extjs

我正在处理一个网格，我不想创建一个弹出窗口来插入数据，所以我要在已经打开的网格中插入一行进行编辑，插入数据然后保存它们

我试过了，但它只是添加了空行。无法打开进行编辑

Grid

Ext.define('MONITORING.mapMonitor.timeManager.Grid', {
    extend: 'Ext.grid.Grid',
    xtype: 'map-monitor-time-manager-grid',
    requires: [
        'Ext.grid.plugin.PagingToolbar',
        'Ext.grid.rowedit.Plugin',
    ],
    bind: {
        store: '{schedules}',
    },
    selectable: {
        checkbox: true
    },
    plugins: {
        pagingtoolbar: true,
        rowedit: {
            id: 'rowediting',
        },
    },
    listeners: {
        edit: 'onEdit',
    },
    title: UITEXT.MAP_MONITOR_TIME_MANAGER_TITLE,
    items: [{
        xtype: 'toolbar',
        docked: 'top',
        items: [{
            xtype: 'button',
            iconCls: "x-fa fa-plus",
            text: UITEXT.BUTTON_ADD,
            handler: "addRow",
        }, '->', {
            xtype: 'textfield',
            placeholder: UITEXT.GENERAL_SEARCH,
            listeners: {
                keyup: 'onFilterNameKeyup'
            }
        }]
    }],
    columns: [{
        text: UITEXT.GENERAL_DESCRIPTION,
        dataIndex: 'descricao',
        sortable: false,
        flex: 1,
        editable: true,
        editor: {
            xtype: 'textfield',
        }
    }, {
        text: UITEXT.SETTINGS_COUPONS_START,
        dataIndex: 'hora_inicial',
        sortable: false,
        flex: 0.3,
        align: 'center',
        editable: true,
        editor: {
            xtype: 'timefield',
        }
    }, {
        text: UITEXT.MONITORING_MAIN_THE_END,
        dataIndex: 'hora_final',
        sortable: false,
        flex: 0.3,
        align: 'center',
        editable: true,
        editor: {
            xtype: 'timefield',
        }
    },{
        align: 'center',
        width: 60,
        cell: {
            tools: {
                remove: {
                    iconCls: 'x-fa fa-trash',
                    handler: 'onRemove'
                }
            }
        }
    }]
});

Controller

addRow: function () {
        const me = this;
        const grid = me.getView();
        const store = grid.getViewModel().getStore('schedules');
        const newRecord = store.insert(0, {})[0];
        grid.getPlugin('rowediting').startEdit(newRecord, 0);
        // I tried that way too
        // me.findPlugin('rowediting').startEdit(newRecord);
    },

Store

Ext.define('MONITORING.mapMonitor.timeManager.MainModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.map-monitor-time-manager',
    stores: {
        schedules: {
            model: 'MONITORING.model.mapmonitor.Openinghours',
            autoLoad: true,
            pageSize: 20,
        }
    }
});

Model

Ext.define('MONITORING.model.mapmonitor.Openinghours', {
    extend: 'MONITORING.model.Base',
    fields: [{
        name: 'id',
        type: 'integer'
    }, {
        name: 'hora_inicial',
        type: 'string',
    }, {
        name: 'hora_final',
        type: 'string',
    }, {
        name: 'descricao',
        type: 'string'
    }],
    proxy: {
        type: 'rest',
        url: `${Ext.manifest.apiUrl}/mapmonitor/hostmanagement-openinghours`,
        reader: {
            type: 'json',
            rootProperty: 'data',
        },
        writer: {
            type: 'json',
        },
    }
});

我在startEdit（）函数中收到错误

未捕获的TypeError：无法读取null的属性（读取'startEdit'）

提前致谢

开始自动编辑换行符

grid.getPlugin('rowediting').startEdit(newRowIndex, 0);

Answer 1

确保传递给 grid.getPlugin('rowedit') 的 id 与行编辑插件的实际 id 匹配。您也可以直接在此处传递记录 startEdit(newRecord, 0)。请查看以下示例代码以供参考，

Ext.application({
    name: 'MyApp',
    launch: function () {
        Ext.define('MyApp.model.UserDataModel', {
            extend: 'Ext.data.Model',
            fields: ['descricao', 'hora_inicial', 'hora_final'],
        });

        Ext.define('MyApp.view.main.viewmodel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.mainviewmodel',
            stores: {
                usersStore: {
                    model: 'MyApp.model.UserDataModel',
                    data: [{
                        descricao: "Meeting 1",
                        hora_inicial: "10:00 AM",
                        hora_final: "11:00 AM"
                    }, {
                        descricao: "Meeting 2",
                        hora_inicial: "10:00 AM",
                        hora_final: "11:00 AM"
                    }, {
                        descricao: "Meeting 3",
                        hora_inicial: "10:00 AM",
                        hora_final: "11:00 AM"
                    }],
                }
            }
        });

        Ext.define('MyApp.view.main.MainView', {
            extend: 'Ext.grid.Grid',
            xtype: 'mainview',
            viewModel: 'mainviewmodel',
            controller: 'gridcntr',
            title: 'User Data',
            requires: [
                'Ext.grid.plugin.PagingToolbar',
                'MyApp.view.main.viewmodel',
                'Ext.grid.rowedit.Plugin',
                'MyApp.model.UserDataModel'
            ],
            bind: {
                store: '{usersStore}'
            },
            selectable: {
                checkbox: true
            },
            plugins: {
                pagingtoolbar: true,
                rowedit: {
                    id: "rowediting"
                }
            },
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                items: [{
                    xtype: 'button',
                    iconCls: "x-fa fa-plus",
                    text: "Addrow",
                    handler: "addRow",
                }, '->', {
                    xtype: 'textfield',
                    placeholder: "search",
                    listeners: {
                        keyup: 'onFilterNameKeyup'
                    }
                }]
            }],
            columns: [{
                text: "DESCRIPTION",
                dataIndex: 'descricao',
                sortable: false,
                flex: 1,
                editable: true,
                editor: {
                    xtype: 'textfield',
                }
            }, {
                text: "START",
                dataIndex: 'hora_inicial',
                sortable: false,
                flex: 0.3,
                align: 'center',
                editable: true,
                editor: {
                    xtype: 'timefield',
                }
            }, {
                text: "FINAL",
                dataIndex: 'hora_final',
                sortable: false,
                flex: 0.3,
                align: 'center',
                editable: true,
                editor: {
                    xtype: 'timefield',
                }
            }, {
                align: 'center',
                width: 60,
                cell: {
                    tools: {
                        remove: {
                            iconCls: 'x-fa fa-trash',
                            handler: 'onRemove'
                        }
                    }
                }
            }]
        });

        Ext.define('GridController', {
            extend: 'Ext.app.ViewController',
            alias: 'controller.gridcntr',
            addRow: function () {
                var grid = this.getView();
                var store = grid.getStore();
                var newRow = store.add({
                    descricao: '',
                    hora_inicial: '',
                    hora_final: '',
                })[0];
                grid.getPlugin('rowediting').startEdit(newRow, 0);
            }
        });

        Ext.Viewport.add({
            xtype: 'mainview'
        });

    }
});

Answer 2

尝试通过索引访问行编辑插件，然后调用startEdit函数。 grid.plugins[1].startEdit(newRecord, 0);

Vinil Rathod

2023-09-16