Archive for the ‘Ext JS’ Category

Ext JS carregar um combo box a partir de outro combo box

Postado em 16 jan 2009
Categoria(s) Ext JS, JavaScript

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.

  • Share/Bookmark

Ext JS criando um combo box através de um JSON JavaScript e adicionando o evento onchange (select)

Postado em 15 jan 2009
Categoria(s) Ext JS, JavaScript

Adicionei na página a biblioteca JavaScript: ext-all.js

Crie no HTML o elemento:

1
2
<div>
  <input type="text" id="local-states" size="20" /></div>

Adicione na página o JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<script language="JavaScript">
// Executado quando a página termina de carregar
Ext.onReady(function() {
 
  // JSON de states para popular o combo box
  var states = [
      {'abbr': 'AL', 'state': 'Alabama', 'nick': 'The Heart of Dixie'},
      {'abbr': 'AK', 'state': 'Alaska', 'nick': 'The Land of the Midnight Sun'},
      {'abbr': 'AZ', 'state': 'Arizona', 'nick': 'The Grand Canyon State'},
      {'abbr': 'AR', 'state': 'Arkansas', 'nick': 'The Natural State'},
      {'abbr': 'CA', 'state': 'California', 'nick': 'The Golden State'},
      {'abbr': 'CO', 'state': 'Colorado', 'nick': 'The Mountain State'},
      {'abbr': 'CT', 'state': 'Connecticut', 'nick': 'The Constitution State'},
      {'abbr': 'DE', 'state': 'Delaware', 'nick': 'The First State'},
      {'abbr': 'DC', 'state': 'District of Columbia', 'nick': "The Nation's Capital"},
      {'abbr': 'FL', 'state': 'Florida', 'nick': 'The Sunshine State'},
      {'abbr': 'GA', 'state': 'Georgia', 'nick': 'The Peach State'},
      {'abbr': 'HI', 'state': 'Hawaii', 'nick': 'The Aloha State'},
      {'abbr': 'ID', 'state': 'Idaho', 'nick': 'Famous Potatoes'},
      {'abbr': 'IL', 'state': 'Illinois', 'nick': 'The Prairie State'},
      {'abbr': 'IN', 'state': 'Indiana', 'nick': 'The Hospitality State'},
      {'abbr': 'IA', 'state': 'Iowa', 'nick': 'The Corn State'},
      {'abbr': 'KS', 'state': 'Kansas', 'nick': 'The Sunflower State'},
      {'abbr': 'KY', 'state': 'Kentucky', 'nick': 'The Bluegrass State'},
      {'abbr': 'LA', 'state': 'Louisiana', 'nick': 'The Bayou State'},
      {'abbr': 'ME', 'state': 'Maine', 'nick': 'The Pine Tree State'},
      {'abbr': 'MD', 'state': 'Maryland', 'nick': 'Chesapeake State'},
      {'abbr': 'MA', 'state': 'Massachusetts', 'nick': 'The Spirit of America'},
      {'abbr': 'MI', 'state': 'Michigan', 'nick': 'Great Lakes State'},
      {'abbr': 'MN', 'state': 'Minnesota', 'nick': 'North Star State'},
      {'abbr': 'MS', 'state': 'Mississippi', 'nick': 'Magnolia State'},
      {'abbr': 'MO', 'state': 'Missouri', 'nick': 'Show Me State'},
      {'abbr': 'MT', 'state': 'Montana', 'nick': 'Big Sky Country'},
      {'abbr': 'NE', 'state': 'Nebraska', 'nick': 'Beef State'},
      {'abbr': 'NV', 'state': 'Nevada', 'nick': 'Silver State'},
      {'abbr': 'NH', 'state': 'New Hampshire', 'nick': 'Granite State'},
      {'abbr': 'NJ', 'state': 'New Jersey', 'nick': 'Garden State'},
      {'abbr': 'NM', 'state': 'New Mexico', 'nick': 'Land of Enchantment'},
      {'abbr': 'NY', 'state': 'New York', 'nick': 'Empire State'},
      {'abbr': 'NC', 'state': 'North Carolina', 'nick': 'First in Freedom'},
      {'abbr': 'ND', 'state': 'North Dakota', 'nick': 'Peace Garden State'},
      {'abbr': 'OH', 'state': 'Ohio', 'nick': 'The Heart of it All'},
      {'abbr': 'OK', 'state': 'Oklahoma', 'nick': 'Oklahoma is OK'},
      {'abbr': 'OR', 'state': 'Oregon', 'nick': 'Pacific Wonderland'},
      {'abbr': 'PA', 'state': 'Pennsylvania', 'nick': 'Keystone State'},
      {'abbr': 'RI', 'state': 'Rhode Island', 'nick': 'Ocean State'},
      {'abbr': 'SC', 'state': 'South Carolina', 'nick': 'Nothing Could be Finer'},
      {'abbr': 'SD', 'state': 'South Dakota', 'nick': 'Great Faces, Great Places'},
      {'abbr': 'TN', 'state': 'Tennessee', 'nick': 'Volunteer State'},
      {'abbr': 'TX', 'state': 'Texas', 'nick': 'Lone Star State'},
      {'abbr': 'UT', 'state': 'Utah', 'nick': 'Salt Lake State'},
      {'abbr': 'VT', 'state': 'Vermont', 'nick': 'Green Mountain State'},
      {'abbr': 'VA', 'state': 'Virginia', 'nick': 'Mother of States'},
      {'abbr': 'WA', 'state': 'Washington', 'nick': 'Green Tree State'},
      {'abbr': 'WV', 'state': 'West Virginia', 'nick': 'Mountain State'},
      {'abbr': 'WI', 'state': 'Wisconsin', 'nick': "America's Dairyland"},
      {'abbr': 'WY', 'state': 'Wyoming', 'nick': 'Like No Place on Earth'}
    ];
 
    // Define o nome para cada posição do JSON de states, armazena todas as informações
    var store = new Ext.data.JsonStore({
      fields: [
        {name: 'abbr', type: 'string'}, // nome de cada coluna do JSON de states
        {name: 'state', type: 'string'},
        {name: 'nick', type: 'string'}
      ],
      data: states // JSON de states
    });
 
    // Cria o combo box
    var combo = new Ext.form.ComboBox({
      store: store, // Define o armazenamento das informações
      displayField: 'state', // Coluna que será exibida no combo box
      typeAhead: true, // Leia a api: http://extjs.com/deploy/ext/docs/output/Ext.form.ComboBox.html
      mode: 'local', // Leia a api: http://extjs.com/deploy/ext/docs/output/Ext.form.ComboBox.html
      forceSelection: true, // Leia a api: http://extjs.com/deploy/ext/docs/output/Ext.form.ComboBox.html
      triggerAction: 'all', // Leia a api: http://extjs.com/deploy/ext/docs/output/Ext.form.ComboBox.html
      emptyText: 'Select a state...', // Texto no combo box quando nenhum elemento está selecionado
      selectOnFocus: true, // Leia a api: http://extjs.com/deploy/ext/docs/output/Ext.form.ComboBox.html
      applyTo: 'local-states' // Campo input que será usado para gerar o combo box
    });
 
    // Evento disparado quando é selecionado um item no combo box
    combo.addListener('select', handleSelect);
});
 
