Adding buttons to the roweditor

[castitas]

This post is related to a comment by castitas on the RowEditor plugin.

To add buttons to the row editor, you have to overload both the RowEditing plugin and the RowEditor. (Bonus: How to add focus events to every editable field on the roweditor) Modifications have been marked.

Ext.define('sst.util.MyRowEditor',{
    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({
                /* it is not necessary to save a reference to the editor
                     in the button panel, but I found it useful, since the 
                     editor is not its parent component */
                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:230px"></div>', 
                    '{%this.renderContainer(out,values)%}'
                ],
                width: 240,  //** you will need to change this **//
                renderTo: me.el,
                baseCls: btnsCss,
                layout: {
                    type: 'hbox',
                    align: 'middle'
                },
                defaults: {
                    flex: 1,
                    margins: '0 1 0 1'
                },
                items: [
                    {
                        itemId  : 'update',
                        xtype   : 'button',
                        handler : plugin.completeEdit,
                        scope   : plugin,
                        text    : me.saveBtnText,
                        minWidth: minWidth,
                        disabled: me.updateButtonDisabled
                    },
                    {
                        xtype   : 'button',
                        handler : plugin.cancelEdit,
                        scope   : plugin,
                        text    : me.cancelBtnText,
                        minWidth: minWidth
                    },
                    { //**I added my buttons here**//
                        xtype   : 'button',
                        text    : ">",
                        handler : this.moveValOver,
                        scope   : me,
                        maxWidth: 22,
                        tooltip : "Move over one"
                    },
                    {
                        xtype   : 'button',
                        text    : ">>",
                        handler : this.moveValToEnd,
                        scope   : me,
                        maxWidth: 22,
                        tooltip : "Move to the end"
                    }
                ]
            });
            // Prevent from bubbling click events to the grid view
            me.mon(btns.el, {
                // BrowserBug: Opera 11.01
                //   causes the view to scroll when a button is focused from mousedown
                mousedown: Ext.emptyFn,
                click: Ext.emptyFn,
                stopEvent: true
            });
        }

        //**Bonus material**//
        // add focus event to each editable field
        // create array of editable fields
            var formItems = [];
            var allFormItems = this.getForm().getFields().items;
            for (i=0; i<allFormItems.length; i++) {
                var item = allFormItems[i];
                if (item.isVisible() && item.xtype != 'displayfield') {
                    item.on('focus',this.fieldFocus,item);
                    item.on('blur',this.fieldBlur,item);
                    item.getEl().on('mousedown',function(){me.fieldClick(item);});
                    
                    var nf = document.getElementById(item.getEl().down('input').dom.id);
                    var td = Ext.get(nf).dom;
                    nf.setAttribute('origClasses',item.getEl().down('input').dom.className);
                    td.setAttribute('origClasses',item.getEl().down('input').dom.className);
                    
                    formItems.push(item);
                }
            }
            this.editableFields = formItems;

        return me.floatingButtons;
    }
    
}); 

Ext.define('sst.util.MyRowEditing', {
    extend: 'Ext.grid.plugin.RowEditing',
    alias: 'plugin.myrowediting',

    requires: [
    //    'util.MyRRowEditor'
    ],
    initEditor: function() {
        var me       = this,
            grid     = me.grid,
            view     = me.view,
            headerCt = grid.headerCt,
            btns     = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText'],
            b,
            bLen     = btns.length,
            edcfg      = {
                autoCancel: me.autoCancel,
                errorSummary: me.errorSummary,
                fields: headerCt.getGridColumns(),
                hidden: true,
                view: view,
                // keep a reference...
                editingPlugin: me,
                renderTo: view.el//,
            },
            item;

        //Turn button text into items
        for (b = 0; b < bLen; b++) {
            item = btns[b];

            if (Ext.isDefined(me[item])) { //sometimes errorsText or dirtyText are not defined
                edcfg[item] = me[item];
            }
        }
        return Ext.create('sst.util.MyRowEditor', edcfg); ////This is really the only line you have to change
    },
    
    //Bonus: I found this to be the most effective way to keep the row editor from appearing
    beforeEdit: function() {return !this.disabled;}
    
}); 

[scottmartin]

Thanks for the info.

Scott.