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 |
Introdução
Esse recurso pode ser utilizado, pois a Classe Ext.form.field.ComboBox extende a classe Ext.form.field.Picker 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 Classe Ext.form.field.ComboBox 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 |
- Servidor Web (este não é um requisito obrigatório)
Para instalação 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 não esteja utilizando um Servidor Web basta criar a basta "combobox_trigger2" com os arquivos.
 |
| Estrutura da pasta do 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 frisar as partes mais importantes da criação dos botões 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': '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ãoComo 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 (combo1 e 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: <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(){
...
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 #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 x-form-search-trigger:
 |
| Ação ao clicar no trigger2 do combo2 |
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 "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.
