Caife Tecnologia

No meio deste ano criamos a Caife, empresa de desenvolvimento de sistemas (em ExtJS é claro) na nuvem, sistemas mobile (em Sencha Touch obviamente), deselvolvimento gráfico (2D e 3D) e aplicativos/jogos para as plataformas Android/IPhone(iOS).

Foi um longo trabalho, estamos terminado nossos primeiros projetos, adquirindo equipamentos, organizando as idéias e terminando nosso WebSite (www.caife.com.br). Devido a esta montanha de trabalho acabei me ausentando das postagens deste site mas tive muito tempo dedicado para aprender e aperfeiçoar meus conhecimentos em ExtJS, Sencha Touch e PHP, espero ter tempo para poder compartilha-los com vós por meio deste sitio na medida das minhas possibilidades.

Novo Escritório

Me mudei para a casa de um dos sócios da empresa (somos em 3), assim posso me dedicar mais tempo ao trabalho e ter mais tempo de lazer (CS, Left4Dead, PS3, Poker, Sinuquinha e Arco e Flecha) com os amigos no escritório-casa improvisado e temporário, hehehe.

Planos Para o Futuro

2011 ta ai, espero que seja um ano bem diferente do que passou, com mais tempo, mais dinheiro, menos dividas e mais preocupações (sim, essas nunca diminuem), assim quero voltar este blog a ativa, criar um blog para o ExtJS Brasil e tentar em fim dar continuidade a um site para nossa comunidade ExtJS Brasil.

Preparem-se, o ExtJS 4 está por vir e junto com ele espero que alguns screencasts pipoquem por aqui ou no “ExtJS BR Blog”, a comunidade está crescendo rápido, batemos alguns records nestes ultimo meses, temos quase 3mil membros cadastrados e prevejo que isto irá duplicar no próximo ano.

Logo virei com mais novidades pra lhes contar e entre estas alguns posts sobre ExtJS para reanimá-los.

Um GRANDE ABRAÇO a todos e BOAS FESTAS

Que venha 2011!!!

• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 03/03/2010 -- Ajude o fórum nacional de ExtJS a evoluir, faça uma doação! (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)
• 19/01/2010 -- HTML5, Video, Canvas e ExtJS (0)
• 19/01/2010 -- ExtJS 3.1.1 beta Lançado (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)

Novamente postado no Vimeo, espero que gostem.

Aproveitem o filme. Abraços.

• 02/03/2010 -- ScreenCast – Introdução ao FIREBUG (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 18/02/2010 -- ScreenCast – Estudo sobre Layouts(Fit, HBox e VBox) (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 19/01/2010 -- HTML5, Video, Canvas e ExtJS (0)
• 19/01/2010 -- ExtJS 3.1.1 beta Lançado (0)

Muitos de vocês provavelmente notaram que este blog ficou off neste final de semana, tive problemas com minha hospedagem, era pra ser trafego ilimitado mas estourou o limite e o site saiu do ar. Muitos podem ter pensado que o site tinha sido hackeado, bom eu também achei porque havia um texto meio estranho sobre uma tal ilha, mas felizmente não foi este o caso, descobri o problema neste domingo e até o momento não consegui acessar o ftp do blog, graças a deus eu tinha um backup dos dados e dos arquivos e pude mudar de servidor hoje, segunda-feira.

Bom, agora irei começar a postar os ScreenCasts no Vimeo para não ter mais problemas de trafego, espero que todos entendam.

Grande Abraço a Todos.

• Sem Posts Relacionados

inciamos uma campanha de doação no fórum extjs.com.br para que possamos evoluir mais rapidamente. Gostaria que quem puder ajudar o faça, tenho certeza que assim poderemos crescer e difundir mais essa tecnologia e também teremos uma melhor estrutura para ajudar a todos.

Mais informações no seguinte tópico http://www.extjs.com.br/forum/index.php?topic=3091.0

Agradeço a ajuda de todos.

Forte abraço.

• 21/12/2010 -- Novidades, mudanças e um novo ano (0)

Bom, aconselho baixarem o vídeo pra assistir, o melhor é o MP4, ele tem uma resolução melhor.

Devido a problemas de limite de Transferencia do meu Host passei os screencasts para o vimeo.

Aproveitem o filme. Abraços.

• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 18/02/2010 -- ScreenCast – Estudo sobre Layouts(Fit, HBox e VBox) (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)

• Sem Posts Relacionados

EDITADO
Bom, vou posta-los aqui em HTML5, se seu browser não for compatível tome vergonha na cara e arrume um que seja. Postarei em mp4 e ogg (to tendo problemas com ogg, mas a prática leva a perfeição) já que os browsers não padronizaram um codec para isso se você não conseguir ver no Firefox abra no Chrome ou no Safari (não testei) que rodam o mp4 (formato original do vídeo).

Tive problemas de Limite de Trafego no meu host recentemente, por isso decidi postar os screencasts no vimeo, não sei se isso é melhor ou pior mas foi o jeito.
Grande Abraço

Poltronas ajeitadas, pipocas e refrigerantes apostos? Então ta esperando o que pra dar o Play?

• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 02/03/2010 -- ScreenCast – Introdução ao FIREBUG (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)
• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)

1. Listar os dados de uma tabela num banco MySQL em um grid comum;
2. Adicionar paginação neste grid da parte 1;
3. Adicionar as funcionalidades de “Adição, Alteração e Deleção” a parte 2, sendo feita a adição e edição através de um FormPanel.

Disponibilizarei aqui apenas um ZIP com as 3 etapas, cada etapa está em uma pasta distinta com seus arquivos .js, .css e .php, junto a estas pastas está um arquivo .sql contendo o banco de dados. Não colocarei online por não poder criar mais um banco de dados aqui neste servidor, mas acredito que quem realmente deseja aprender pode baixar e testar por si próprio.

Procurei comentar bem o código e cada etapa nova comente apenas o que mudou no código, tentei ser bem explicito. Um desses exemplos pode servir de base para a criação das telas para quem está iniciando.

Para executar este exemplo baixe a versão 3.1.1 do ExtJS ou uma mais nova e coloque as 3 pastas dentro da pasta examples da biblioteca. O banco que usei foi o MySQL porque a maioria de vocês o usa e usei a ferramenta MySQL Administrator para gerar o backup do banco.

Gostaria de salientar também que usei de um de meus overrides neste exemplo, o override que cria colunas facilmente em forms, ele não está incluso no arquivo ZIP e não usá-lo não gera problema algum, só os campos que ficarão um abaixo do outro.

Abaixo um print das 3 telas em ordem de evolução:

Aqui um print da terceira parte com o formulário aberto em Alteração:

E por fim o link para download do arquivo ZIP:

DOWNLOAD

• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)
• 19/01/2010 -- HTML5, Video, Canvas e ExtJS (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)
• 25/11/2009 -- Form Override: Criando colunas facilmente [ExtJS 3.0.X] (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 02/03/2010 -- ScreenCast – Introdução ao FIREBUG (0)

Ops, já tinha esquecido do link.

Compare JavaScript frameworks

• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)
• 19/01/2010 -- HTML5, Video, Canvas e ExtJS (0)
• 19/01/2010 -- ExtJS 3.1.1 beta Lançado (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)
• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)

Versão 1.0.0.1 disponível no link abaixo. Agora o gadget se mantém no tamanho configurado pelos botões de redimensionamento contidos na barra do topo.

