From Learn About the Ext JavaScript Library

Contents 1 Prefácio 2 Definição 3 Para que serve? 4 Instanciação Posterior 5 Leitura Adicional

Prefácio

Tenho observado nos Fórums de Ext que existe muita confusão a respeito do xtype. Algumas pessoas o ignoram completamente; outras acham que ele é o que ele não é. Então decidi esclarecê-lo.

Definição

xtype é um nome simbólico dado a uma classe. Nada mais, nada menos.

Por exemplo, sua classe tem o nome Ext.ux.MyGrid. Esse é o nome regular da classe que você usa quando precisa instanciá-la (criar um objeto dessa classe).

Além do nome da classe, você pode atribuir à sua classe um xtype dessa forma:

Ext.reg('mygrid', Ext.ux.MyGrid);

xtype aqui é mygrid e o nome regular da classe é Ext.ux.MyGrid. O código acima registra um novo xtype ou, em outras palavras, conecta o xtype mygrid à classe Ext.ux.MyGrid.

Para que serve?

Imagine que você tem uma aplicação grande em que objetos (windows, forms, grids) são criados quando necessários, como respostas a ações do usuário. Por exemplo, o usuário clica em um ícone ou botão, e uma nova janela com uma grid é criada, renderizada e exibida na tela.

Agora, se você codifica tal aplicação de forma pré-Ext-2.x, você precisa instanciar todos os objetos da aplicação no momento em que a página é carregada pela primeira vez (primeira execução do código da aplicação). Você terá um objeto da classe Ext.ux.MyGrid em algum lugar na memória do navegador, esperando pela renderização quando houver um clique do usuário.

Isto é para apenas uma grid -- você deve ter centenas delas. Que desperdício de recursos! A grid está aguardando em algum lugar, porém o usuário pode nunca clicar naquele botão, pode nunca precisar daquela grid.

Instanciação Posterior

Se você tem o xtype, a única coisa que fica na memória é um objeto simples de configuração como:

{xtype:'mygrid", border:false, width:600, height:400, ...}

Isso não é tão custoso quanto uma classe complexa instanciada.

Agora, o que acontece se o usuário clicar em nosso botão? A Ext verá que a grid-a-ser-renderizada não está sequer instanciada, mas ela sabe como lidar com isso. O ComponentMgr sabe: "Se eu preciso instanciar um objeto do xtype mygrid, eu preciso criar um objeto da classe Ext.ux.MyGrid", então ele roda esse código:

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}

Em outras palavras:

return new Ext.ux.MyGrid(config);

Isso instancia nossa grid; a renderização e exibição virão em seguida. Lembre-se: Instanciar somente se necessário.

Para uma lista completa dos xtypes padrão consulte Ext.Component na API.

Leitura Adicional

• Mesmo artigo em meu blog. Você pode comentar lá.
• Writing a Big Application in Ext