添加新按钮 "Save and Next" extjs 的可编辑网格中给出的更新和取消之外

Question

请帮忙。我正在使用extjs。目前我的可编辑网格有两个按钮（"更新"和"取消"），我需要在可编辑网格中添加新按钮"保存并下一步"（保存当前行并使下一行可编辑）。有人可以帮我实现这一目标吗？

Answer 1

如果你分享你的代码，那么我可以给你最好的答案。我已经编写了用于在单击按钮时编辑行的代码（即在网格中作为操作列）。在编辑代码之前，可以编写用于将数据保存在所需位置的代码。

Ext.application({
name: 'Fiddle',
launch: function() {
    var studentStore = Ext.create('Ext.data.Store', {
        autoLoad: 'false',
        fields: [
            {name: 'studentId'},
            {name: 'name'},
            {name: 'age'}
        ],
        data:[
            {'studentId': 1, 'name': 'Puneet', 'age': 25}
        ]
    });
     cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToMoveEditor: 1,
    autoCancel: false
});

        Ext.create('Ext.window.Window', {
        title: 'Row Editing Grid',
        height: 400,
        width: 400,
        items: [{
            xtype: 'grid',
            height: 400,
            store:studentStore,
            plugins: [cellEditing],
            columns:[
                {
                    xtype: 'actioncolumn',
                    items:[
                        {
                            text:'Add New Row',
                            tooltip: 'Add Row',
                            icon: 'add.png',
                            handler: function(grid, rowIndex, colIndex){
                                grid.store.add({});
                                var rowIndex = grid.store.data.items.length - 1;
                                cellEditing.startEdit(rowIndex,1);
                            }
                        }
                    ]
                },
                {
                    header: 'StudentId',
                    dataIndex: 'studentId',
                    editor:{
                        xtype: 'textfield'
                    }
                },
                {
                    header: 'Name',
                    dataIndex: 'name',
                    editor:{
                        xtype: 'textfield'
                    }
                },
                {
                    header: 'Age',
                    dataIndex: 'age',
                    editor:{
                        xtype: 'textfield'
                    }
                }
            ]
        }]
    }).show();
}
});

Answer 2

我已经更新了我以前的代码，使其符合您的要求。现在网格顶部栏上有一个按钮。当您单击它时，它将保存您的当前行，下一行将是可编辑的。现在它正在按照您的要求正常工作。不过，如果你有任何问题，那就和我分享，我会解决的。

  Ext.application({
  name: 'Fiddle',
  launch: function() {
var studentStore = Ext.create('Ext.data.Store', {
    autoLoad: 'false',
    fields: [
        {name: 'studentId'},
        {name: 'name'},
        {name: 'age'}
    ],
    data:[
        {'studentId': 1, 'name': 'Puneet', 'age': 25}
    ]
});
 cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});
    Ext.create('Ext.window.Window', {
    title: 'Row Editing Grid',
    height: 400,
    width: 400,
    items: [{
        xtype: 'grid',
        id: 'rowEditingGrid',
        height: 400,
        store:studentStore,
        plugins: [cellEditing],
        tbar: [{
        text: 'Save',
        iconCls: 'employee-add',
            handler: function(){
                var grid = Ext.getCmp('rowEditingGrid');
                grid.store.add({});
                var rowIndex = grid.store.data.items.length - 1;
                cellEditing.startEdit(rowIndex,0);
            }
        }],
        columns:[
            {
                header: 'StudentId',
                dataIndex: 'studentId',
                editor:{
                    xtype: 'textfield'
                }
            },
            {
                header: 'Name',
                dataIndex: 'name',
                editor:{
                    xtype: 'textfield'
                }
            },
            {
                header: 'Age',
                dataIndex: 'age',
                editor:{
                    xtype: 'textfield'
                }
            }
        ]
    }]
}).show();
}});

Answer 3

如果你不介意弄脏你的手并覆盖RowEditorButtons的ExtJS代码。 查看构造函数并使用带有覆盖的 Ext.define 添加另一个按钮。

这是一个工作示例：

Ext.define('CompanyName.grid.RowEditorButtons', {
    override: 'Ext.grid.RowEditorButtons',
    constructor: function(config) {
        var me = this,
            rowEditor = config.rowEditor,
            editPlugin = rowEditor.editingPlugin;
        me.callParent(arguments);
        if(editPlugin.saveAndNextBtn){
            me.insert(0,{
                cls: Ext.baseCSSPrefix + 'row-editor-update-button',
                itemId: 'next',
                handler: editPlugin.saveAndNext,
                text: 'Save and next',
                disabled: rowEditor.updateButtonDisabled
            });
        }        
    }
});
Ext.define('CompanyName.grid.plugin.RowEditing', {
    override: 'Ext.grid.plugin.RowEditing',
    saveAndNext: function(button){
        var ctx = this.context,
            nextIdx = ctx.rowIdx + 1,
            nextRec = ctx.store.getAt(nextIdx);
        this.completeEdit();
        this.startEdit(nextRec);
    }
});
Ext.create('Ext.grid.Panel', {
    store: {
        fields:[ 'name', 'email', 'phone'],
        data: [
            { name: 'Lisa', email: '[e-mail]', phone: '555-111-1224' },
            { name: 'Bart', email: '[e-mail]', phone: '555-222-1234' },
            { name: 'Homer', email: '[e-mail]', phone: '555-222-1244' },
            { name: 'Marge', email: '[e-mail]', phone: '555-222-1254' }
        ]
    },
    columns: [
        {header: 'Name', dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    plugins: {
        ptype: 'rowediting',
        clicksToEdit: 1,
        saveAndNextBtn: true // enable it here
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});