E ai galera, estamos ai denovo e dessa vez com uma novidade, bom, pelo menos pra mim foi uma novidade. Um dia dessas “redescobri” o blog do Jack Slocum, o criador do ExtJS, e la visualizei um post de 15 de Fevereiro de 2008, eu sei, é antigo pacas, que falava sobre um Gadget feito em ExtJS pelo próprio Slocum, achei aquilo D+ e acabei me inspirando. Resultado, fiz um, melhor, modifiquei o dele pra Ext3.1.1 (era Ext2.0) e coloquei um tema mais light.

Mas ainda nem comentei do tal Gadget, o gadget do Slocum pega os últimos posts do fórum grindo e mostra usando um Grid do ExtJS e usando o Ajax do mesmo, o que fiz foi mudar pra pegar do nosso amado fórum nacional, deu um belo trabalho e vou citar aqui alguns pontos:

• Eu não sabia p* nenhuma dessa plataforma de gadgets. =/
• A API de gadgets do windows é uma m*, tem pouquíssimas funcionalidades.
• O arquivo .gadget nada mais é que um .zip renomeado com os arquivos dentro, bom pra estudar um gadget, um saco pra ficar testando, ficar zipando tudo é um saco e olha que eu fiz um .bat pra automatizar mas o WinZip é trial e fica enchendo o saco, debugar erros então… adivinha, até tem como, mas é como os erros do IE, não ajudam muito. Em resumo, pra ir alterando e testando o cara tem que ter paciência de sobra.
• Como disse a API é limitada, temos apenas 2 opções de tamanho, tive que criar uns botões bem feios pra poder mudar isso.
• O gadget deve funcionar em Win Vista e 7, digo deve porque só tenho o Win 7, mas segundo a M$ o que roda num roda no outro.
• Meu Win 7 insiste em travar, principalmente quando estou com coisas não salvas. “Tenso”
• O SMF, nosso fórum brasileiro, não nos da suporte a posts por JSON, apenas temos o RSS em xml, tive que procurar, aprender e adicionar uma funcionalidade ao fórum pra retornar o que seria em xml em JSON também. É, eu mexi no código, acho que ninguém vai ficar chateado com isso, afinal, se eu tenho acesso ao ftp é pra fazer algo que preste né não?

Bom, claro que os crédito vão para o Jack Slocum, mas eu quero um pouco também, pode não ser algo que ajude os Desenv. ExtJS a ficarem ricos mas é bacana criar algo novo, saber algo novo e principalmente poder dizer “fui eu que fiz, sabia?” hehehe.

O mais importante de tudo é que todos que passarem por aqui vão poder além de utiliza-lo estuda-lo. Qualquer opinião/sugestão comentem ai, prefira as construtivas ok?

Ah, ia esquecendo, sei que alguns de vocês vão pensar “Mas que porra é essa? E os posts que ele tinha prometido pra depois das férias que tem utilidade pra mim?”, é que não pude aguentar, tive que fazer esse gadget, relaxem, os outros posts virão com certeza.

Vocês querem o link pra download né? Ta bom, eu zipei pra diminuir ainda mais o tamanho, deszip que terás o .gadget, que como disse também é um zip, ta ai:

DONWLOAD

• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)
• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 18/02/2010 -- ScreenCast – Estudo sobre Layouts(Fit, HBox e VBox) (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)
• 19/01/2010 -- HTML5, Video, Canvas e ExtJS (0)

http://extjs.fudini.net/

• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)
• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 18/02/2010 -- ScreenCast – Estudo sobre Layouts(Fit, HBox e VBox) (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)
• 19/01/2010 -- HTML5, Video, Canvas e ExtJS (0)

Como havia prometido no post Saindo de Férias, sem pânico, eu já volto estou começando uma série de posts dedicados aos iniciantes em ExtJS e também aos iniciantes em JavaScript e quem sabe alguns posts sobre PHP, SQL, Linux, etc… Queria pedir a todos que acompanham este blog que deem suas opiniões nos comentários, sugestões a respeito do blog e principalmente sugestões de conteúdos que deveriam ser abordados.

Visão geral do problema

Vírgulas são um problema real e constante no ExtJS, digo ExtJS pelo fato de usarmos muitos objetos, sendo objetos físicos ou objetos anônimos como passagem de configurações mas vale para qualquer biblioteca JavaScript ou a programação pura em JavaScript.

Linguagem interpretada

Como todos sabem, ou pelo menos deveriam saber, o nosso amado JS é uma linguagem que é interpretada na hora da execução e o pior de tudo, ela é interpretada por vários motores diferentes e cada browser pode trata-la de forma diferente.

Formato do Objeto em JS

Um objeto em JavaScript segue a simples lógica de pares de valores separados por virgular entre colchetes, cada par de valor é formado por um nome de propriedade e um valor separados por dois pontos (:), ou seja:

{prop1:val1, prop2:val2, prop3:val3}

Aprendermos com o passar do tempo que temos de formatar nosso código para um melhor intendimento e esse processo chamamos de itentação, vamos a um exemplo:

{
	prop1:val1,
	prop2:val2,
	prop3:val3
}

Ótimo, agora temos um objeto um pouco mais organizado, o problema agora é que fica fácil adicionar uma nova propriedade ou até mesmo retirar ou comentar uma destas e essa facilidade nos remete ao erro, exemplo:

• Adicionando – Note que a penúltima propriedade fica sem a virgula no final por um leve esquecimento do programador

{
	prop1:val1,
	prop2:val2,
	prop3:val3   // <== Erro
	prop4:val4   // <== Vai dar pau aqui, pq? pq pro navegador deveria ter
	             // acabado no item anterior ou seja o cara errado é esse último item.
}

• Removendo – Note que a última propriedade contém uma virgula no final também por um leve esquecimento do programador

{
	prop1:val1,
	prop2:val2,  // <== Pro navegador isso indica que deveria ter mais
	             // propriedades depois destao que não é verdade, alguns
	             // navegadores aceitam isso numa boa, mas o IE não é um
	             // desses caras legais.
}

• Comentando – Note que acabamos por ter o mesmo erro do item anterior

{
	prop1:val1,
	prop2:val2,
	//prop3:val3
}

Solução

Bom, tenho certeza que você que leu até aqui acredita que possa existir uma solução para esse problema, bom, sinto lhe dizer que não, não tem.

Algumas pessoas passaram a usar a virgula antes das propriedades de modo a não esquece-las, tudo bem, ajuda, mas não resolve, continuamos tendo os mesmo problemas, antes tínhamos problemas com a última propriedade agora temos problemas com a primeira:

• Adicionando – Note que a última propriedade fica sem a virgula antes, mas com certeza é muito mais difícil esquecer neste caso do que no caso anterior

{
	prop1:val1
	,prop2:val2
	,prop3:val3
	prop4:val4   // <== Aqui o programador tem que ter um sério problema de
	             // esquecimento.
}

• Removendo – Aqui se deletarmos o primeiro item e esquecermos de tirar a virgula do segundo temos um sério problema

{
	,prop2:val2  // <== É como se tivéssemos um item vazio antes destes 2 e isso gera erro
	,prop3:val3  // em qualquer navegador, pior que o erro do estudo anterior.
}

• Comentando – Note que acabamos por ter o mesmo erro do item anterior

{
	//prop1:val1
	,prop2:val2
	,prop3:val3
}

Conclusão

Usar a virgula na frente das propriedades de um objeto é sim uma boa prática mas ela só adianta quando temos um código bem identado e garanto que não livra ninguém dos erros com vírgulas, essa metodologia nos ajuda na hora de adicionar propriedades e comentar propriedades, mas temos que tomar muito cuidado com a primeira propriedade.

Em resumo, eu uso a virgula depois das propriedades, é questão de gosto, o importante é saber como procurar os erros e estar ciente de que o erro pode ser uma simples vírgula, escolha a metodologia que melhor lhe agrade, use o firebug, persista na procura do erro e tudo dará certo.

