No Chrome, ao tentar abrir o DatePicker de um DateField ocorre esse problema:
Para corrigí-lo basta inserir uma regra de css para fixar a largura do DatePicker:
.x-date-picker { width: 185px; }
Em algumas situações a barra de rolagem vertical em um GridPanel não aparece por causa de um erro do ExtJs relacionado ao atributo ‘autoWidth‘. Para resolver basta dexar este atributo como ‘false‘ e dimensionar manualmente o seu painel:
var x = new Ext.grid.GridPanel({ //... ,autoWidth: false ,width: 400 //... });
Este tutorial objetiva apresentar o uso básico do JSBuilder1 para agrupar e compactar arquivos javascript.
O que é possível fazer com o JSBuilder 1.1.2?
Problemas encontrados:
Este artigo objetiva apresentar como utilizar o aplicativo JSBuilder 2 para gerar arquivos javascript únicos e compactados.
Com ele é possível:
Problemas Encontrados:
Uma das formas que podemos usar para adicionar funcionalidades a componentes do ExtJS é pelo uso de plugins.
Um Plugin no ExtJS 2.3 é uma classe contendo um método “init” que será chamado logo após a inicialização do componente.
Exemplo de Plugin:
//Exibe um alerta com o ID do componente Plugado PluginAlert = function() { return{ //Função executada após o "initComponent" init: function(cmp){ alert('Plugin Executado para componente '+cmp.getId()) } } };
Para usar um plugin, basta instanciá-lo como um ítem do array do atributo de configuração “plugins”.
Exemplo:
new Ext.Panel({ plugins: [ new PluginAlert() ], title: "Exemplo do Plugin de Alerta" })
Simples não?
Cabe apenas ao desenvolvedor encontrar formas criativas de trabalhar com o uso de plugins. A melhor forma que encontrei foi utilizá-los combinado ao uso de eventos dos componentes.
Abaixo segue outro exemplo de plugin que atualiza um painel a partir do conteúdo html de uma requisição AJAX:
// create namespace for plugins Ext.namespace('Ext.ux'); /** * Ext.ux.PluginPanelUpdater Plugin para Ext.Panel * Atualiza HTML de um painel a partir de uma requisição AJAX. * @author Kaléu Caminha * @date 10 de Novembro, 2008 * * @class Ext.ux.PluginPanelUpdater * @extends Ext.util.Observable */ //Construtor Ext.ux.PluginPanelUpdater = function(config) { Ext.apply(this, config); }; //Código do Plugin Ext.extend(Ext.ux.PluginPanelUpdater, Ext.util.Observable, { /** * A Função init é executada para todos os plugins após o "initComponent" do componente no qual o plugin é utilizado. */ init: function(panel){ //Adicionamos evento para quando o painel for renderizado panel.on("render", this.updatePanel, this); this.panel = panel; }, /** * Usa um Updater para atualizar o html de um painel */ updatePanel: function(){ //Pega Elemeneto var el = this.panel.getEl(); //Se frame == true, adiciona conteúdo ao elemento body interno if(el.child('.x-panel-body')) el = el.child('.x-panel-body'); //Pega updater e realiza chamada do método update el.getUpdater().update({ url: this.url, params: this.parms || {} }); } });
Este tutorial foi baseado no tutorial oficial do ExtJS sobre desenvolvimento de Plugins.
Update 12 de Novembro de 2009
Foi publicado ontem um artigo no blog oficial do Ext sobre o desenvolvimento de plugins, ressaltando a importância de seguir um padrão para que outros desenvolvedores possam extender as funcionalidades criadas por você. Ótima continuação para este post. 
Após várias tentativas e algumas experiências bem sucedidas decidi documentar o processo de desenvolvimento conceitual de um componente, o que ele faz, como faz, o que é configurável, etc.
Meu desejo é conversar com a comunidade e propor o desenvolvimento de um manual que auxilie novos desenvolvedores a entenderem não apenas os códigos, mas também o processo de planejamento de uma interface e de desenvolvimento orientado a componentes.
Um componente é sempre visto pelo usuário como um “pedaço” ou um “recurso” de interface (em outra linguagem, um quadrado que exibe alguma informação que ele precisa) com a qual ele irá interagir para obter ou inserir alguma informação.
A Informação
Antes de iniciar o desenvolvimento é importante ter em mente quais as informações essenciais que deverão ser exibidas pelo componente e sua ordem de importância. Ter essa visão clara evita desperdício de tempo com retrabalho.
Captura de Eventos
Para que seja exibida a informação correta será preciso interagir com o usuário, o que em interface é comumente feito com o uso de eventos. Existem diversos eventos de interface, teclado, clicks e movimentos do mouse, etc.
Para iniciar é preciso separarmos os diversas recursos envolvidos na criação de um componente.
Documentando
Documentar é uma das tarefas mais postergradas no desenvolvimento de software. É possível adquirir uma cultura de programação que torna o trabalho de documentação menos custoso, como por exemplo o uso de annotations, a separação dos métodos da classe por grupo de funcionalidades semelhantes e comentários nos métodos e atributos.
É importante que quem for utilizar o componente tenha claro o uso das quatro partes colocadas acima: “atributos públicos”, “atributos de configuração”, “métodos públicos” e “eventos”.
Além disso, uma descrição de um parágrafo sobre o componente, um print screen dele em funcionamento e um exemplo de caso de uso irão facilitar o trabalho de quem precisa descobrir se um componente é ou não adequado ao seu trabalho.
Conclusão
Estas são apenas algumas observações referentes ao que tenho desenvolvido.
Acredito que a falta de atenção aos ítens colocados aqui podem fazer com que uma empresa julgue o ExtJS (e o uso de interfaces ricas) como “uma péssima ferramenta” quando na verdade o que faltou foi uma mudança de cultura e talvez tempo de treinamento nas novas formas de programar.
Ótimos exemplos de componentes bem documentados podem ser encontrados no site oficial, na área destinada a comunidade.
E você, como é a sua experiência no desenvolvimento de componentes para o ExtJS?
O Tine 2.0 é um sistema de groupware em plataforma web que utiliza o framework Ext JS como base de toda a interface. O sistema possui gerenciador de contatos, tarefas, calendário, etc.
Como minha principal atividade hoje é o desenvolvimento de interfaces com Ext JS decidi fazer uma análise de alguns dos fatores que me chamaram a atenção e que podem ser importantes para projetos futuros.
Fiquem a vontade para acrescentar suas próprias impressõessobre este software e sobre desenvolvimento de aplicações web ricas.
Comentários Recentes