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.

ActionButtonColumn

Código

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! 😉

 

 

 

Siga-me

Wemerson Januario

Engenheiro de Software em In Line Tecnologia
[PT-BR] Wemerson Januarioé empreendedor, escritor, instrutor e consultor. Atua no desenvolvimento web e soluções tecnológicas desde 2005. Apaixonado pelo que faz. Responsável pela administração do fórum ExtJS Brasil e mantem o team Slack sencha-br. Especializado em criação de aplicações multi plataformas usando tecnologias modernas em JavaScript(Ext JS) e PHP (Laravel framework).

[EN] Wemerson Januario is an entrepreneur, writer, trainer and consultant. Works in web development and technology solutions since 2005. Passionate about what he does. Administrator of Ext JS Brazil forum and keeps the Slack team sencha-br . Specializes in creating multi-platforms applications using modern technologies in JavaScript(Ext JS) and PHP (Laravel framework).
Siga-me

Últimos posts por Wemerson Januario (exibir todos)

You may also like...

  • Legolas

    Fino meu caro, a implementação ficou sucinta e funcional.

    Obrigado pro compartilhar.

    • http://wemersonjanuario.com.br Wemerson Januario

      Aprove
      Em 27/05/2015 08:10, “Disqus” escreveu: