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.
.
