Ola meu caro leitor ou leitora. Hoje venho falar sobre um recurso simples que podemos utilizar com o componente da classe Ext.form.field.ComboBox do ExtJS. Irei demonstrar neste post um exemplo da criacao de um novo botao "trigger" utilizando o componente ComboBox.Resolvi escrever este, pois ha um tempo que utilizo este recurso (desde a versao ExtJS 3.3.1) e nao vi nada que mencionasse esse recurso na API Documentation do ExtJS e ate o momento nenhum blog que mencione este assunto, mas no forum oficial do Sencha existem alguns posts sobre este recurso.Mas o que seria o botao trigger, este e o botao que fica renderizado no final do campo do ComboBox que executa a acao de exibir a lista de dados para a selecao do usuario. Vide imagem abaixo:ComboBox com o trigger default do ExtJSPor default e renderizado somente um botao trigger no componente, mas existe o recurso de inserir novos botoes com acoes definidas pelo programador.IntroducaoEsse recurso pode ser utilizado, pois a Classe Ext.form.field.ComboBox extende a classe Ext.form.field.Picker esta classe que fornece a implementacao dos botoes de trigger.A implementacao do botao trigger depende de duas configuracoes uma seria a classe CSS com o icone para o botao e a funcao que sera executada no click do botao. A Classe Ext.form.field.ComboBox utiliza a classe CSS "form-arrow-trigger" para o seu botao trigger padrao que executa o metodo "onTriggerClick" que ira exibir a lista de opcoes do ComboBox.Requisitos para o exemploAbaixo esta a lista dos requisitos utilizados para criacao do exemplo a imagem abaixo demonstra o produto final deste exemplo com o novo botao trigger do ComboBox.ComboBox com os novos botoes trigger2- SDK do ExtJS (ate a publicacao deste estava na versao ExtJS 4.1.0) download- Servidor Web (este nao e um requisito obrigatorio)Para instalacao criei uma pasta com o nome de "combobox_trigger2" (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 nao esteja utilizando um Servidor Web basta criar a basta "combobox_trigger2" com os arquivos.Estrutura da pasta do exemploCriando os arquivos de ExemploEste exemplo tem somente dois arquivos "combobox_trigger2.html" e "combobox_trigger2.js". Abaixo irei postar o codigo destes dois arquivos e apos irei frisar as partes mais importantes da criacao dos botoes trigger.Arquivo combobox_trigger2.html:<!DOCTYPE html><html><head><title>Exemplo Combobox com trigger2</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- CSS do Framework ExtJS --> <link rel="stylesheet" href="extjs/resources/css/ext-all-gray.css" /> <style type="text/css"> body { padding: 12px 10px 0; } </style> <!-- JS para o exemplo --> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" src="combobox_trigger2.js"></script></head><body></body></html>Arquivo 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: <b>{0}</b>'; 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': 'Sao Paulo'} ]; // Definindo o Model do Store de Estados Ext.define('Estado', { extend: 'Ext.data.Model' ,fields: [ {name: 'id', type: 'int'} ,{name: