Add a custom button to the roweditor & shortcuts

[castitas]

I need to add some custom buttons to the row editor. I've looked at the code for the rowediting plugin & the roweditor, and I don't think extending them would allow me to do what I'd like, which means I'd have to rewrite the file. If I do that, though, framework changes could break a lot.

I also need to create a carry-value-over shortcut (Ctrl+-> moves the value in the current cell to the next one). It seems keynav is the place to do it?

This is my first time doing something like this. Any ideas on how to start?

[scottmartin]

What problems do you see with creating an extension?

Scott.

[castitas]

I can't see where I could add buttons. It seems they are creating them in Rowediting.initEditor(), which is not extensible, seeing as it creates the row editor at the end.

Currently, a friend suggested I use interceptAfter. Here's what he used:

        //Create the row editor
        rowEd = Ext.create('Ext.grid.plugin.RowEditing', {
            pluginId: 'roweditor',
            autoCancel: false,
            buttons: [{
                xtype : 'button',
                action: 'sayhi',
                text: "HI"
                maxWidth: 22
            },{
                xtype : 'button',
                action : 'saybye',
                text: "BYE"
                maxWidth: 22
            }]
        });
        //Add an intercept to allow buttons to be added to the editor
        Ext.Function.interceptAfter(rowEd,'startEdit',function(){
            var me = this;
            var floatPanel = me.editor.floatingButtons;
            if ((me.hasOwnProperty('buttons') && me.buttons.length >0) && floatPanel.items.getCount() == 2){
                Ext.each(me.buttons,function(item){
                    var btn = floatPanel.add(item);
                    
                    floatPanel.setWidth(floatPanel.getWidth()+btn.getWidth()+5);
                })
            }
            //Fix border width
            floatPanel.getEl().down('.x-grid-row-editor-buttons-bc').setWidth(floatPanel.getWidth()-6); 
            floatPanel.doLayout();
        },rowEd);

[scottmartin]

I have never tried the approach. Does it seems to work as expected? I would most likely copy the UX in my own DIR and start making changes as needed.

Regards,
Scott.

[castitas]

The buttons appear, are sized correctly, and can take icons, but I can't figure out how to get a reaction off of them (ie in the controller). I'm working on that now. My only worry is maintainability (how could you find this sort of thing) and performance (which is not a big deal, seeing as it's javascript).

[castitas]

I finally found the buttons config. It's in getFloatingButtons. So I guess I could extend the class and override the function.

Edit:
What I did.

Ext.grid.RowEditor.override({
    getFloatingButtons: function() {
        ....

        if (!me.floatingButtons) {
            btns = me.floatingButtons = new Ext.Container({
                renderTpl: [
                    ....
                    '<div class="{baseCls}-bc" style="width:###px"></div>',
                    '{%this.renderContainer(out,values)%}'
                ],
                items[{
                    ....
                },{
                    //My buttons
                }]
            ...
    }
});

You have to change the width to fit your new buttons.