ExtJS:如何使rowediting插件的按钮始终位于行下方

时间:2017-05-22 10:44:41

标签: extjs grid

我正在使用extJS 6.2 classic 我有一个带有rowediting插件的网格,当开始编辑行时,由rowediting生成的按钮在行上方。 my screenshot 我认为原因是网格不够高,不能加粗按钮,但设置网格高度不能解决问题。 下面是我的代码:

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

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

这是ExtJS的现有错误,也可以在ExtJS Row Editing示例中找到。有一种解决方法,但它不是解决方案。

您可以覆盖用于生成用于划船的按钮的Ext.grid.RowEditorButtons类ExtJS。

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

    }
});

请参阅此link