function handleSelect(obj, record, index) {
  // Imprime todas as informações da opção selecionada no combo box
  alert('Selecionou a opção: abbr: ' + record.get('abbr') + ', state: ' + record.get('state') + ', nick: ' + record.get('nick') + ', index: ' + index);
}
</script>

Leia os comentários no código para entender como toda essa macumba funciona! ;-)

  • Share/Bookmark

Ext JS criando um combo box através de um array JavaScript

Postado em 15 jan 2009
Categoria(s) Ext JS, JavaScript

Adicionei na página o JavaScript: ext-all.js

No html adicione:

1
2
<div>
  <input type="text" id="local-states" size="20" /></div>

Adicione na página o JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<script language="JavaScript">
// Executado quando a página termina de carregar
Ext.onReady(function() {
 
  // Array de states para popular o combo box
  var states = [
      ['AL', 'Alabama', 'The Heart of Dixie'],
      ['AK', 'Alaska', 'The Land of the Midnight Sun'],
      ['AZ', 'Arizona', 'The Grand Canyon State'],
      ['AR', 'Arkansas', 'The Natural State'],
      ['CA', 'California', 'The Golden State'],
      ['CO', 'Colorado', 'The Mountain State'],
      ['CT', 'Connecticut', 'The Constitution State'],
      ['DE', 'Delaware', 'The First State'],
      ['DC', 'District of Columbia', "The Nation's Capital"],
      ['FL', 'Florida', 'The Sunshine State'],
      ['GA', 'Georgia', 'The Peach State'],
      ['HI', 'Hawaii', 'The Aloha State'],
      ['ID', 'Idaho', 'Famous Potatoes'],
      ['IL', 'Illinois', 'The Prairie State'],
      ['IN', 'Indiana', 'The Hospitality State'],
      ['IA', 'Iowa', 'The Corn State'],
      ['KS', 'Kansas', 'The Sunflower State'],
      ['KY', 'Kentucky', 'The Bluegrass State'],
      ['LA', 'Louisiana', 'The Bayou State'],
      ['ME', 'Maine', 'The Pine Tree State'],
      ['MD', 'Maryland', 'Chesapeake State'],
      ['MA', 'Massachusetts', 'The Spirit of America'],
      ['MI', 'Michigan', 'Great Lakes State'],
      ['MN', 'Minnesota', 'North Star State'],
      ['MS', 'Mississippi', 'Magnolia State'],
      ['MO', 'Missouri', 'Show Me State'],
      ['MT', 'Montana', 'Big Sky Country'],
      ['NE', 'Nebraska', 'Beef State'],
      ['NV', 'Nevada', 'Silver State'],
      ['NH', 'New Hampshire', 'Granite State'],
      ['NJ', 'New Jersey', 'Garden State'],
      ['NM', 'New Mexico', 'Land of Enchantment'],
      ['NY', 'New York', 'Empire State'],
      ['NC', 'North Carolina', 'First in Freedom'],
      ['ND', 'North Dakota', 'Peace Garden State'],
      ['OH', 'Ohio', 'The Heart of it All'],
      ['OK', 'Oklahoma', 'Oklahoma is OK'],
      ['OR', 'Oregon', 'Pacific Wonderland'],
      ['PA', 'Pennsylvania', 'Keystone State'],
      ['RI', 'Rhode Island', 'Ocean State'],
      ['SC', 'South Carolina', 'Nothing Could be Finer'],
      ['SD', 'South Dakota', 'Great Faces, Great Places'],
      ['TN', 'Tennessee', 'Volunteer State'],
      ['TX', 'Texas', 'Lone Star State'],
      ['UT', 'Utah', 'Salt Lake State'],
      ['VT', 'Vermont', 'Green Mountain State'],
      ['VA', 'Virginia', 'Mother of States'],
      ['WA', 'Washington', 'Green Tree State'],
      ['WV', 'West Virginia', 'Mountain State'],
      ['WI', 'Wisconsin', "America's Dairyland"],
      ['WY', 'Wyoming', 'Like No Place on Earth']
    ];
 
    // Define o nome para cada posição do array de states, armazena todas as informações
    var store = new Ext.data.SimpleStore({
      fields: ['abbr', 'state', 'nick'], // nome de cada coluna do array de states
      data: states // array de states
    });
 
    // Cria o combo box
    var combo = new Ext.form.ComboBox({
      store: store, // Define o armazenamento das informações
      displayField: 'state', // Coluna que será exibida no combo box
      typeAhead: true, // Leia a api: http://extjs.com/deploy/ext/docs/output/Ext.form.ComboBox.html
      mode: 'local', // Leia a api: http://extjs.com/deploy/ext/docs/output/Ext.form.ComboBox.html
      forceSelection: true, // Leia a api: http://extjs.com/deploy/ext/docs/output/Ext.form.ComboBox.html
      triggerAction: 'all', // Leia a api: http://extjs.com/deploy/ext/docs/output/Ext.form.ComboBox.html
      emptyText: 'Select a state...', // Texto no combo box quando nenhum elemento está selecionado
      selectOnFocus: true, // Leia a api: http://extjs.com/deploy/ext/docs/output/Ext.form.ComboBox.html
      applyTo: 'local-states' // Campo input que será usado para gerar o combo box
    });
});
</script>

Leia os comentários no código para entender como toda mágica acontece. :-)

  • Share/Bookmark