Um programador tem que ser 33% bom em programação e 67% bom em achar erros. É errando que se aprende.

• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 02/03/2010 -- ScreenCast – Introdução ao FIREBUG (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 19/01/2010 -- HTML5, Video, Canvas e ExtJS (0)
• 19/01/2010 -- ExtJS 3.1.1 beta Lançado (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)

to saindo de férias, e sim, estou indo para Brasília como podem perceber na imagem do post, quem quiser um político pede ai nos comentários que eu trago de presente, quem sabe vem com uma meia bem gordinha né. Mas não se desesperem que logo logo to de volta, mais especificamente dia 5/2, manterei contato, afinal a internet lá deve ser melhor do que a daqui do interior do RS.

Para os anciosos e curiosos preparei uma lista dos posts que estão aqui nos meus rascunhos e que devem ganhar o mundo, espero eu, após as minhas merecidas férias. São eles:

• ItemId, uma novidade muito útil

Essa é uma novidade muito legal do Ext 3.x, ela nos permite usar ids iguais para items com pais diferentes. Vamos deixar as explicações para o post certo? Ok.

• Vírgulas, um problema constante em JavaScript

Bom, essa á uma grande vilã do programador JavaScript, no início ela nos pega de jeito, mas com o tempo nos acustumamos, claro, existem conselhos que podemos dar aos iniciantes para que possam ter uma vida conjugal mais amigável com a bendita virgula.

• Criando um CRUD usando apenas um GRID

Mais um pra série “Iniciando no ExtJS”. Pretendo criar aqui um bom exemplo em Ext e PHP, bem comentado para aqueles que ainda estão estudando a biblioteca.

• Que diabos é JSON? Conheça melhor esta notação

Outro post da série “Iniciando no ExtJS”, se bem que ta mais pra “Iniciando no javaScript” mas blz. Exemplos, dicas, essas coisas.

• Interação entre uma Window e um Iframe contido na mesma

Esse assunto surgiu como uma duvida de um dos integrandes do fórum, resolvemos por msn mesmo e achei interessante compartilhar, como manipular uma window que contém um iframe de dentro da página que é carregada dentro do iframe. Aguardem…

• brMoney – Formatando números em Reais

Uma função de formatação de números em Reais, permitindo formatar valores em grids facilmente.

• Cursos/Consultorias via Skype

Bom, pretendo que logo possa disponibilizar este post informando os valores e datas disponiveis para que os mais necessitados possam tirar suas duvidas ou ter aulas via Skype e compartilhamento de tela. A melhor forma de se aprender é ter um instrutor, como cursos de Ext aqui no Brasil estão meio escassos, acredito que seja uma boa iniciativa.

• formExtraOverride: Adicionando algumas funcionalidades ao FormPanel

Mais um override pra lista, esse aqui adiciona algumas facilidades ao form e seus fields, para navegação e outras coisas mais.

• Compare – VType de comparação de campos

Como prometido no fórum, um vtype de comparação entre 2 campos, email, senha, etc, com um diferencial, a forma de ligar um campo ao outro, sendo assim, uma das formas depende do override citado acima.

• Store: InsertRecord e getChanges

Outro override pra lista, esse adiciona 2 métodos ao store, InsertRecord que facilita a inserção de registros no grid e getChanges que facilita a recuperação dos registros alterados.

• Como usar overrides no ExtJS

Mais pra série “Iniciando no ExtJS”, mostrando qual a melhor forma de usar os overrides encontrados por ai.

Bom, é isso, a lista é longa, vamos torcer para que o tempo seja nosso aliado. E claro, mais novidades estão por vir para a comunidade ExtJSBR, mas isso já é segredo.

Grande abraços a todos. Até logo.

• Sem Posts Relacionados

No blog do site official do ExtJS tem um posto sobre este tema.

Os caras lá criaram código que permite ao usuário visualizar um preview de um video que está rodando dentro de uma janela passando o mouse em cima do botão desta janela. Bem estilo Vista e Windows 7. Achei bem bacana, não pela ideia que já está mais do que conhecida, mas por ser um exemplo fantastico da utilização da tag <video> e do objeto canvas do JavaScript.

Link do post no fórum oficial: http://www.extjs.com/blog/2010/01/14/html5-video-canvas-extjs/

Link do exemplo rodando: http://xant.us/ext-ux/lib/ext-3.0.0/examples/desktop/desktop.html

Vou me deter por aqui, quem quiser analisar o código sugiro dar uma olhada no post official.

Abraços

• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)
• 19/01/2010 -- ExtJS 3.1.1 beta Lançado (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)
• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)

A versão ExtJS 3.1.1-beta está disponivel para testes em: http://www.extjs.com/deploy/ext-3.1.1-beta/

Você pode baixar esta  versão em: http://www.extjs.com/deploy/ext-3.1.1-beta_5899-129.zip

Esta versão é BETA e não foi completamente testada nem está pronta para uso em ambiente de produção. Se quiser contribuir reporte qualquer problema que achar ao fórum gringo do Ext na área de Bugs com a tag [3.1.1-beta] então eles podem resolver estes problemas o mais rápido possível para a versão final. Assim que a versão oficial estiver pronta será disponibilizada na página principal do site gringo do ExtJS e eu criarei um post aqui a respeito.

O comunidade ExtJS agradece sua contribuição

• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)
• 19/01/2010 -- HTML5, Video, Canvas e ExtJS (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)
• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)

Componente:

/**
  * Ext.ux.form.RCheckbox - checkbox com valor de submit configurável
  *
  * @author  Rodrigo Krummenauer do Nascimento
  * @version 0.0.1
  * @date    14/01/2010
  *
  * @obs Testado na versão 3.0.0 da biblioteca ExtJS. UX inspirado no UX
  * XCheckbox de autoria de Ing. Jozef Sakalos.
  *
  * @license Open Source LGPL 3.0 license.
  * License details: http://www.gnu.org/licenses/lgpl.html
  */

/**
  * @class Ext.ux.RCheckbox
  * @extends Ext.form.Checkbox
  */
Ext.ns('Ext.ux.form');
Ext.ux.form.RCheckbox = Ext.extend(Ext.form.Checkbox, {
	uncheckedValue:false,
	checkedValue  :true,

	onRender:function() {
		Ext.ux.form.RCheckbox.superclass.onRender.apply(this, arguments);

		//Cria um campo hidden para conter o valor a ser enviado
		this.hiddenField = this.wrap.insertFirst({tag:'input', type:'hidden'});
		//Atribui o nome do checkbox ao campo hidden
		this.hiddenField.dom.name = this.el.dom.name;
		//Retira o campo nome do checkbox para enviar apenas o campo hidden
		this.el.dom.name = '';

		this.updateHidden();
	},
	setValue:function(v) {
		Ext.ux.form.RCheckbox.superclass.setValue.apply(this, arguments);
		this.updateHidden();
	},
	updateHidden:function(v) {
		if(this.hiddenField) {
			this.hiddenField.dom.value = this.checked ? this.checkedValue : this.uncheckedValue;
		}
	}
});
Ext.reg('rcheckbox', Ext.ux.form.RCheckbox);

Como vocês podem perceber o valor de envio é configurável, pode ser alterado diretamente no UX o que afeta todos os RCheckbox criados ou podem ser definidos em cada componente criado.

Exemplo:

