Ext JS: para que serve o xtype?

Sou novo no Sencha / Ext JS, mas acho que neste momento a estranha noção de ter uma string de definição estenográfica para apenas componentes IU deve ser para satisfazer os utilizadores legados.

Olhar para a "Lista de xtypes" aqui: http://docs.sencha.com/touch/2-0/#!/guia/componentes

Existe alguma razão para usar um identificador de cadeia similar, mas não exactamente igual ao nome da "classe" como o identificador de definição abreviada? Não me parece.

Verifique o seguinte amostra de alguns mapeamentos xtype para o nome da classe para o toque Sencha:

• video - extractoVídeo
  Ok este tipo de faz sentido - versão minúscula do nome' class '
• carousel - extractocarrossel.Carrossel
  o mesmo padrão aqui
• carouselindicator - extractocarrossel.Indicador
  Um, ok - vamos incluir um pacote também
• navigationview - extractonavegacao.Ver
  e outra vez aqui.
• datepicker - extractoseleccionador.Data
  OK, wtf?

Alguns dos argumentos acima para Xtype foram que permitiu a instanciação diferida de componentes. Eu acho que isso é completamente irrelevante - o que permite instanciação diferida é o fato de que o Sencha/Ext JS suporta a especificação de um identificador de string no lugar de um componente instanciado em uma hierarquia de view.

O mapeamento de uma cadeia em particular para um componente em particular que pode ser instanciado mais tarde é completamente arbitrário-e no caso do Sencha/Ext JS, infelizmente tolo (ver exemplos acima).

Pelo menos siga um padrão sensato - por exemplo, porque não poderia um Ext.A etiqueta tem um "xtype" de Label? Demasiado simples?

{ itemId: "myObject", xtype: 'myClass' ... }

Então você pode encontrá-lo com getComponent() como em

this.getComponent('myObject');

Se declarar uma classe e lhe der um xtype, poderá consultá - la mais tarde com Ext.ComponentQuery.query()

Por exemplo:

Ext.create('MyApp.view.MyButton', {
    xtype: 'mybutton',
    .....
});

Mais tarde no seu código, se o fizer:

var buttonArray = Ext.ComponentQuery.query('mybutton');

Então {[3] } conterá um conjunto de componentes desse tipo de classe. Se você criar componentes inline, sua consulta de componentes será mais complexa.

Outra vantagem do xtypes é que se você mover suas classes ao redor (digamos, você adiciona outra subdiretoria sob "view": MyApp.view.button.MyButton), então suas consultas componentes podem continua a ser o mesmo, uma vez que o seu xtype não muda. Uma vez que o seu projecto se torne grande, irá começar a criar subdiretórios e a mover classes.

An xtype é simplesmente um nome dado para representar uma classe. É um objecto de definição que não necessita de ser instanciado quando usado em qualquer parte da aplicação.

Ao registar um xtype, usamos simplesmente esta sintaxe: Ext.reg(<xtype name>,<classname>). Mas, nós não usamos a palavra-chave new com o nome da classe porque o componente Mgr irá automaticamente Criar instância desta classe apenas se necessário eg. em resposta a um evento como clique.

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

xtype não instantes a classe quando Ext.Ready correr. Mas, new Ext.Container() irá criar todas as instâncias quando Ext.Ready correr. Então, usar xtype é inteligente para grandes aplicações para se livrar de objetos de lixo.

Xtypes no ext não é para o desempenho. É fácil de codificar. Com a ajuda do Código xtype torna-se mais curto, fácil de ler e entender, especialmente se você está criando um Ext.formulario.Parampanel e tem muitas áreas de texto, campos de dados, combos e assim por diante... Por exemplo: é útil quando todos os datefield de formulário tem de ter o formato 'd.m.Y', você não precisa escrever separadamente formato: 'd.m.Y' para cada datefield, é só escrever para formar o objeto de configuração de padrões:{formato:'d.m.Y'} ... há muitos casos quando o Xtype enviar o código...