adding multiple functions to an ExtJS gridPanel button's handler

Question

I have an ExtJS gridPanel with a button that fires a global function:

grid = Ext.create('Ext.grid.Panel', {
...
    tbar: [
        {
            xtype: 'button',
            text: 'Group',
            handler: group // call to global function
        }
    ]
...
});

After I have called the group function, I need to call another global function, for instance renameGroups ; how do I place this function, or indeed any additional functions, in the handler?

Answer 1

What we do in JavaScript usually is define our own function calling all the others, so in your example:

grid = Ext.create('Ext.grid.Panel', {
...
tbar: [
    {
        xtype: 'button',
        text: 'Group',
        // will call the function when clicked, which will then call the others
        handler: function(e) {
            group(e); 
            renameGroups(e);
        }
    }
]
...
});

Answer 2

There are a few different options.

1. Instead of using a handler, you could listen for click from another component. For example:

   grid.down('[text=Group]').on('click', function() {});

2. You can put a function in the grid and call it directly from inside the handler:

   button.up('grid').renameGroups();