Ext.onReady(function(){
	Ext.form.FormPanel.prototype.bodyStyle = 'padding:10px';
	Ext.ux.form.RCheckbox.prototype.hideLabel = true;

	var win = new Ext.Window({
		height: 210,
		width: 600,
		layout: 'fit',
		title: 'Ext.ux.form.RCheckbox',
		items:[{
			xtype: 'form',
			labelWidth: 60,
			layout: 'hbox',
			items: [{
				xtype: 'fieldset',
				title: 'Linguegens',
				flex: 1,
				items: [{
					xtype: 'rcheckbox',
					checked: true,
					boxLabel: 'PHP',
					name: 'php'
				},{
					xtype: 'rcheckbox',
					boxLabel: 'ASP',
					name: 'asp'
				},{
					xtype: 'rcheckbox',
					boxLabel: 'JSP',
					name: 'jsp'
				}]
			},{
				xtype: 'fieldset',
				title: 'Banco de Dados',
				flex: 1,
				items: [{
					xtype: 'rcheckbox',
					checked: true,
					boxLabel: 'PostgreSQL',
					name: 'postgresql'
				},{
					xtype: 'rcheckbox',
					boxLabel: 'FireBird',
					name: 'firebird'
				},{
					xtype: 'rcheckbox',
					boxLabel: 'Oracle',
					name: 'oracle'
				}]
			},{
				xtype: 'fieldset',
				title: 'Browsers',
				flex: 1,
				items: [{
					xtype: 'rcheckbox',
					checked: true,
					uncheckedValue: 'off',
					checkedValue: 'on',
					boxLabel: 'Firefox',
					name: 'firefox'
				},{
					xtype: 'rcheckbox',
					checked: true,
					uncheckedValue: 'off',
					checkedValue: 'on',
					boxLabel: 'Chrome',
					name: 'chrome'
				},{
					xtype: 'rcheckbox',
					uncheckedValue: 'off',
					checkedValue: 'on',
					boxLabel: 'IEca',
					name: 'ieca'
				}]
			}]
		}],
		buttons:[{
			text:'Salvar',
			handler: function(){
				alert(Ext.encode(win.items.items[0].getForm().getValues()))
				win.items.items[0].getForm().submit({url:'123.php'})
			}
		},{
			text:'Cancelar'
		}]
	})
	win.show();
})

Exmeplo Online

ZIP Com os Arquivos

• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 27/11/2009 -- Ext.ux.StoreGroup – Carregando Dependências (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 18/02/2010 -- ScreenCast – Estudo sobre Layouts(Fit, HBox e VBox) (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 08/02/2010 -- Vírgulas, um problema constante em JavaScript (0)

Bom, mais uma contribuição pra comunidade.

Este override permite criar colunas com checkbox facilmente em um grid, basta a coluna estar ligada a um campo booleano e ter a propriedade checkbox:true, para tornar esta coluna editável basta atribuir a propriedade editor:true para a mesma.

Sem mais delongas vamos ao código:

Override:

Ext.override(Ext.grid.ColumnModel, {
	setConfig: Ext.grid.ColumnModel.prototype.setConfig.createSequence(function(config, initial){
		for(var i = 0, len = config.length; i < len; i++){
			var c = config[i];
			if(c.checkbox){
				c.id = c.dataIndex;
				c.align = c.align || 'center';
				if(c.editor){
					c.renderer = this.rendererCheckEditable;
				}else{
					c.renderer = this.rendererCheck;
				}
			}
		}
	}),
	rendererCheck: function(v, p, record){
		p.css += ' x-grid3-check-col-td';
		return '<div class="x-grid3-check-col' + (v ? '-on' : '') + ' x-grid3-col-' + this.id + '" idCol="'+this.id+'" editable="false">&#160;</div>';
	},
	rendererCheckEditable: function(v, p, record){
		p.css += ' x-grid3-check-col-td';
		return '<div class="x-grid3-check-col' + (v ? '-on' : '') + ' x-grid3-col-' + this.id + '" idCol="'+this.id+'" editable="true">&#160;</div>';
	},
	onMouseDown: function(e, t){
		if (t.className && t.className.indexOf('x-grid3-check-col') != -1) {
			e.stopEvent();
			if(t.getAttribute('editable')=='true'){
				var index = this.grid.getView().findRowIndex(t);
				var record = this.grid.store.getAt(index);
				var idCol = t.getAttribute('idcol');
				record.set(idCol, !record.data[idCol]);
				var o = {
					grid: this.grid,
					record: record,
					field: idCol,
					value: record.data[idCol],
					originalValue: !record.data[idCol],
					row: index,
					column: this.grid.getView().findHeaderIndex(t)
				}
				this.grid.fireEvent('afteredit', o);
			}
		}
	}
})

Ext.override(Ext.grid.GridPanel, {
	onRender: Ext.grid.GridPanel.prototype.onRender.createSequence(function(ct, position){
		this.colModel.grid = this;
		if(this.isEditor){
			var view = this.getView();
			view.mainBody.on('mousedown', this.colModel.onMouseDown, this.colModel);
		}
		var view = this.getView();
		var hmenu = view.hmenu;
		if (!view.menuCheck){
			view.sep  = hmenu.addSeparator();
			view.menuCheck = hmenu.add({
				text: 'Marcar Todos',
				itemId: 'selectAll',
				iconCls: 'x-grid3-check-col-on',
				scope: this,
				handler: function(){
					this.getStore().data.each(function(item){
						item.set(view.cm.config[view.hdCtxIndex].dataIndex, true);
					})
				}
			});
			view.menuUnCheck = hmenu.add({
				text: 'Desmarcar Todos',
				itemId: 'unselectAll',
				iconCls: 'x-grid3-check-col',
				scope: this,
				handler: function(){
					this.getStore().data.each(function(item){
						item.set(view.cm.config[view.hdCtxIndex].dataIndex, false);
					})
				}
			});
		}
		hmenu.on('beforeshow', function(){
			var visible = view.cm.config[view.hdCtxIndex].checkbox && view.cm.config[view.hdCtxIndex].editor;
			view.menuCheck.setVisible(visible);
			view.menuUnCheck.setVisible(visible);
			view.sep.setVisible(visible);
		}, this);
	})
})

Exemplo:

Ext.onReady(function(){

	var win = new Ext.Window({
		height: 240,
		width: 620,
		layout: 'fit',
		title: 'Override GridPanel/ColumnModel, Colunas Checkbox',
		items:[{
			xtype: 'editorgrid',
			labelWidth: 60,
			store: new Ext.data.ArrayStore({
				fields: [
					'nome',
					{name:'ativo'   , type:'bool'},
					{name:'politico', type:'bool'},
					{name:'corrupto', type:'bool'}
				],
				data: [
					['João'     , true , true, true],
					['Zé'       , false, true, true],
					['Chico'    , true , true, true],
					['Aureliano', true , true, true],
					['Zulu'     , true , true, false]
				]
			}),
			columns:[
				{dataIndex:'nome'    , header:'Nome'},
				{dataIndex:'ativo'   , header:'Ativo'   , checkbox:true, editor:true},
				{dataIndex:'politico', header:'Político', checkbox:true, editor:false},
				{dataIndex:'corrupto', header:'Corrupto', checkbox:true, editor:true}
			],
			listeners:{
				afteredit:function(o){
					//Evento disparado ao fim da edição de qualquer campo no grid.
				}
			}
		}],
		buttons:[{
			text:'Salvar'
		},{
			text:'Cancelar'
		}]
	})
	win.show();
})

Exemplo Online

ZIP Com os Arquivos

• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)
• 25/11/2009 -- Form Override: Criando colunas facilmente [ExtJS 3.0.X] (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)
• 07/12/2009 -- Override Store: Função de validação de dados nos campos (0)
• 06/12/2009 -- Campos Calculados: Criando campos de dados em tempo de execução [ExtJS 3.0.X] (0)
• 27/11/2009 -- Ext.ux.StoreGroup – Carregando Dependências (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)

Boas Festas a todos.

• Sem Posts Relacionados

História:

Bom, pra variar tive essa necessidade ao desenvolver uma tela onde havia um Grid editável, era uma tela de contas a pagar e de acordo com meu cliente o usuário deveria ser obrigado a informar 2 campos, “data de pagamento” e “pago”, onde um era um campo de data e outro uma coluna CheckBox, se a “data de pagamento” fosse informada o usuário deveria marcar a coluna “pago” e se a coluna “pago” estivesse marcada o usuário deveria informar a “data de pagamento”.

Assim resolvi criar uma forma de validar os dados diretamente no Store e que funcionasse de forma parecida a validação de campos no formulário de forma que o programador pudesse informar uma função de validação para cada campo ou passar o nome de uma função de validação interna.

Detalhes:

Juntamente aos demais parâmetros que passamos para cada campo no Store podemos passar o seguinte parâmetro:

• validator{Function/String}: Função de validação podendo ser uma função criada pelo programador ou uma string indicando o nome de uma função interna, as funções internas são:
  • notblank: O campo é considerado inválido caso seja igual a (”, null ou undefined).

Novo método no Store:

• validator: este novo método executa a validação de cada registro do Store passando por todos os campos e retorna true caso todos estejam válidos, se algum campo estiver inválido a verificação é interrompida neste primeiro erro e é retornado um objeto contendo o registro (Record) e o campo (Field) do erro.
  • Parâmetros:
    • Nenhum.
  • Retorno:
    • Object
      • record: registro do erro;
      • field: campo do erro.

Override:

Ext.override(Ext.data.Store, {
	validateFn: {
		notblank: function(v){
			return v !== null && v !== '' && v !== undefined;
		}
	},
	validate: function(){
		var r = true;
		var result = null;
		Ext.each(this.fields.items, function(i){
			if(typeof i.validator == 'string'){
				i.validator = this.validateFn[i.validator];
			}
			if(typeof i.validator == 'function'){
				Ext.each(this.data.items, function(d){
					r = i.validator(d.get(i.name), d);
					result = {record: d, field: i};
					return r;
				},this)
				return r;
			}
		},this)
		return r || result;
	}
})

Exemplo:

Ext.onReady(function(){
	var win = new Ext.Window({
		height: 240,
		width: 620,
		layout: 'fit',
		title: 'Override Store - Função de validação de dados nos campos',
		items:[{
			xtype: 'editorgrid',
			id: 'gridExemplo',
			store: new Ext.data.JsonStore({
				fields:[
					{
						name: 'nome'
					},{
						name: 'sobrenome',
						displayName: 'Sobrenome',
						validator: 'notblank'
					}
				],
				data: [
					{nome: 'Rodrigo', sobrenome:'Nascimento'},
					{nome: 'Vera'   , sobrenome:'Elizabete'},
					{nome: 'Jéssica', sobrenome:'Fischer'},
					{nome: 'Tiago'  , sobrenome:''}
				]
			}),
			columns:[
				{
					header: 'Nome',
					width: 450,
					sortable: true,
					dataIndex: 'nome'
				},{
					header: 'Sobrenome',
					width: 130,
					sortable: true,
					dataIndex: 'sobrenome',
					editor: new Ext.form.TextField()
				}
			]
		}],
		buttons:[{
			text: 'Salvar',
			handler: function(){
				var r = Ext.getCmp('gridExemplo').getStore().validate();
				if(r === true){
					Ext.Msg.alert('Exemplo','Enviando dados...');
				}else{
					Ext.Msg.alert('Exemplo','Dados incorretos na coluna '+r.field.displayName);
				}
			}
		},{
			text: 'Cancelar',
			handler: function(){
				win.close();
			}
		}]
	})
	win.show();
})

Exemplo Onlie

• 06/12/2009 -- Campos Calculados: Criando campos de dados em tempo de execução [ExtJS 3.0.X] (0)
• 27/11/2009 -- Ext.ux.StoreGroup – Carregando Dependências (0)
• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)
• 25/11/2009 -- Form Override: Criando colunas facilmente [ExtJS 3.0.X] (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)

