Olá pessoal!
Como eu populo dinamicamente um Ext.form.CheckboxGroup com um JSON do servidor ?
Existe mais de uma forma?
Sei que posso colocar checboxes com atributos do tipo ‘name’ e ‘boxlabel’, mas estes atributos não são nomes das colunas que estou enviando ao cliente.
Não sei como fazer a substituição sem passar por um loop. pensei em fazer um replace dos meus atributos para os dos checkboxes, mas certamente deve existir alguma maneira mais elegante de se fazer isso.
Como assim popular dinâmicamente? Por exemplo vc dá um clique com o botão direito na tela opção Modificar, daí marcaria a caixinha se o status tivesse Ativo ou não marcaria a caixinha caso estivesse Inativo?
Oi Luiz,
Pesquisando na documentação do componente (http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.CheckboxGroup), não existe a possibilidade de se usar um store. O que você pode fazer é criar os itens dinamicamente e então configurá-los no CheckboxGroup.
Uma forma de fazer isso seria assim:
Arquivo ‘index.jsp’[code]<%@page contentType=“text/html” pageEncoding=“UTF-8”%>
JSP Page <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/javascript/ext-3.3.0/resources/css/reset-min.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/javascript/ext-3.3.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/javascript/ext-3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/javascript/ext-3.3.0/ext-all.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "${pageContext.request.contextPath}/javascript/ext-3.3.0/resources/images/default/s.gif";
Ext.Ajax.request({
url: 'checkboxGroupData.jsp',
success: function( response, options ) {
var meusItens = Ext.decode( response.responseText );
var myCheckboxGroup = new Ext.form.CheckboxGroup({
id: 'myGroup',
region: 'center',
xtype: 'checkboxgroup',
columns: 1,
items: meusItens
});
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [
myCheckboxGroup
]
});
},
failure: function() {
alert( 'erro!' );
}
});
</script>
</head>
<body>
</body>
[{
“boxLabel”: “Item 1”,
“name”: “cb-col-1”,
checked: true
}, {
“boxLabel”: “Item 2”,
“name”: “cb-col-2”
}, {
“boxLabel”: “Item 3”,
“name”: “cb-col-3”
}, {
“boxLabel”: “Item 4”,
“name”: “cb-col-4”
}, {
“boxLabel”: “Item 5”,
“name”: “cb-col-5”
}, {
“boxLabel”: “Item 6”,
“name”: “cb-col-6”
}][/code]
Note que dessa forma que fiz a carga é feita somente uma vez, quando a página é carregada. Você pode melhorar isso, criando um componente próprio que ao ser instanciado faça esse serviço de carregar os dados. O checkboxGroupData.jsp é um jsp que contém o JSON que eu quero usar. Na sua solução, vc troca pelo caminho do seu provedor de JSON.
Eu normalmente gosto mais de usar a jQuery para trabalhar com Ajax, mas usando o ExtJS a forma é a que passei.
Note também que o caminho dos recursos ExtJS provavelmente é diferente do seu. Substitua então os caminhos das tags link e script para coincidir com a sua estrutura.
[]´s
Opa! Valeu pela dica David!
Resolveu meu problema. Pensei que todos os componentes permitiam uso de store.
Agora, como vc disse, pesquisei mais sobre isso e vi que somente grids, comboboxes e lists que permitem.
O que vc está usando para desenhar os forms?
Eu fiz o codigo abaixo pra dar uma acelerada aqui no meu trabalho:
/**
*
* @author LuizAugustoPrado www.codigorapido.com.br
*/
public class layout_sync
{
public static void main (String args[])
{
String v = "Nome: #_______________________# Idade:#______________________\n" +
"Xxxxxx: #__________________#Xxxxxxxxxx:#_______________________\n" +
"Xx: #________#Etc:#_______________\n";
String a[] = v.split ("\n");
int posicao_atual;
for(int i=0; i<a.length; i++)
{
String b[] = a[i].split ("#");
posicao_atual=0;
for(int j=0; j><b.length; j++)
{
//System.out.println (b[j] + " = " + b[j].length() );
if(b[j].charAt (0)!='_')
{
System.out.println (",{xtype: 'label', text: '"+b[j]+"', width: "+ b[j].length ()*8+ ", x:"+(posicao_atual+6)+", y:"+i*30+" }" );
posicao_atual += b[j].length ()*8;
}
else
{
System.out.println ( ",{ xtype: 'textfield', name: '___________', width: "+ ( (b[j].length ()+2)*8)+ ", x:"+posicao_atual+", y:"+i*30+" }" );
posicao_atual += (b[j].length ()+2)*8;
}
}
}
}
}
O layout da pagina aqui não permite visualizar que as strings que representam os componentes estão alinhados.
>
Oi Luiz,
Não entendi sua dúvida. O que você está fazendo com essa classe? Gerando JSON? Pq?
Eu trabalho com o ExtJS na mão mesmo, não uso nenhuma ferramenta a parte.
Não sei se já postei para você o link da ferramenta que reimplementei no mestrado. Foi feita usando ExtJS e jQuery. Dê uma olhada http://lia.dc.ufscar.br/cognitorweb/
[]´s
Quanto ao uso de stores, vários componentes tem essa capacidade: grids, lists, combos, trees, charts, etc. Vc precisa mesmo sempre dar uma olhada na documentação do ExtJS. Ela é muito boa. Demora um pouco para se acostumar com ela e para achar onde ficam os componentes e como navegar pela documentação de cada um, mas depois de se acostumar, você consegue se virar muito bem somente com ela. O fórum deles é muito bom tbm.
[]´s
Esta classe eu uso para gerar meus formularios.
Também faço tudo a mão, mas neste caso específico dos formularios eu criei este codigo para me ajudar.
Tava lendo este artigo:
http://www.extdesenv.com.br/noticias/razoes-para-comprar-o-ext-designer/
Como o mais chato, pra mim, era desenhar os formularios acho que não vou comprar esta licença mais porque estou usando esta classe acima.
Até hoje não vi nada free que faça os desenhos e fiquei curioso pra saber o que todos os que usam Ext estão fazendo pra acelerar no desenho do layout e outras coisas mais.
Free não tem mesmo.
Eu ainda nao entendi como vc usa essa classe. Vc gera os dados e copia e cola? É isso?
Eu uso o bloco de notas.
Digamos que vc quer varios componentes no formulario e alinhados.
ai, depois que eu fiz de um jeito que penso que ficou legal, eu colo em " String v = ".
por exemplo:
// o layout do GUJ pacere desalinhar os componentes aqui, mas no bloco de notas da certo
"Nome: #_______________________# Idade:#______________________\n" +
"Xxxxxx: #__________________#Xxxxxxxxxx:#_______________________\n" +
"Xx: #________#Etc:#_______________\n"; O # separa inicio e fim de componente de entrada dos labeis.
tudo o que não tiver entre # é label.
depois que as dimensoes e posições estão colocadas, eu só substituo o xtype pelo componente que eu quero e dou um name para que o submit encontre os componentes. Mas o mais chato, que é colocar os componentes nas posições e dimensões corretas, já passou. Desde o netbeans 4.0 que eu percebi que esta forma de fazer os formularios é mais rápida que arrastar os componentes para um palco e escrever suas propriedades.
tá vendo a linha 29 onde esta escrito “name: ‘___________’,” este espaço eu coloquei de proposito para ver que preciso por o name.
o xtype é o primeiro de cada componente.
exemplo de como ficou:
var teste=new Ext.form.FormPanel
({
bodyStyle: 'padding:5px 5px 5px 5px',
title: 'Meu titulo',
frame: true,
layout: 'absolute',
border: false,
items:
[
{xtype: 'label', text: 'Nome: ', width: 104, x:6, y:0 }
,{ xtype: 'textfield', name: '____id_nome_______', width: 200, x:104, y:0 }
,{xtype: 'label', text: ' Idade:', width: 56, x:310, y:0 }
,{ xtype: 'textfield', name: '____id_idade_______', width: 192, x:360, y:0 }
,{xtype: 'label', text: 'Xxxxxx: ', width: 104, x:6, y:30 }
,{ xtype: 'textfield', name: '_____id_xxxxxxxx______', width: 160, x:104, y:30 }
,{xtype: 'label', text: 'Xxxxxxxxxx:', width: 88, x:270, y:30 }
,{ xtype: 'textfield', name: '____id_xxxxxxxxxxx_______', width: 200, x:352, y:30 }
,{xtype: 'label', text: 'Xx: ', width: 104, x:6, y:60 }
,{ xtype: 'textfield', name: '____id_xx_______', width: 80, x:104, y:60 }
,{xtype: 'label', text: 'Etc:', width: 32, x:190, y:60 }
,{ xtype: 'textfield', name: '_____id_etc______', width: 136, x:216, y:60 }
]
})
é claro que não podemos esquecer de setar o layout do FormPanel como ‘absolute’
Oi Luiz,
Entendi o que você faz, apesar de útil, acho que você pode melhorar essa classe, além de seguir as convenções de codificação em Java: http://java.sun.com/docs/codeconv/CodeConventions.pdf
Dê uma lida 
[]´s
O que vc sugere de melhoria? Acho que podemos melhorar sim, mas isso eu só posso fazer de noite em casa.
Ainda não me adaptei as convenções do java e onde estou não posso me ater muito a estas convenções.
Sabe como é… em casa de ferreiro o espeto é de pau.
Você poderia criar uma interface gráfica para utilizá-la e melhorar a forma que os dados são gerenciados.
Mais tarde pode até virar um projeto maior
Quanto às convenções, se sua empresa possui um padrão, realmente vc vai precisar segui-lo. Mesmo assim, recomendo que você escreva seu código Java que não é da empresa baseando-se nas convenções.
[]´s
Olá pessoal!
Faz algum tempo que tive problemas em utilizar um Ext.form.FormPanel com layout absolute, mas consegui superar este problema como mostrado nete link:
http://www.guj.com.br/posts/list/224278.java
O codigo do Davidbuzatto é perfeito, mas não consigo faze-lo funcionar sem que o container do checkboxgroup esteja fora do corpo da estrutura:
Ext.Ajax.request({
url: 'checkboxGroupData.jsp',
success: function( response, options ) {
// sou obrigado acriar todos os componentes e containers aqui?
},
failure: function() {
alert( 'erro!' );
}
}); Mas no novo caso que estou trabalhando o load deve ser feito depois que o formulário tenha sido renderizado.
Gostei muito e estou estudando a classe Ext.ux.StoreGroup (http://blog.rkn.com.br/2009/11/ext-ux-storegroup-carregando-dependencias/), mas não consigo popular um checkboxgroup com um array de objetos json contendo uma lista de checkboxes. Tenho encontrado milhares de exemplos mostrando somente o load para a checagem de checkboxes já existentes:
http://www.sencha.com/forum/showthread.php?39161-2.1svn-2.2-Checkbox-RadioGroup-getName-getValue-return-nothing-isFormField-true/page3&s=575396222356bb2a6a2d2f445662faaf
utilizando a classe Ext.ux.StoreGroup aparentemente todos os items são inseridos no checkboxgroup, mas mesmo dando um doLayout e tutilizando deferredRender como false os checkboxes não aparecem. É estranho porque somente com checkboxgroup que isso ocorre. todos os outros tipos de componentes funcionam perfeitamente.
Alguem conhece algum link que possa me ajudar?