Nesse exemplo será construído dois combo boxs com framework Ext JS, um de estados e outro de cidades.
O combo box de cidades será carregado após selecionar o estado, ou seja, será exibido as cidades de um determinado estado.
Crie duas variáveis globais:
1 2 | var SELECTED_STATE; var CITY_STORE; |
Crie o data store de estados e o combo box de estados:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var state_store = new Ext.data.JsonStore({ fields: [ {name: 'id', type: 'int'}, {name: 'short', type: 'string'} ], proxy: new Ext.data.HttpProxy({ url: 'getStates.php', method: 'GET' }) }); var state = new Ext.form.ComboBox({ store: state_store, displayField: 'short', fieldLabel: 'Estado', name: 'state', anchor: '100%', emptyText: 'Selecione o estado...', typeAhead: true, forceSelection: true, triggerAction: 'all', selectOnFocus: true }); |
Quando o combo box de estado for iniciado, será disparado uma requisição ajax para getStates.php e deve retorna um json de estados com os atributos id e short (usado para o nome curto do estado, por exemplo PR, SP, RJ, …)
Agora vamos criar o combo box de cidades:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | CITY_STORE = new Ext.data.JsonStore({ fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ], proxy: new Ext.data.HttpProxy({ url: 'getCities.php', method: 'GET' }) }); var city = new Ext.form.ComboBox({ store: CITY_STORE, displayField: 'name', fieldLabel: 'Cidade', name: 'city', anchor: '100%', emptyText: 'Selecione a cidade...', typeAhead: true, forceSelection: true, triggerAction: 'all', selectOnFocus: true }); |
Repare que o data store de cidades usa a variável global CITY_STORE, vamos precisar acessar esse data store dentro de algumas funções.
A ideia aqui é quando for selecionado o estado, armazenar o id selecionado e usar para fazer a requisição ajax para getCities.php, buscando somente pelas cidades de um determinado estado. Para fazer isso precisamos adicionar um listener na combo box de estados:
1 | state.addListener('select', onStateSelect); |
Agora crie a função onStateSelect:
1 2 3 4 5 | function onStateSelect(obj, record, index) { SELECTED_STATE = record.get('id'); CITY_STORE.removeAll(); CITY_STORE.load(); } |
No código acima usamos a variável global SELECTED_STATE para armazenar o id do estado selecionado, também limpamos o data store de cidades caso já tenha sido uma requisição é zerado o combo box de cidades e disparamos a requisição para preencher o combo box de cidades.
Mas só fazendo isso não vai funcionar, é necessário adicionar o parâmetro state_id na requisição ajax para obter as cidades, podemos fazer isso da seguinte forma, adicione o código:
1 2 3 4 | CITY_STORE.proxy.on('beforeload', function(proxy, params) { city.clearValue(); params.state_id = SELECTED_STATE; }); |
Antes de fazer a requisição ajax para as cidades, será adicionado o parâmetro state_id, usando um controle de eventos no Ext JS. Também limpo aqui o valor selecionado na combo box de cidades.
Bom, o Ext JS é fodinha mesmo, é meio complicado, a documentação é tão ampla que quebra as pernas. Ae você tem que balancear para ver até que ponto vale a pena usar ele. Uma coisa é verdade ele gera ótimas interfaces, mas toda essa sintaxe parece muito com o Swing do Java (coisa que eu não gosto em nada :-().
Esse exemplo é meio genérico, dá para usar tanto em combo box isolados ou com formulários em ext. Por isso você tem que fazer alguns ajustes para imprimir os combo boxs.