História:

Como sempre ao desenvolver meus sistemas em determinado momento tive a necessidade de implementar uma coluna em grid editável que fosse o resultado de um cálculo entre outras 3 colunas, este campo deveria ser recalculado caso um dos 3 campos fosse modificado e deveria ser possível ordenar por este campo, eu já estava acostumado com esta abordagem por trabalhar com Delphi anteriormente, sendo assim fui a busca de uma solução no mestre Google e encontrei este post no fórum americano que criava o tal campo calculado.

Até ai tudo certo, mas quando resolvi criar este post o assunto era outro, era apenas Lookup no grid, um override no GridView que permitia mostrar um campo de outro Store em uma coluna que contivesse o código para a ligação, ou seja, poderíamos mostrar o nome da cidade no lugar do código, quando me deparei com uma solução melhor para este problema, esta solução seria juntar os campos calculados com o Lookup permitindo além de criar os tais campos calculados criar também campos que busquem dados de outro Store de acordo com uma ligação, assim criamos um novo campo, como por exemplo um campo “cidade” que recebe o nome da cidade ligando o campo “cid_id” do Store principal a um Store que contenha o código e nome das cidades.

Então resolvi reescrever todo o código deste override e permitir novos parâmetros nos campos do Store para a criação de campos calculados e campos Lookup.

Detalhes:

Vantagens do Lookup como campo calculado:

• Permite ordenação, o Lookup no grid usando o render ordena a coluna pelo seu valor real, o código, o campo calculado é um campo real que contém um valor x, neste caso a descrição de um código.
• Mais leve, a operação de busca da descrição em outro Store acontece apenas na criação de cada registro e na modificação do código atualizando apenas o registro modificado, usando render a busca da descrição ocorreria a cada refresh da view, em ordenações de colunas, inserção de registro, deleção de registro etc…

Abaixo separo as propriedades que podem ser usadas em cada um dos 2 casos, campo calculado ou lookup, por não serem usadas no mesmo campo ao mesmo tempo. A propriedade dependencies pode ser usada para ambos.

Propriedades novas nos campos do Store para campos calculados:

• dependencies{Array/String}: Um campo ou um array de campos que quando alterados forçam o recalculo do campo atual, exemplo: No caso de da multiplicação de quantidade e valor de um produto para gerar um campo total se um desses campos for alterado o total deve ser recalculado;
• calc{Function/String}: Função que recebe o campo e o record como parâmetros e retorna o calculo do campo, podemos passar uma função de calculo personalizado ou usar algumas funções predefinidas dentro do override passando seu nome como string, nas funções predefinidas os campos executados no calculo são os campos listados em dependencies:
  • Function(record, field): O retorno deve ser o valor a ser adicionado ao campo;
  • String: funções predefinidas:
    • sum: soma todos os campos definidos em dependencies;
    • mult: multiplica todos os campos definidos em dependencies;
    • sub: subtrai os campos definidos em dependencies em ordem, 1º – 2º – 3º – 4º …;
    • div: divide os campos definidos em dependencies em ordem, (((1º / 2º) / 3º) – 4º) …;
    • avg: retorna o valor médio de todos os campos definidos em dependencies;
    • min: retorna o menor valor de todos os campos definidos em dependencies;
    • max: retorna o maior valorde  todos os campos definidos em dependencies;

Propriedades novas nos campos do Store para Lookup:

