ExtJS 4: Adicionar um novo botão trigger no ComboBox
Autor: Weslley Alves | Publicado: 2012-05-05T13:47:00-07:00

Olá meu caro leitor ou leitora. Hoje venho falar sobre um recurso simples que podemos utilizar com o componente da classe&nbsp;Ext.form.field.ComboBox&nbsp;do ExtJS.&nbsp;Irei demonstrar neste post um exemplo da criação de um novo botão "trigger" utilizando o componente ComboBox.
Resolvi escrever este, pois há um tempo que utilizo este recurso (desde a versão ExtJS 3.3.1) e não vi nada que mencionasse esse recurso na API Documentation do ExtJS e até o momento nenhum blog que mencione este assunto, mas no fórum oficial do Sencha existem alguns posts sobre este recurso.
Mas o que seria o botão trigger, este é o botão que fica renderizado no final do campo do ComboBox que executa a ação de exibir a lista de dados para a seleção do usuário. Vide imagem abaixo:


ComboBox com o trigger default do ExtJS

Por default é renderizado somente um botão trigger no componente, mas existe o recurso de inserir novos botões com ações definidas pelo programador.

Introdução
Esse recurso pode ser utilizado, pois a Classe&nbsp;Ext.form.field.ComboBox&nbsp;extende a classe&nbsp;Ext.form.field.Picker&nbsp;esta classe que fornece a implementação dos botões de trigger.
A implementação do botão trigger depende de duas configurações uma seria a classe CSS com o ícone para o botão e a função que será executada no click do botão. A&nbsp;Classe&nbsp;
Ext.form.field.ComboBox&nbsp;utiliza a classe CSS "form-arrow-trigger" para o seu botão trigger padrão que executa o método "onTriggerClick" que irá exibir a lista de opções do ComboBox.

Requisitos para o exemplo
Abaixo está a lista dos requisitos utilizados para criação do exemplo a imagem abaixo demonstra o produto final deste exemplo com o novo botão trigger do ComboBox.


ComboBox com os novos botões trigger2

- SDK do ExtJS (até a publicação deste estava na versão ExtJS 4.1.0)&nbsp;download
- Servidor Web (este não é um requisito obrigatório)
Para instalação criei uma pasta com o nome de "combobox_trigger2"&nbsp;(sem aspas) no meu DOCUMENT_ROOT e descompactei o framework do ExtJS dentro desta pasta e alterei o nome de "extjs-4.1.0" pasta para "extjs" (sem aspas). Caso não esteja utilizando um Servidor Web basta criar a basta&nbsp;&nbsp;"combobox_trigger2" com os arquivos.


Estrutura da pasta do exemplo

Criando os arquivos de Exemplo
Este exemplo tem somente dois arquivos "combobox_trigger2.html" e "combobox_trigger2.js". Abaixo irei postar o código destes dois arquivos e após irei&nbsp;frisar as partes mais importantes da criação dos botões trigger.
Arquivo&nbsp;combobox_trigger2.html:
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Exemplo Combobox com trigger2&lt;/title&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;!-- CSS do Framework ExtJS --&gt;
    &lt;link rel="stylesheet" href="extjs/resources/css/ext-all-gray.css" /&gt;
    &lt;style type="text/css"&gt;
        body { padding: 12px 10px 0; }
    &lt;/style&gt;

    &lt;!-- JS para o exemplo --&gt;
    &lt;script type="text/javascript" src="extjs/ext-all.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="combobox_trigger2.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
Arquivo&nbsp;combobox_trigger2.js:

var onTrigger2ClickCombo1 = function() {
    this.clearValue();
    
    Ext.Msg.alert('Clear Value', 'Valor do ComboBox removido com sucesso!');
}

