adding new button "Save and Next" apart from Update and Cancel given in the editable grid of extjs

Question

Please help. I am using extjs. Currently my editable grid has two buttons ("Update" and "Cancel") I need to add new button "Save and Next" (Saves the current row and makes next row editable) in the editable grid. Can someone please help me achieve this.

Answer 1

If you share your code then i can give best answer to you. I have written code for editing row when click on button (that is in grid as a actioncolumn). You can write code for saving data where you want before editing code.

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

I have updated my previous code to make it as you want. Now there is one button on top bar of grid. When you click on it, it will save your current row and next row will be editable. Now it's working correctly as you want. Still if you get any problem, then share with me, i will solve it out.

  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

if you don't mind to get your hands dirty and override ExtJS code of the RowEditorButtons. look at the constructor and use Ext.define with override to add another button.

Here is a working example:

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: 'lisa@simpsons.com', phone: '555-111-1224' },
            { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
            { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
            { name: 'Marge', email: 'marge@simpsons.com', 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()
});