• lookupStore{Object}: Store a ser ligado, Store remoto;
• lookupField{String}: Campos de ligação, ‘campoLocal;campoRemoto’, caso seja informado apenas um campo, ‘campoLocalRemoto’, este será considerado como o mesmo nome em ambos os Stores. Aqui definimos que campos ligamos em cada Store, exemplo, campo “cid_id” no Store local e “id” no Store de cidades ficaria ‘cid_id;id’, se ambos fossem “cid_id” poderíamos usar “cid_id;cid_id” ou simplesmente “cid_id”;
• displayField{String}: Campo do Store remoto a ser trazido para este campo calculado, exemplo, “cid_descricao”, caso este campo não seja informado será usada a propriedade name, ou seja, se pudermos definir o campo do Store local com o name igual ao campo a ser trazido do Store remoto podemos omitir este campo;
• displayTemplate{String}: Aqui definimos um template de como queremos trazer os dados do Store remoto, podemos definir quais campos e o formato onde temos lookupField como o campo local, ou seja, o código e displayField como o campo definido na propriedade acima, além destes podemos adicionar qualquer campo do Store remoto, exemplo: ‘<b>{lookupField} -</b> {displayField}’ retornaria algo do tipo ‘1 – Porto Alegre’. Padrão: ‘{displayField}’;
• dependencies{Array/String}: Lista de dependencias que ao serem alteradas forçam este campo a buscar novamente o displayField no Store remoto, normalmente usamos o campo de ligação (lookupField) que ao ser alterado devemos buscar sua descrição novamente.

OBS: No caso de Lookup se modificarmos o campo o valor será atribuído ao LookupField, ou seja, no caso de um campo “cid_descricao” que seja lookup ao campo “cid_id” se atribuirmos um valor a “cid_descricao” este será atribuido ao campo “cid_id”, ou seja, se colocarmos um combobox de em um EditorGrid este alterará o campo certo, o campo de código.

Override:

Ext.override(Ext.data.Record, {
	dependents:{},
	join: Ext.data.Record.prototype.join.createSequence(function(){
		this.ajustFields();
	}),
	ajustFields: function(){
		this.fields.each(function(i){
			Ext.each(i.dependencies, function(d){
				this.dependents[d] = this.dependents[d] || [];
				if(this.dependents[d].indexOf(i)===-1){
					this.dependents[d].push(i);
				}
			},this)
			this.calc(i);
		},this)
	},
	calc: function(field, dirty){
		if(Ext.isString(field.calc)){
			field.calc = this.calcF[field.calc];
		}
		if(Ext.isFunction(field.calc)){
			var value = null;
			if(Ext.isFunction(field.calc)){
				value = field.calc.createDelegate(field.scope||this)(this, field);
			}
			if (dirty){
				this.set(field.name, value);
			}else{
				this.data[field.name] = value;
			}
		}
		if(field.lookupStore){
			if(Ext.isString(field.lookupField)){
				var tmp = field.lookupField.split(';');
				field.lookupField = {local:tmp[0], remote:tmp[1] || tmp[0]};
				delete tmp;
			}
			field.displayField = field.displayField || field.name
			field.displayTemplate = field.displayTemplate || '{displayField}';

			var lookupStore = field.lookupStore;
			var lookupField = field.lookupField;
			var displayField = field.displayField;
			var value = this.data[lookupField.local];
			var displayTemplate = field.displayTemplate;
			var t = new Ext.Template(displayTemplate);

			var i = lookupStore.find(lookupField.remote, value, 0, false, true);
			if(i>=0){
				var remoteRecord = lookupStore.getAt(i);
				var displayField = remoteRecord.get(displayField);
				value = t.apply(Ext.apply({displayField: displayField, lookupField: value},remoteRecord.data));
			}

			if (dirty){
				this.set(field.name, value, true);
			}else{
				this.data[field.name] = value;
			}
		}
	},
	set: function(name, value, internalLookup){
		if(this.fields.get(name).lookupStore&&!internalLookup){
			name = this.fields.get(name).lookupField.remote;
		}
		var isObj = (typeof value === 'object');
		if(!isObj && String(this.data[name]) === String(value)){
			return;
		} else if (isObj && Ext.encode(this.data[name]) === Ext.encode(value)) {
			return;
		}
		this.dirty = true;
		if(!this.modified){
			this.modified = {};
		}
		if(typeof this.modified[name] == 'undefined'){
			this.modified[name] = this.data[name];
		}
		this.data[name] = value;
		if(!this.editing){
			this.afterEdit();
		}
		Ext.each(this.dependents[name], function(i){
			this.calc(i, true);
		},this)
	},
	calcF: {
		sum: function(r,f){
			var v = null;
			Ext.each(f.dependencies, function(i){
				v = (v == null ? Ext.num(r.get(i),0) : v + Ext.num(r.get(i),0));
			},this)
			return v;
		},
		mult: function(r,f){
			var v = null;
			Ext.each(f.dependencies, function(i){
				v = (v == null ? Ext.num(r.get(i),0) : v * Ext.num(r.get(i),0));
			},this)
			return v;
		},
		sub: function(r,f){
			var v = null;
			Ext.each(f.dependencies, function(i){
				v = (v == null ? Ext.num(r.get(i),0) : v - Ext.num(r.get(i),0));
			},this)
			return v;
		},
		div: function(r,f){
			var v = null;
			Ext.each(f.dependencies, function(i){
				v = (v == null ? Ext.num(r.get(i),0) : v / Ext.num(r.get(i),0));
			},this)
			return v;
		},
		avg: function(r,f){
			var v = null;
			Ext.each(f.dependencies, function(i){
				v = (v == null ? Ext.num(r.get(i),0) : v + Ext.num(r.get(i),0));
			},this)
			return v / f.dependencies.length;
		},
		min: function(r,f){
			var v = null;
			Ext.each(f.dependencies, function(i){
				v = (v == null ? Ext.num(r.get(i),0) : (Ext.num(r.get(i),0) < v ? Ext.num(r.get(i),0) : v));
			},this)
			return v;
		},
		max: function(r,f){
			var v = null;
			Ext.each(f.dependencies, function(i){
				v = (v == null ? Ext.num(r.get(i),0) : (Ext.num(r.get(i),0) > v ? Ext.num(r.get(i),0) : v));
			},this)
			return v;
		}
	}
})

Exemplo:

