扩展rowediting插件以在extjs中显示更多按钮

时间:2014-05-06 23:32:12

标签: javascript extjs roweditor

// Custom RowEditor to have more buttons while rowediting
Ext.define('App.view.roweditor.TransactionRowEditor', {
    extend: 'Ext.grid.RowEditor',

    initComponent: function () {
        this.callParent(arguments);
    },
    getFloatingButtons: function () {
        var me = this,
            cssPrefix = Ext.baseCSSPrefix,
            btnsCss = cssPrefix + 'grid-row-editor-buttons',
            plugin = me.editingPlugin,
            minWidth = Ext.panel.Panel.prototype.minButtonWidth,
            btns;

        if (!me.floatingButtons) {
            btns = me.floatingButtons = new Ext.Container({
                editor: me,
                renderTpl: [
                    '<div class="{baseCls}-ml"></div>',
                    '<div class="{baseCls}-mr"></div>',
                    '<div class="{baseCls}-bl"></div>',
                    '<div class="{baseCls}-br"></div>',
                    //I had to add the style width for the buttons to show up
                    '<div class="{baseCls}-bc" style="width:450px"></div>',
                    '{%this.renderContainer(out,values)%}'
                ],
                renderTo: me.body,
                baseCls: btnsCss,
                layout: {
                    type: 'hbox',
                    align: 'middle'
                },
                defaults: {
                    flex: 1,
                    margins: '0 1 0 1'
                },
                items: [{ //**I added my buttons here**//
                    xtype: 'button',
                    text: "Close",
                    handler: this.close,
                    scope: me,
                    tooltip: 'Close'
                }, {
                    xtype: 'button',
                    handler: plugin.cancelEdit,
                    scope: plugin,
                    text: me.cancelBtnText,
                    minWidth: minWidth,
                    tooltip: 'Cancel changes'
                }, {
                    xtype: 'button',
                    text: "MoreInfo",
                    handler: this.moreinfo,
                    scope: me,
                    tooltip: 'Click for more information'
                }, {
                    itemId: 'update',
                    xtype: 'button',
                    handler: plugin.completeEdit,
                    scope: plugin,
                    text: 'Save',
                    minWidth: minWidth,
                    disabled: me.updateButtonDisabled,
                    tooltip: 'Save Transaction'
                }]
            });
        }
        return me.floatingButtons;
    },
    close: function () {

    },
    moreinfo: function () {

    }
});

这是我用来添加更多按钮的rowediting插件。但是,按钮的渲染发生在我的容器的开头,并且该行不可编辑。你可以建议我可以在我开始编辑的那一行工作吗?

更新

我根据@JanS

的建议扩展了RowEditorButtons
Ext.grid.RowEditorButtons.override({
    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
            },
            items: [{
                cls: 'mybutton',
                text: 'Cancel Transaction',
                iconCls: 'fa fa-minus-circle fa-lg',
                handler: function(editor, context, eOpts) {
                    console.log("stuff to do");
                }
            }, {
                cls: 'mycancel',
                iconCls: 'fa fa-times fa-lg',
                handler: plugin.cancelEdit,
                text: 'Cancel Changes'
            }, {
                cls: 'myupdate',
                iconCls: 'fa fa-save fa-lg',
                itemId: 'update',
                handler: plugin.completeEdit,
                text: 'Save Changes',
                disabled: rowEditor.updateButtonDisabled
            }]
        }, config);

        Ext.grid.RowEditorButtons.superclass.constructor.call(this, config);

        me.addClsWithUI(me.position);
    }
});

我已经读到它覆盖了整个项目。如果我只想要当前页面和另一个页面我想要不同的按钮组怎么办?

0 个答案:

没有答案