Página Inicial > ExtJS > Desenvolvendo Plugins para o ExtJS

Desenvolvendo Plugins para o ExtJS

10, novembro, 2009 kaleu Deixar um comentário Ir para os comentários

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. ;)

Categories: ExtJS Tags:
  1. Nenhum comentário ainda.
  1. Nenhum trackback ainda.