Ext.onReady(function(){
	var dsProdutos = new Ext.data.JsonStore({
		fields:[
			{name:'prod_id'},
			{name:'prod_descricao'},
			{name:'prod_valor_unitario'},
			{name:'teste'}
		],
		data: [
			{prod_id:1, prod_descricao:'Chopp', prod_valor_unitario:3.5, teste:'asdasd'},
			{prod_id:2, prod_descricao:'Refri', prod_valor_unitario:2},
			{prod_id:3, prod_descricao:'Mini Pizza', prod_valor_unitario:4.5},
			{prod_id:4, prod_descricao:'Fritas', prod_valor_unitario:4},
		]
	})
	var win = new Ext.Window({
		height: 240,
		width: 620,
		layout: 'fit',
		title: 'Override Record - Lookup entre Stores e Campos Calculados',
		items:[{
			xtype: 'editorgrid',
			store: new Ext.data.JsonStore({
				fields:[
					{
						name: 'prod_id'
					},{
						name: 'prod_descricao',
						dependencies:['prod_id'],
						lookupStore: dsProdutos,
						lookupField: 'prod_id;prod_id',
						displayField: 'prod_descricao',
						displayTemplate: '<b>{lookupField} -</b> {displayField}'
					},{
						name: 'qtde_enviada'
					},{
						name: 'qtde_retornada'
					},{
						name: 'prod_valor_unitario',
						dependencies:['prod_id'],
						lookupStore: dsProdutos,
						lookupField: 'prod_id'
					},{
						name: 'total_enviado',
						dependencies: ['qtde_enviada','prod_valor_unitario'],
						calc: 'mult'
					},{
						name: 'total_geral',
						dependencies: ['qtde_enviada','qtde_retornada','prod_valor_unitario'],
						calc: function(r){
							return (r.get('qtde_enviada') - r.get('qtde_retornada')) * r.get('prod_valor_unitario');
						}
					}
				],
				data: [
					{prod_id: 1, qtde_enviada:10, qtde_retornada:1},
					{prod_id: 2, qtde_enviada:50, qtde_retornada:10},
					{prod_id: 3, qtde_enviada:30, qtde_retornada:3},
					{prod_id: 4, qtde_enviada:20, qtde_retornada:0}
				]
			}),
			columns:[
				{
					header: 'Produto',
					width: 120,
					sortable: true,
					dataIndex: 'prod_descricao'
				},{
					header: 'Qtde. Enviada',
					width: 100,
					sortable: true,
					dataIndex: 'qtde_enviada',
					editor: new Ext.form.NumberField()
				},{
					header: 'Valor Unitário',
					width: 90,
					sortable: true,
					dataIndex: 'prod_valor_unitario'
				},{
					header: 'Total Enviado',
					width: 90,
					sortable: true,
					dataIndex: 'total_enviado'
				},{
					header: 'Qtde. Retornada',
					width: 100,
					sortable: true,
					dataIndex: 'qtde_retornada',
					editor: new Ext.form.NumberField()
				},{
					header: 'Total Geral',
					width: 80,
					sortable: true,
					dataIndex: 'total_geral'
				}
			]
		}]
	})
	win.show();
})

Exemplo Online

• 07/12/2009 -- Override Store: Função de validação de dados nos campos (0)
• 27/11/2009 -- Ext.ux.StoreGroup – Carregando Dependências (0)
• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)
• 25/11/2009 -- Form Override: Criando colunas facilmente [ExtJS 3.0.X] (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)

O usuário abre um Grid de funcionários, clica no botão de editar o qual abre uma tela contendo um formulário onde os dados do Grid serão carregados para os campos. Se os ComboBox não estiverem carregados no momento do loadRecord aparecera apenas os códigos nestes campos, por isso precisamos garantir que todos os Stores dos ComboBox estejam carregados antes de popularmos o formulário. Ao ter 10 ComboBox como controlar quando todos terminaram suas requisições para que possamos enfim efetuar um loadRecord? Com o Ext.ux.StoreGroup.

Que diabos é o Ext.ux.StoreGroup?

Ext.ux.StoreGroup é um componente não visual herdado do Ext.util.MixedCollection que serve como uma lista de Stores, adicionamos nossos Stores secundários a ele, chamamos o método loadAll que irá disparar o método load de todos os Stores adicionados a ele e por fim irá disparar o evento afterLoad quando todos os Stores terminarem de carregar seus dados onde podemos chamar o método LoadRecord para carregar os dados ao nosso formulário.

Ext.ux.StoreGroup:

Ext.namespace('Ext.ux');

Ext.ux.StoreGroup = function(){
	this.addEvents('afterLoad');
	Ext.ux.StoreGroup.superclass.constructor.call(this);
};

Ext.ux.StoreGroup = Ext.extend(Ext.util.MixedCollection, {
	inLoading: 0,
	maskEl: null,
	maskText: 'Carregando...',
	maskCls: 'x-mask-loading',
	loadAllFired: false,
	register: function(){
		for(var i = 0, s; s = arguments[i]; i++){
			s.on('beforeload', this.onBeforeLoad, this);
			s.on('load', this.onLoad, this, false);
			s.on('loadexception', this.onLoad, this, true);
			this.add(s);
		}
	},
	unregister: function(){
		for(var i = 0, s; s = arguments[i]; i++){
			s.un('beforeload', this.onBeforeLoad, this);
			s.un('load', this.onLoad, this, false);
			s.un('loadexception', this.onLoad, this, true);
			this.remove(this.lookup(s));
		}
	},
	lookup: function(id){
		return typeof id == "object" ? id : this.get(id);
	},
	getKey: function(o){
		return o.storeId || o.id;
	},
	onBeforeLoad: function(){
		this.inLoading += 1;
	},
	onLoad: function(){
		this.inLoading -= 1;
		if((this.inLoading == 0)&&(this.loadAllFired)){
			this.fireEvent('afterLoad');
			if(this.mask){
				this.mask.hide();
			}
			this.loadAllFired = false;
		}
	},
	loadAll: function(obj){
		Ext.apply(this,obj);
		if(this.maskEl){
			if(!this.mask){
				this.mask = new Ext.LoadMask(this.maskEl);
			}
			Ext.apply(this.mask, {msg:this.maskText, msgCls:this.maskCls})
			this.mask.show()
		}
		this.loadAllFired = true;
		this.inLoading = 0;
		if(this.getCount() == 0){
			this.fireEvent('afterLoad');
			this.loadAllFired = false;
		}
		this.each(function(i){
			i.load();
		},this)
	}
});

Pequeno Override no Store pra facilitar a vida:

Ext.override(Ext.data.Store, {
	constructor: Ext.data.Store.prototype.constructor.createSequence(function(c){
		if(this.storeGroup){
			this.storeGroup.register(this);
		}
	})
})

Exemplo de formulário usando os caras acima:

Destacado abaixo as duas formas de se adicionar um Store ao StoreGroup, lembrando que a primeira maneira requer o override acime, a segunda maneira é nativa ao componente.

Ext.onReady(function(){
	Ext.form.Field.prototype.msgTarget = 'side';
	Ext.form.FormPanel.prototype.bodyStyle = 'padding:5px';
	Ext.form.FormPanel.prototype.labelAlign = 'right';
	Ext.QuickTips.init();

	var sg = new Ext.ux.StoreGroup();

	var dsProfissao = new Ext.data.JsonStore({
		url:'dados.php',
		storeGroup: sg, //Usando override no Store.
		baseParams:{
			action:'profissao'
		},
		fields:[
			{name:'id', type:'int'},
			{name:'profissao'}
		]
	})

	var dsCidade = new Ext.data.JsonStore({
		url:'dados.php',
		baseParams:{
			action:'cidade'
		},
		fields:[
			{name:'id', type:'int'},
			{name:'cidade'}
		]
	})

	var dsSexo = new Ext.data.JsonStore({
		url:'dados.php',
		baseParams:{
			action:'sexo'
		},
		fields:[
			{name:'id', type:'int'},
			{name:'sexo'}
		]
	})

	//Método tradicional
	sg.register(dsCidade,dsSexo);

	var win = new Ext.Window({
		height: 210,
		width: 620,
		layout: 'fit',
		title: 'Ext.ux.StoreGroup',
		items:[{
			xtype: 'form',
			labelWidth: 70,
			defaults:{
				width:500
			},
			items: [{
				xtype: 'textfield',
				fieldLabel: 'Nome',
				name: 'nome',
				allowBlank: false
			},{
				xtype: 'textfield',
				fieldLabel: 'Sobrenome',
				name: 'sobrenome',
				allowBlank: false
			},{
				xtype: 'combo',
				fieldLabel: 'Profissão',
				store: dsProfissao,
				valueField: 'id',
				displayField: 'profissao',
				name: 'profissao',
				mode: 'local',
				triggerAction: 'all'
			},{
				xtype: 'combo',
				fieldLabel: 'Cidade',
				store: dsCidade,
				valueField: 'id',
				displayField: 'cidade',
				name: 'cidade',
				mode: 'local',
				triggerAction: 'all'
			},{
				xtype: 'combo',
				fieldLabel: 'Sexo',
				store: dsSexo,
				valueField: 'id',
				displayField: 'sexo',
				name: 'sexo',
				mode: 'local',
				triggerAction: 'all'
			}]
		}],
		buttons:[{
			text:'Salvar'
		},{
			text:'Cancelar'
		}]
	})
	win.on('show', function(c){
		sg.loadAll({maskEl:c.body, maskText:'Carregando Dependências...'});
	})
	sg.on('afterLoad', function(){
		win.items.items[0].getForm().loadRecord({
			data:{
				profissao:1,
				cidade:2,
				sexo:1,
				nome:'Rodrigo',
				sobrenome:'Nascimento'
			}
		});
	})
	win.show();
})

