Добавление новой кнопки "Сохранить и Далее" отдельно от "Обновить" и "Отмена" в редактируемой сетке extjs

Пожалуйста помоги. Я использую extjs. В настоящее время моя редактируемая сетка имеет две кнопки ("Обновить" и "Отмена"). Мне нужно добавить новую кнопку "Сохранить и затем" (сохраняет текущую строку и делает следующую строку редактируемой) в редактируемой сетке. Может кто-нибудь, пожалуйста, помогите мне достичь этого.

3 ответа

Решение

Если вы не возражаете запачкать руки и переопределить код ExtJS кнопок RowEditorButtons. посмотрите на конструктор и используйте 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: '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()
});

Если вы поделитесь своим кодом, то я могу дать вам лучший ответ. Я написал код для редактирования строки при нажатии на кнопку (которая находится в сетке как столбец действий). Вы можете написать код для сохранения данных, где вы хотите, прежде чем редактировать код.

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();
}
});

Я обновил свой предыдущий код, чтобы сделать его, как вы хотите. Теперь есть одна кнопка на верхней панели сетки. Когда вы щелкнете по нему, он сохранит вашу текущую строку, и следующая строка будет редактируемой. Теперь он работает правильно, как вы хотите. Тем не менее, если у вас возникнут проблемы, то поделитесь со мной, я их решу.

  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();
}});
Другие вопросы по тегам