var onTrigger2ClickCombo2 = function() {
    var estado = 'Nome do Estado: &lt;b&gt;{0}&lt;/b&gt;';
    
    Ext.create('Ext.window.Window', {
         title: 'Visualizar dados do Estado'
        ,bodyPadding: 5
        ,html: Ext.String.format(estado, this.getDisplayValue())
        ,autoShow: true
        ,width: 340
        ,height: 90
        ,modal: true
    });
}
Ext.onReady(function(){
    // Habilitando os QuickTips
    Ext.tip.QuickTipManager.init();
    
    // Dados dos Estados
    var estados = [
         {'id': 1, 'nome': 'Minas Gerais'}
        ,{'id': 2, 'nome': 'Rio de Janeiro'}
        ,{'id': 3, 'nome': 'São Paulo'}
    ];
    
    // Definindo o Model do Store de Estados
    Ext.define('Estado', {
         extend: 'Ext.data.Model'
        ,fields: [
             {name: 'id', type: 'int'}
            ,{name: 'nome', type: 'string'}
        ]
    });
    
    var store = Ext.create('Ext.data.Store', {
         autoDestroy: true
        ,model: 'Estado'
        ,data: estados
    });
    
    var combo1 = Ext.create('Ext.form.field.ComboBox', {
         fieldLabel: 'Estados'
        ,displayField: 'nome'
        ,forceSelection: true
        ,valueField: 'id'
        ,emptyText: 'Selecione um Estado'
        ,store: store
        ,queryMode: 'local'
        ,typeAhead: true
        // Criando o novo trigger
        ,trigger2Cls: 'x-form-clear-trigger'
        ,onTrigger2Click: onTrigger2ClickCombo1
    });
    
    var combo2 = Ext.create('Ext.form.field.ComboBox', {
         fieldLabel: 'Estados'
        ,displayField: 'nome'
        ,forceSelection: true
        ,valueField: 'id'
        ,emptyText: 'Selecione um Estado'
        ,store: store
        ,queryMode: 'local'
        ,typeAhead: true
        // Criando o novo trigger
        ,trigger2Cls: 'x-form-search-trigger'
        ,onTrigger2Click: onTrigger2ClickCombo2
    });
    
    Ext.create('Ext.form.Panel', {
         renderTo: Ext.getBody()
        ,title: 'Exemplo Combobox trigger2'
        ,frame: true
        ,bodyPadding: 5
        ,width: 480
        ,fieldDefaults: {
             labelAlign: 'left'
            ,labelWidth: 80
            ,anchor: '100%'
        }
        ,items: [combo1, combo2]
    });
});
Conclusão
Como tinha mencionado para criar o novo botão informei a classe CSS para o atributo "trigger2Cls" e a função que deverá ser executada sendo esta informada no atributo "onTrigger2Click" para cada ComboBox&nbsp;(combo1&nbsp;e&nbsp;combo2).
var onTrigger2ClickCombo1 = function() {
    this.clearValue();
    
    Ext.Msg.alert('Clear Value', 'Valor do ComboBox removido com sucesso!');
}

var onTrigger2ClickCombo2 = function() {
    var estado = 'Nome do Estado: &lt;b&gt;{0}&lt;/b&gt;';
    
    Ext.create('Ext.window.Window', {
         title: 'Visualizar dados do Estado'
        ,bodyPadding: 5
        ,html: Ext.String.format(estado, this.getDisplayValue())
        ,autoShow: true
        ,width: 340
        ,height: 90
        ,modal: true
    });
}
Ext.onReady(function(){
    ...
    var combo1 = Ext.create('Ext.form.field.ComboBox', {
         fieldLabel: 'Estados'
        ,displayField: 'nome'
        ,forceSelection: true
        ,valueField: 'id'
        ,emptyText: 'Selecione um Estado'
        ,store: store
        ,queryMode: 'local'
        ,typeAhead: true
        // Criando o novo trigger
        ,trigger2Cls: 'x-form-clear-trigger'
        ,onTrigger2Click: onTrigger2ClickCombo1
    });
    
    var combo2 = Ext.create('Ext.form.field.ComboBox', {
         fieldLabel: 'Estados'
        ,displayField: 'nome'
        ,forceSelection: true
        ,valueField: 'id'
        ,emptyText: 'Selecione um Estado'
        ,store: store
        ,queryMode: 'local'
        ,typeAhead: true
        // Criando o novo trigger
        ,trigger2Cls: 'x-form-search-trigger'
        ,onTrigger2Click: onTrigger2ClickCombo2
    });
    ...
});
Nas linhas&nbsp;#32 e #46 são informadas as classes CSS essas já estão inclusas no arquivo de styles do ExtJS (ext-all-gray.css) é importante sempre utilizar as imagens como esta classe CSS implementa, pois facilita na questão de efeitos quando passamos o mouse em cima da imagem, ou quando está selecionada. Um exemplo de imagem seria a utilizada na classe CSS&nbsp;x-form-search-trigger:


Nas linhas&nbsp;#33&nbsp;e&nbsp;#47&nbsp;são informadas as funções de cada respectivo botão trigger. A primeira função "onTrigger2ClickCombo1" irá limpar os dados selecionado no ComboBox (combo1) e exibir uma mensagem informando a ação. Já a&nbsp;função "onTrigger2ClickCombo2" irá exibir uma Window com o texto do Estado selecionado.


Ação ao clicar no trigger2 do combo2

Existem algumas funcionalidades para este recurso como limpar os dados do ComboBox, exibir uma Window com um Form para cadastro de novos registros para o ComboBox, excluir o registro selecionado, entre outras ações.
Caso queira adicionar mais botões trigger no ComboBox é só seguir a ordem crescente dos atributos, ou seja, caso eu fosse inserir outro botão teria que criar no ComboBox os atributos&nbsp;"trigger3Cls" e "onTrigger3Click" com seus respectivos valores.
Então se tudo estiver certo abra o arquivo "combobox_trigger2.html" no browser que deverá exibir um Form com os dois Combos conforme a primeira imagem demonstrada neste post.
Espero ter sido claro sobre esse assunto mas qualquer dúvida deixe seu comentário ou mande um e-mail para bloglegolas@gmail.com.
Obrigado pela leitura e até o próximo.

 SyntaxHighlighter.highlight();