Exemplo

• 07/12/2009 -- Override Store: Função de validação de dados nos campos (0)
• 06/12/2009 -- Campos Calculados: Criando campos de dados em tempo de execução [ExtJS 3.0.X] (0)
• 14/01/2010 -- Ext.ux.form.RCheckbox – Valor de envio configurável (0)
• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)
• 25/11/2009 -- Form Override: Criando colunas facilmente [ExtJS 3.0.X] (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)

Override:

Bom a ideia aqui não é explicar detalhadamente o override abaixo, apenas irei explicar o funcionamento e quais os novos parâmetros que podemos usar.

Ext.override(Ext.form.FormPanel, {
	vIconSpace: 20,
	colSpace: 5,
	labelWidth: 100,
	ajustFields:function(ff){
		Ext.each(ff.items, function(f, i){
			if((f)&&(f.items)){
				this.ajustFields(f); //MODIFICADO
			}

			var c1 = ff.items[i]; //Campo atual
			var c2 = ff.items[i-1]; //Campo anterior

			if(c1.col&&c2){
				function confField(c){
					c.labelWidth = Ext.num(c.labelWidth, this.labelWidth); //Largura do Label
					c.vIconSpace = Ext.num(c.vIconSpace, this.vIconSpace); //Espaço após o campo
					c.colSpace   = Ext.num(c.colSpace,   this.colSpace); //Espaço antes do campo
					c.width      = Ext.num(c.width,      100); //Largura padrão MODIFICADO
					c.msgTarget  = c.msgTarget || this.msgTarget || Ext.form.Field.prototype.msgTarget;
					c.labelAlign = c.labelAlign || this.labelAlign;
				}

				function calcWidth(w){
					var x = w.width;
					x += (w.msgTarget == 'side' ? w.vIconSpace : 0);
					x += 5;
					x += (w.labelAlign == 'top' ? 0 : w.labelWidth);
					return x;
				}

				function createItem(field){
					return {
						width: calcWidth.createDelegate(this)(field),
						border: false,
						layout: 'form',
						labelWidth: field.labelWidth,
						items: field
					}
				}

				function addColum(c, field){
					c.items.push(createItem(field))
				}

				if(c2.layout!=='hbox'){
					confField.createDelegate(this)(c2);
					c2 = {
						xtype:'container',//MODIFICADO
						layout:'hbox',
						border:false,
						items:[createItem(c2)]
					}
				}
				confField.createDelegate(this)(c1);
				c2.items[c2.items.length-1].width += c1.colSpace;
				addColum(c2,c1);
				c1 = c2;
				c2 = 0;

				ff.items[i] = c1;
				ff.items[i-1] = c2;
			}
			delete c1;
			delete c2;
		},this)
		if(Ext.isArray(ff.items)){
			for(i in ff.items){
				ff.items.remove(0);
			}
		}
	},
	createForm:Ext.form.FormPanel.prototype.createForm.createInterceptor(function() {
		this.ajustFields(this);
	})
})

Como vocês podem ver no código acima, foi adicionada a chamada para o método ajustaFields antes da execução do método createForm através de um createInterceptor.

O método ajustaFields é responsável por efetuar um loop recursivo na lista de items, ou seja, os campos passados ao FormPanel, e ajustá-los caso contenham a propriedade col:true.

Foram adicionados 3 propriedades ao FormPanel que servem como padrão para os seus items. Essas propriedades podem ser passadas em cada campo que faça parte da linha de colunas sobrescrevendo o padrão. São elas:

• vIconSpace: Espaço reservado a direita do campo para o ícone de validação, este espaço só ocorre se tivermos o msgTarget do campo como ‘side’. Padrão: 20;
• colSpace: Espaço a esquerda do campo, este espaço só ocorre no campo que contém col:true e serve para dar um pequeno espaço entre o label do campo e o campo anterior. Padrão: 5;
• labelWidth: Largura do label do campo. Padrão: 100.

Exemplo:

Ext.onReady(function(){
	Ext.form.Field.prototype.msgTarget = 'side';
	Ext.form.FormPanel.prototype.bodyStyle = 'padding:5px';
	Ext.form.FormPanel.prototype.labelAlign = 'right';
	Ext.QuickTips.init();

	var win = new Ext.Window({
		height: 210,
		width: 600,
		layout: 'fit',
		title: 'Override FormPanel, Colunas',
		items:[{
			xtype: 'form',
			labelWidth: 60,
			items: [{
				xtype: 'textfield',
				fieldLabel: 'Nome',
				allowBlank: false,
				width: 195
			},{
				xtype: 'textfield',
				fieldLabel: 'Sobrenome',
				allowBlank: false,
				labelWidth: 70,
				width: 195,
				col:true
			},{
				xtype: 'textfield',
				fieldLabel: 'Endereço',
				width: 490
			},{
				xtype: 'datefield',
				fieldLabel: 'Dt. Nasc.',
				width:100,
			},{
				xtype: 'datefield',
				fieldLabel: 'Dt. Cad.',
				allowBlank: false,
				labelWidth: 50,
				width:100,
				col:true
			},{
				xtype: 'combo',
				fieldLabel: 'Profissão',
				labelWidth: 50,
				width: 130,
				col:true
			},{
				xtype: 'textarea',
				fieldLabel: 'Obs.',
				width: 490,
				height: 50,
			}]
		}],
		buttons:[{
			text:'Salvar'
		},{
			text:'Cancelar'
		}]
	})
	win.show();
})

Note que para que o campo Sobrenome vire uma coluna ao lado do campo Nome basta colocar col:true no campo Sobrenome. Sendo assim, o campo que possuir col:true passa a ser coluna do campo anterior a ele.

Note também que nos campos que viram coluna é passada a largura do campo (width) e largura do label (labelWidth) para que estes se ajustem melhor ao layout.

Exemplo

• 08/01/2010 -- Override GridPanel/ColumnModel: Colunas Checkbox (0)
• 17/02/2010 -- Criando um CRUD usando um GRID e um FORM em 3 Partes (0)
• 07/12/2009 -- Override Store: Função de validação de dados nos campos (0)
• 06/12/2009 -- Campos Calculados: Criando campos de dados em tempo de execução [ExtJS 3.0.X] (0)
• 27/11/2009 -- Ext.ux.StoreGroup – Carregando Dependências (0)
• 21/12/2010 -- Novidades, mudanças e um novo ano (0)
• 23/03/2010 -- ScreenCast – Instalando o ExtJS (0)
• 16/02/2010 -- Comparação de frameworks JavaScript (0)
• 12/02/2010 -- Gadget do fórum Brasileiro de ExtJS para Win Vista/7 (0)
• 10/02/2010 -- Temas bem coloridos pra ExtJS (0)

Acompanhe aqui novidades, tutoriais, dicas sobre programação, principalmente sobre ExtJS e javascript, cursos e afins.

Abraços a todos.

• Sem Posts Relacionados