ExtJS:how to make rowediting plugin's button always below the row

Question

i'm using extJS 6.2 classic i got a grid with rowediting plugin,when start to edit row,the button generated by rowediting is above the row. my screenshot i thought the reason is the grid is not high enough to bold the buttons,but set the grid height not solve the problem. below is my code:

xtype:'grid',
height:500,
...
plugins: [
    {
        ptype: 'rowediting',
        errorSummary:false,
        removeUnmodified:false,
        triggerEvent:'non'
    }
],

any help would be appreciated.

Ronak Patel Ronak Patel · Accepted Answer · 2017-05-22T11:17:06

It is an existing bug of ExtJS and can be also found on ExtJS Row Editing example. There is one workaround for that but it is not a solution.

You can override Ext.grid.RowEditorButtons class of ExtJS which is used for generating buttons for rowediting.

Ext.override(Ext.grid.RowEditorButtons, {
    constructor: function(config) {

        var me = this,
            rowEditor = config.rowEditor,
            cssPrefix = Ext.baseCSSPrefix,
            plugin = rowEditor.editingPlugin;

        config = Ext.apply({
            baseCls: cssPrefix + 'grid-row-editor-buttons',
            defaults: {
                xtype: 'button',
                ui: rowEditor.buttonUI,
                scope: plugin,
                flex: 1,
                minWidth: Ext.panel.Panel.prototype.minButtonWidth,
                height: 18,
                style: 'padding: 0'
            },
            items: [{
                cls: cssPrefix + 'row-editor-update-button',
                itemId: 'update',
                handler: plugin.completeEdit,
                text: rowEditor.saveBtnText,
                disabled: rowEditor.updateButtonDisabled,
                listeners: {
                    element: 'el',
                    keydown: me.onUpdateKeyDown,
                    scope: me
                }
            }, {
                cls: cssPrefix + 'row-editor-cancel-button',
                itemId: 'cancel',
                handler: plugin.cancelEdit,
                text: rowEditor.cancelBtnText,
                listeners: {
                    element: 'el',
                    keydown: me.onCancelKeyDown,
                    scope: me
                }
            }]
        }, config);

        me.callParent([config]);

        me.addClsWithUI(me.position);

    }
});

Please refer this link.

ExtJS:how to make rowediting plugin's button always below the row

1 Answers