Ext JS: Ações com dropdown em registros do Gridpanel – Ext.ux.grid.column.ActionButton

Recentemente precisei de uma solução que permitisse implementar várias ações para uma linha da Grid em forma de dropdown, pois já não estava cabendo tantos Buttons nem Actioncolumns nas Grids, Para atender essa necessidade criei uma simples extensão do componente Ext.grid.column.Widget.

A necessidade

Em grandes sistemas sempre temos casos com grandes módulos que possuem várias ações em um registro além de um simples CRUD, e quando deparamos com isso começamos a encher as Toolbars de botões e as Grids de Actioncolumn deixando a interface poluída e sem espaço pra mais nada

Para ações individuais normalmente usamos a actioncolumn, onde atribuímos um ícone a determinada ação, porém vai chegar um ponto que a grid vai ter mais ícones do que coluna para exibir informações

A extensão

Desde o lançamento do Ext JS 5.0, está presente um novo tipo de coluna para Grids chamado widgetcolumn que por sinal me chamou muita atenção me levando a criar um novo componente que conseguirá adicionar vários itens no menu dropdown de forma fixa para todos os records e também poderá construir os itens do menu baseado no record anexado ao Widget dinamicamente.

Código

Ext.define('Ext.ux.grid.column.ActionButton', {
    extend: 'Ext.grid.column.Widget',
    alias: 'widget.actionbuttoncolumn',
    requires: [
        'Ext.button.Button'
    ],
    width: 48,
    align: 'center',
    /**
     * @cfg {Object} buttonConfig
     * An object of the button config (see {@link Ext.button.Button} for more details).
     */
    buttonConfig: {},

    /**
     * @cfg {Object} menuConfig
     * An object of the menu config (see {@link Ext.menu.Menu} for more details).
     */
    menuConfig: {},

    /**
     * @cfg {Object[]} menuItems
     * An Array which may contain multiple menuItem actions definitions
     **/

    /**
     * @cfg {Function} getMenuItems
     * A function that will be called when a widget is attached to a record. This may be useful for
     * creating menu items according to the record. This function needs to return an Array of menu items
     * @param {Ext.data.Model} record The record used with the current widget (cell).
     * @return {Array}
     */

    getMenuItems: null,
    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            widget: Ext.apply({
                xtype: 'button',
                arrowVisible: false,
                width: 24,
                text: '&#160'

            }, me.buttonConfig)
        });
        me.callParent();
    },
    onWidgetAttach: function (column, button, record) {
        var me = this,
            scope = me.origScope || me,
            menuItems = me.menuItems || me.getMenuItems;

        if (menuItems) {
            if (Ext.isFunction(menuItems)) {
                menuItems = menuItems.call(scope, record);
            }
            button.setMenu(Ext.apply({
                animateShadow: true,
                shadowOffset: 10,
                shadow: 'frame',
                items: menuItems
            }, me.menuConfig));

        }
    }
});

O código fonte está no GitHub

Exemplo

Para implementar essa coluna em uma Grid é bem simples, basta apenas definir  uma array de Ext.menu.Item na propriedade de configuração menuItems ou  implementar o método getMenuItems e retornar uma array de items.

Além de configurar seus próprios itens, você pode também customizar o button e o menu através das propriedades buttonConfig e menuConfig

Veja o componente em funcionamento aqui

Espero que ajude alguém

Obrigado e até a próxima! 😉