Posts Tagged ‘js’

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

Criando menu drop down em javascript usando o framework Prototype

Postado em 16 jan 2009
Categoria(s) JavaScript, Prototype

Hoje eu precisei construir um menu drop down em javascript. Procurei na internet vários tipos de menus, encontrei alguns que só funcionavam com ul e li, outros eram complexos demais e na verdade o que eu queria e colocar o mouse em cima de um link e fazer aparecer um div com os itens do menu :-). Acabei decidindo por implementar o meu próprio sistema de menu com a ajuda desse artigo: http://javascript-array.com/scripts/simple_drop_down_menu/.

Para fazer o menu eu usei o framework JavaScript Prototype (http://www.prototypejs.org/).

Mãos a obra!

Carregue na página o framework Prototype:

1
<script src="/javascripts/prototype.js" type="text/javascript"></script>

Eu montei o menu e submenu com a seguinte estrutura HTML:

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
<!-- begin: menu -->
<div id="menu">
<ul>
	<li class="item1" id="menu1"><a href="#">INFORMA&Ccedil;&Atilde;O</a></li>
	<li class="item2" id="menu2"><a href="#">CAPACITA&Ccedil;&Atilde;O E APERFEI&Ccedil;OAMENTO</a></li>
	<li class="item3" id="menu3"><a href="#">EDITORA</a></li>
</ul>
</div>
<!-- end: menu -->
 
<!-- begin: submenu -->
<div id="submenu">
  <!-- begin: submenu 1 -->
<div id="submenu1" class="submenu" style="display:none;">
<ul class="column1">
	<li><a href="#" class="item111">Institucional</a></li>
	<li><a href="#" class="item112">Produtos</a></li>
	<li><a href="#" class="item113">Trabalhe Conosco</a></li>
	<li><a href="#" class="item114">Receba nosso news</a></li>
	<li><a href="#" class="item115">Contato</a></li>
</ul>
<ul class="column2">
	<li><a href="#">Podcasts</a></li>
	<li><a href="#">RSS</a></li>
	<li><a href="#">E-commerce</a></li>
	<li><a href="#">TV</a></li>
	<li><a href="#">Vantagens</a></li>
</ul>
<ul class="column3">
	<li><a href="#" class="item131">Artigos</a></li>
	<li><a href="#" class="item132">Calend&aacute;rio de Cursos</a></li>
</ul>
</div>
<!-- end: submenu 1 -->
  <!-- begin: submenu 2 -->
<div id="submenu2" class="submenu" style="display:none;">
<ul class="column1">
	<li><a href="#" class="item211">Institucional</a></li>
	<li><a href="#" class="item212">Produtos</a></li>
	<li><a href="#" class="item213">Trabalhe Conosco</a></li>
	<li><a href="#" class="item214">Receba nosso news</a></li>
	<li><a href="#" class="item215">Contato</a></li>
</ul>
<ul class="column2">
	<li><a href="#">Podcasts</a></li>
	<li><a href="#">RSS</a></li>
	<li><a href="#">E-commerce</a></li>
	<li><a href="#">TV</a></li>
	<li><a href="#">Vantagens</a></li>
</ul>
<ul class="column3">
	<li><a href="#" class="item231">Artigos</a></li>
	<li><a href="#" class="item232">Calend&aacute;rio de Cursos</a></li>
</ul>
</div>
<!-- end: submenu 2 -->
  <!-- begin: submenu 3 -->
<div id="submenu3" class="submenu" style="display:none;">
<ul class="column1">
	<li><a href="#" class="item311">Institucional</a></li>
	<li><a href="#" class="item312">Produtos</a></li>
	<li><a href="#" class="item313">Trabalhe Conosco</a></li>
	<li><a href="#" class="item314">Receba nosso news</a></li>
	<li><a href="#" class="item315">Contato</a></li>
</ul>
<ul class="column2">
	<li><a href="#">Podcasts</a></li>
	<li><a href="#">RSS</a></li>
	<li><a href="#">E-commerce</a></li>
	<li><a href="#">TV</a></li>
	<li><a href="#">Vantagens</a></li>
</ul>
<ul class="column3">
	<li><a href="#" class="item331">Artigos</a></li>
	<li><a href="#" class="item332">Calend&aacute;rio de Cursos</a></li>
</ul>
</div>
<!-- end: submenu 3 --></div>
<!-- end: submenu -->

Implementei o seguinte JavaScript que faz o menu drop down funcionar:

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
Event.observe(window, 'load', initMenuSystem);
 
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
 
function initMenuSystem() {
  configMenuItem('menu1', 'submenu1');
  configMenuItem('menu2', 'submenu2');
  configMenuItem('menu3', 'submenu3');
}
 
function configMenuItem(menu, submenu) {
  $(menu).observe('mouseover', function() {
    mopen(submenu)
  });
 
  $(menu).observe('mouseout', function() {
    mclosetime();
  });
 
  $(submenu).observe('mouseover', function() {
    mcancelclosetime();
  });
 
  $(submenu).observe('mouseout', function() {
    mclosetime();
  });
}
 
function mopen(id) {
  mcancelclosetime();
 
  if (ddmenuitem) {
    ddmenuitem.hide();
  }
 
  ddmenuitem = $(id);
  ddmenuitem.show();
}
 
function mclosetime() {
  closetimer = window.setTimeout(mclose, timeout);
}
 
function mclose() {
  if (ddmenuitem) {
    ddmenuitem.hide();
  }
}
 
function mcancelclosetime() {
  if (closetimer) {
    window.clearTimeout(closetimer);
    closetimer = null;
  }
}

Pronto! Ufaaa!

  • 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

Ext JS por uma web mais amigável

Postado em 13 jan 2009
Categoria(s) JavaScript, Web 2.0

Um dos maiores desafios atualmente é fazer o ambiente web ser mais amigável e as aplicações mais funcionais.

Pensando nos argumentos acima, recentemente eu comecei a usar o Framework Ext JS, ele permite criar aplicações bem mais agradáveis para o usuário, com uma grande variedade de componentes visuais.

Nesse endereço: http://www.extjs.com/products/extjs/ você pode encontrar alguns exemplos, documentação e fazer o download do framework.

Como todo o framework existe uma curva de aprendizado, em alguns momentos essa curva será mais acentuado e complicada, mas nesse momento você não deve desistir, procure o fórum: http://extjs.com/forum/ e a comunidade nacional: http://extjs.com.br/forum/ para tirar as suas dúvidas.

Se a sua dúvida estiver dentro dos meus conhecimentos, também posso ajudar.

  • Share/Bookmark

Populando um combobox através de um resultado em JSON usando o framework javascript Prototype

Postado em 04 dez 2008
Categoria(s) JavaScript, Prototype

Vou mostrar como popular um combobox de cidades através de um resultado em JSON, usando o framework javascript Prototype.

Eu tenho um formulário com dois comboboxs um de estado e outro de cidade, quando o usuário selecionar o estado é buscada as cidades através de um webservice que retorna um JSON.

Meu formulário:

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
<form name="exemplo" id="exemplo" method="post">
  <table>
    <tbody>
      <tr>
        <th><label for="state">Estado</label></th>
        <td>
          <select id="state" name="state">
            <option value="0"/>
            <option value="1">AC</option>
            <option value="2">AL</option>
            <option value="3">AM</option>
            <option value="4">AP</option>
            <option value="5">BA</option>
            <option value="6">CE</option>
            <option value="7">DF</option>
            <option value="8">ES</option>
            <option value="9">GO</option>
            <option value="10">MA</option>
            <option value="11">MG</option>
            <option value="12">MS</option>
            <option value="13">MT</option>
            <option value="14">PA</option>
            <option value="15">PB</option>
            <option value="16">PE</option>
            <option value="17">PI</option>
            <option value="18">PR</option>
            <option value="19">RJ</option>
            <option value="20">RN</option>
            <option value="21">RO</option>
            <option value="22">RR</option>
            <option value="23">RS</option>
            <option value="24">SC</option>
            <option value="25">SE</option>
            <option value="26">SP</option>
            <option value="27">TO</option>
          </select>
        </td>
      </tr>
      <tr>
        <th><label for="city">Cidade</label></th>
        <td>
          <select id="city" name="city"></select>
        </td>
      </tr>
    </tbody>
  </table>
</form>

Para todo o código javascript abaixo funcionar, é necessário ter as bibliotecas javascripts do Prototype incluídas na página.

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
<script language="JavaScript">
// Quando ocorrer o evento onchange no combobox chama a função getCitiesByStateId
$('state').observe('change', function() { getCitiesByStateId() });
 
/**
 * Busca todas cidades de um estado
 * @param object obj
 *  Informações do elemento
 */
function getCitiesByStateId()
{
  var state = $('state');
 
  if (state.value > 0)
  {
    var url = '/url_do_seu_webservice_que_vai_retornar_o_json/state_id/' + state.value;
    makeRequest(url, 'city');
  }
}
 
/**
 * Realiza a requisição ajax para o webservice
 * obtém os resultados e preenche o combobox
 * @param strung url
 *  Url da requisição
 * @param string combobox_fill_id
 *  Combobox para ser preenchida
 */
function makeRequest(url, combobox_fill_id)
{
  new Ajax.Request(url,
  {
    method: 'get',
    onLoading: function() { loadingComboBox(combobox_fill_id) },
    onSuccess: function(transport)
    {
      if (200 == transport.status)
      {
        var response = eval('(' + transport.responseText + ')');
        fillComboBox(combobox_fill_id, response);
      }
    }
  });
}
 
/**
 * Preenche a combobox com os valores de retorno
 * @param string name
 *  Combobox a ser preenchida
 * @param object response
 *  Objeto de resposta
 */
function fillComboBox(name, response)
{
  cleanComboBox(name);
 
  $(name).insert(new Element('option', {value: ''}).insert(''));
  response.each
  (
    function(pair)
    {
      $(name).insert(new Element('option', {value: pair.id}).insert(pair.name));
    }
  );
}
 
/**
 * Remove todos os elementos da combobox
 * @param string name
 *  Id da combobox para limpar
 */
function cleanComboBox(name)
{
  $(name).descendants().invoke('remove');
}
 
/**
 * Exibe a mensagem de aguarde... na combobox enquanto os dados estão sendo requisitados
 */
function loadingComboBox(name)
{
  cleanComboBox(name);
  $(name).insert(new Element('option', {value: ''}).insert('Aguarde...'));
}
</script>

O código acima não precisa de muitas explicações, já está bem dividido em funções e comentado.

O meu webservice retorna um JSON no seguinte formato:

1
2
[[3037,"Abati\u00e1"],[3038,"Adrian\u00f3polis"],[3039,"Agudos do Sul"],[160,"Almirante Tamandar\u00e9"],[3040,"Altamira do Paran\u00e1"],[3043,"Alt\u00f4nia"],[3041,"Alto Paran\u00e1"],[3042,"Alto Piquiri"],[3044,"Alvorada do Sul"],[3045,"Amapor\u00e3"],[3046,"Amp\u00e9re"],[3047,"Anahy"],[3048,"Andir\u00e1"],[3049,"\u00c2ngulo"],[3050,"Antonina"],[3051,"Ant\u00f4nio Olinto"],[174,"Apucarana"],[163,"Arapongas"],[3052,"Arapoti"],[3053,"Arapu\u00e3"],[3054,"Araruna"],[173,"Arauc\u00e1ria"],[3055,"Ariranha do Iva\u00ed"],[3056,"Assa\u00ed"],[3057,"Assis Chateaubriand"],[3058,"Astorga"],[3059,"Atalaia"],[3060,"Balsa Nova"],[3061,"Bandeirantes"],[3062,"Barbosa Ferraz"],[3064,"Barrac\u00e3o"],[3063,"Barra do Jacar\u00e9"],[3065,"Bela Vista da Caroba"],[3066,"Bela Vista do Para\u00edso"],[3067,"Bituruna"],[3068,"Boa Esperan\u00e7a"],[3069,"Boa Esperan\u00e7a do Igua\u00e7u"],[3070,"Boa Ventura de S\u00e3o Roque"],[3071,"Boa Vista da Aparecida"],[3072,"Bocai\u00fava do Sul"],[3073,"Bom Jesus do Sul"],[3074,"Bom Sucesso"],[3075,"Bom Sucesso do Sul"],[3076,"Borraz\u00f3polis"],[3077,"Braganey"],[3078,"Brasil\u00e2ndia do Sul"],[3079,"Cafeara"],[3080,"Cafel\u00e2ndia"],[3081,"Cafezal do Sul"],[3082,"Calif\u00f3rnia"],[3083,"Cambar\u00e1"],[170,"Camb\u00e9"],[3084,"Cambira"],[3085,"Campina da Lagoa"],[3086,"Campina do Sim\u00e3o"],[3087,"Campina Grande do Sul"],[3088,"Campo Bonito"],[3089,"Campo do Tenente"],[159,"Campo Largo"],[3090,"Campo Magro"],[162,"Campo Mour\u00e3o"],[3091,"C\u00e2ndido de Abreu"],[3092,"Cand\u00f3i"],[3093,"Cantagalo"],[3094,"Capanema"],[3095,"Capit\u00e3o Le\u00f4nidas Marques"],[3096,"Carambe\u00ed"],[3097,"Carl\u00f3polis"],[166,"Cascavel"],[161,"Castro"],[3098,"Catanduvas"],[3099,"Centen\u00e1rio do Sul"],[3100,"Cerro Azul"],[3101,"C\u00e9u Azul"],[3102,"Chopinzinho"],[3103,"Cianorte"],[3104,"Cidade Ga\u00facha"],[3105,"Clevel\u00e2ndia"],[171,"Colombo"],[3106,"Colorado"],[3107,"Congonhinhas"],[3108,"Conselheiro Mairinck"],[3109,"Contenda"],[3110,"Corb\u00e9lia"],[3111,"Corn\u00e9lio Proc\u00f3pio"],[3112,"Coronel Domingos Soares"],[3113,"Coronel Vivida"],[3114,"Corumbata\u00ed do Sul"],[3116,"Cruzeiro do Igua\u00e7u"],[3117,"Cruzeiro do Oeste"],[3118,"Cruzeiro do Sul"],[3115,"Cruz Machado"],[3119,"Cruzmaltina"],[164,"Curitiba"],[3120,"Curi\u00fava"],[3121,"Diamante d'Oeste"],[3122,"Diamante do Norte"],[3123,"Diamante do Sul"],[3124,"Dois Vizinhos"],[3125,"Douradina"],[3126,"Doutor Camargo"],[3127,"Doutor Ulysses"],[3128,"En\u00e9as Marques"],[3129,"Engenheiro Beltr\u00e3o"],[3130,"Entre Rios do Oeste"],[3131,"Esperan\u00e7a Nova"],[3132,"Espig\u00e3o Alto do Igua\u00e7u"],[3133,"Farol"],[3134,"Faxinal"],[3135,"Fazenda Rio Grande"],[3136,"F\u00eanix"],[3137,"Fernandes Pinheiro"],[3138,"Figueira"],[3140,"Flora\u00ed"],[3139,"Flor da Serra do Sul"],[3141,"Floresta"],[3142,"Florest\u00f3polis"],[3143,"Fl\u00f3rida"],[3144,"Formosa do Oeste"],[152,"Foz do Igua\u00e7u"],[3145,"Foz do Jord\u00e3o"],[3146,"Francisco Alves"],[153,"Francisco Beltr\u00e3o"],[3147,"General Carneiro"],[3148,"Godoy Moreira"],[3149,"Goioer\u00ea"],[3150,"Goioxim"],[3151,"Grandes Rios"],[3152,"Gua\u00edra"],[3153,"Guaira\u00e7\u00e1"],[3154,"Guamiranga"],[3155,"Guapirama"],[3156,"Guaporema"],[3157,"Guaraci"],[3158,"Guarania\u00e7u"],[168,"Guarapuava"],[3159,"Guaraque\u00e7aba"],[3160,"Guaratuba"],[3161,"Hon\u00f3rio Serpa"],[3162,"Ibaiti"],[3163,"Ibema"],[3164,"Ibipor\u00e3"],[3165,"Icara\u00edma"],[3166,"Iguara\u00e7u"],[3167,"Iguatu"],[3168,"Imba\u00fa"],[3169,"Imbituva"],[3170,"In\u00e1cio Martins"],[3171,"Inaj\u00e1"],[3172,"Indian\u00f3polis"],[3173,"Ipiranga"],[3174,"Ipor\u00e3"],[3175,"Iracema do Oeste"],[3176,"Irati"],[3177,"Iretama"],[3178,"Itaguaj\u00e9"],[3179,"Itaipul\u00e2ndia"],[3180,"Itambarac\u00e1"],[3181,"Itamb\u00e9"],[3182,"Itapejara d'Oeste"],[3183,"Itaperu\u00e7u"],[3184,"Ita\u00fana do Sul"],[3185,"Iva\u00ed"],[3186,"Ivaipor\u00e3"],[3187,"Ivat\u00e9"],[3188,"Ivatuba"],[3189,"Jaboti"],[3190,"Jacarezinho"],[3191,"Jaguapit\u00e3"],[3192,"Jaguaria\u00edva"],[3193,"Jandaia do Sul"],[3194,"Jani\u00f3polis"],[3195,"Japira"],[3196,"Japur\u00e1"],[3197,"Jardim Alegre"],[3198,"Jardim Olinda"],[3199,"Jataizinho"],[3200,"Jesu\u00edtas"],[3201,"Joaquim T\u00e1vora"],[3202,"Jundia\u00ed do Sul"],[3203,"Juranda"],[3204,"Jussara"],[3205,"Kalor\u00e9"],[3206,"Lapa"],[3207,"Laranjal"],[177,"Laranjeiras do Sul"],[3208,"Le\u00f3polis"],[3209,"Lidian\u00f3polis"],[3210,"Lindoeste"],[3211,"Loanda"],[3212,"Lobato"],[165,"Londrina"],[3213,"Luiziana"],[3214,"Lunardelli"],[3215,"Lupion\u00f3polis"],[3216,"Mallet"],[3217,"Mambor\u00ea"],[3218,"Mandagua\u00e7u"],[3219,"Mandaguari"],[3220,"Mandirituba"],[3221,"Manfrin\u00f3polis"],[3222,"Mangueirinha"],[3223,"Manoel Ribas"],[3224,"Marechal C\u00e2ndido Rondon"],[3225,"Maria Helena"],[3226,"Marialva"],[3227,"Maril\u00e2ndia do Sul"],[3228,"Marilena"],[3229,"Mariluz"],[151,"Maring\u00e1"],[3230,"Mari\u00f3polis"],[3231,"Marip\u00e1"],[3232,"Marmeleiro"],[3233,"Marquinho"],[3234,"Marumbi"],[3235,"Matel\u00e2ndia"],[3236,"Matinhos"],[3237,"Mato Rico"],[3238,"Mau\u00e1 da Serra"],[3239,"Medianeira"],[3240,"Mercedes"],[3241,"Mirador"],[3242,"Miraselva"],[3243,"Missal"],[3244,"Moreira Sales"],[3245,"Morretes"],[3246,"Munhoz de Melo"],[3247,"Nossa Senhora das Gra\u00e7as"],[3248,"Nova Alian\u00e7a do Iva\u00ed"],[3249,"Nova Am\u00e9rica da Colina"],[3250,"Nova Aurora"],[3251,"Nova Cantu"],[3252,"Nova Esperan\u00e7a"],[3253,"Nova Esperan\u00e7a do Sudoeste"],[3254,"Nova F\u00e1tima"],[3255,"Nova Laranjeiras"],[3256,"Nova Londrina"],[3257,"Nova Ol\u00edmpia"],[3258,"Nova Prata do Igua\u00e7u"],[3259,"Nova Santa B\u00e1rbara"],[3260,"Nova Santa Rosa"],[3261,"Nova Tebas"],[3262,"Novo Itacolomi"],[3263,"Ortigueira"],[3264,"Ourizona"],[3265,"Ouro Verde do Oeste"],[3266,"Pai\u00e7andu"],[3267,"Palmas"],[3268,"Palmeira"],[3269,"Palmital"],[3270,"Palotina"],[3271,"Para\u00edso do Norte"],[3272,"Paranacity"],[167,"Paranagu\u00e1"],[3273,"Paranapoema"],[155,"Paranava\u00ed"],[3274,"Pato Bragado"],[169,"Pato Branco"],[3275,"Paula Freitas"],[3276,"Paulo Frontin"],[3277,"Peabiru"],[3278,"Perobal"],[3279,"P\u00e9rola"],[3280,"P\u00e9rola d'Oeste"],[3281,"Pi\u00ean"],[176,"Pinhais"],[3283,"Pinhal\u00e3o"],[3282,"Pinhal de S\u00e3o Bento"],[3284,"Pinh\u00e3o"],[3285,"Pira\u00ed do Sul"],[156,"Piraquara"],[3286,"Pitanga"],[3287,"Pitangueiras"],[3288,"Planaltina do Paran\u00e1"],[3289,"Planalto"],[154,"Ponta Grossa"],[3290,"Pontal do Paran\u00e1"],[3291,"Porecatu"],[3292,"Porto Amazonas"],[3293,"Porto Barreiro"],[3294,"Porto Rico"],[3295,"Porto Vit\u00f3ria"],[3296,"Prado Ferreira"],[3297,"Pranchita"],[3298,"Presidente Castelo Branco"],[3299,"Primeiro de Maio"],[3300,"Prudent\u00f3polis"],[3301,"Quarto Centen\u00e1rio"],[3302,"Quatigu\u00e1"],[3303,"Quatro Barras"],[3304,"Quatro Pontes"],[3305,"Quedas do Igua\u00e7u"],[3306,"Quer\u00eancia do Norte"],[3307,"Quinta do Sol"],[3308,"Quitandinha"],[3309,"Ramil\u00e2ndia"],[3310,"Rancho Alegre"],[3311,"Rancho Alegre d'Oeste"],[3312,"Realeza"],[3313,"Rebou\u00e7as"],[3314,"Renascen\u00e7a"],[3315,"Reserva"],[3316,"Reserva do Igua\u00e7u"],[3317,"Ribeir\u00e3o Claro"],[3318,"Ribeir\u00e3o do Pinhal"],[3319,"Rio Azul"],[3320,"Rio Bom"],[3321,"Rio Bonito do Igua\u00e7u"],[3322,"Rio Branco do Iva\u00ed"],[3323,"Rio Branco do Sul"],[3324,"Rio Negro"],[3325,"Rol\u00e2ndia"],[3326,"Roncador"],[3327,"Rondon"],[3328,"Ros\u00e1rio do Iva\u00ed"],[3329,"Sab\u00e1udia"],[3330,"Salgado Filho"],[3331,"Salto do Itarar\u00e9"],[3332,"Salto do Lontra"],[3333,"Santa Am\u00e9lia"],[3334,"Santa Cec\u00edlia do Pav\u00e3o"],[3335,"Santa Cruz de Monte Castelo"],[3336,"Santa F\u00e9"],[3337,"Santa Helena"],[3338,"Santa In\u00eas"],[3339,"Santa Isabel do Iva\u00ed"],[3340,"Santa Izabel do Oeste"],[3341,"Santa L\u00facia"],[3342,"Santa Maria do Oeste"],[3343,"Santa Mariana"],[3344,"Santa M\u00f4nica"],[3347,"Santana do Itarar\u00e9"],[3345,"Santa Tereza do Oeste"],[3346,"Santa Terezinha de Itaipu"],[3348,"Santo Ant\u00f4nio da Platina"],[3349,"Santo Ant\u00f4nio do Caiu\u00e1"],[3350,"Santo Ant\u00f4nio do Para\u00edso"],[3351,"Santo Ant\u00f4nio do Sudoeste"],[3352,"Santo In\u00e1cio"],[3353,"S\u00e3o Carlos d
o Iva\u00ed"],[3354,"S\u00e3o Jer\u00f4nimo da Serra"],[3355,"S\u00e3o Jo\u00e3o"],[3356,"S\u00e3o Jo\u00e3o do Caiu\u00e1"],[3357,"S\u00e3o Jo\u00e3o do Iva\u00ed"],[3358,"S\u00e3o Jo\u00e3o do Triunfo"],[3359,"S\u00e3o Jorge d'Oeste"],[3360,"S\u00e3o Jorge do Iva\u00ed"],[3361,"S\u00e3o Jorge do Patroc\u00ednio"],[3362,"S\u00e3o Jos\u00e9 da Boa Vista"],[3363,"S\u00e3o Jos\u00e9 das Palmeiras"],[175,"S\u00e3o Jos\u00e9 dos Pinhais"],[3364,"S\u00e3o Manoel do Paran\u00e1"],[3365,"S\u00e3o Mateus do Sul"],[3366,"S\u00e3o Miguel do Igua\u00e7u"],[3367,"S\u00e3o Pedro do Igua\u00e7u"],[3368,"S\u00e3o Pedro do Iva\u00ed"],[3369,"S\u00e3o Pedro do Paran\u00e1"],[3370,"S\u00e3o Sebasti\u00e3o da Amoreira"],[3371,"S\u00e3o Tom\u00e9"],[3372,"Sapopema"],[150,"Sarandi"],[3373,"Saudade do Igua\u00e7u"],[3374,"Seng\u00e9s"],[3375,"Serran\u00f3polis do Igua\u00e7u"],[3376,"Sertaneja"],[3377,"Sertan\u00f3polis"],[3378,"Siqueira Campos"],[3379,"Sulina"],[3380,"Tamarana"],[3381,"Tamboara"],[3382,"Tapejara"],[3383,"Tapira"],[3384,"Teixeira Soares"],[158,"Tel\u00eamaco Borba"],[3385,"Terra Boa"],[3386,"Terra Rica"],[3387,"Terra Roxa"],[3388,"Tibagi"],[3389,"Tijucas do Sul"],[172,"Toledo"],[3390,"Tomazina"],[3391,"Tr\u00eas Barras do Paran\u00e1"],[3392,"Tunas do Paran\u00e1"],[3393,"Tuneiras do Oeste"],[3394,"Tup\u00e3ssi"],[3395,"Turvo"],[3396,"Ubirat\u00e3"],[157,"Umuarama"],[3397,"Uni\u00e3o da Vit\u00f3ria"],[3398,"Uniflor"],[3399,"Ura\u00ed"],[3400,"Ventania"],[3401,"Vera Cruz do Oeste"],[3402,"Ver\u00ea"],[3403,"Vila Alta"],[3404,"Virmond"],[3405,"Vitorino"],[3406,"Wenceslau Braz"],[3407,"Xambr\u00ea"]]
  • Share/Bookmark