O que é Xtype?

Olá pessoal tudo certo?

No artigo de hoje falaremos um pouco sobre o xtype.

Na linguagem ExtJS, um xtype é um nome simbólico dado a uma classe. xtype é o seu widget, que você coloca na sua caixa de diálogo para capturar dados do autor. xtypes como textfield, numberfield, selection etc.

Por exemplo, sua classe tem o nome MyApp.view.MyGrid. Este é o nome da classe normal que você usa quando precisa criar a classe. Por exemplo:

var myGrid = Ext.create('MyApp.view.MyGridView',{
   title:'My Grid' 
});

Além do nome da classe, você pode dar à sua classe um alias dessa maneira

Ext.define('MyApp.view.MyGridView',{
     extend:'Ext.grid.Panel',
     alias:'widget.mygrid'
});

Sem alias, precisamos digitar:

Ext.create('Ext.container.Container',{
     layout:'vbox', 
     items:[
        Ext.create('MyApp.view.MyGridView',{
            // config            
        })   
    ]
});

e com alias, digitamos:

Ext.create('Ext.container.Container',{
     layout:'vbox',
     items:[{
        xtype:'mygrid'
        // config
    }]
});

Este último é cerca de 20 digítos menor do que o anterior. Agora imagine que você precisa usar suas classes centenas de vezes em aplicativos maiores. É óbvio que xtype economizar uma quantidade considerável de digitação não significa reduzir o risco de erros de digitação em nomes longos.

Segundo, também um benefício muito valioso é que Ext.create instancia a classe incondicionalmente, seja ela necessária ou não. Você pode ter muitas visualizações, tabpanels ou layouts de cartão em um aplicativo grande em que o usuário nunca pode clicar ou muito raramente.

Em outras palavras, algumas das classes definidas nunca serão instanciadas, ou podem esperar até que o usuário precise delas. Assim, xtype pode salvar a memória, o que não é muito importante nos computadores modernos, porque as classes Ext / Touch instanciadas não comem gigabytes.

O último benefício que quero mencionar, e isso é realmente importante, é uma legibilidade e capacidade de manutenção do código muito melhorada também. O código não é apenas escrito uma vez e esquecido quando funciona, mas é lido, depurado e modificado por muitos desenvolvedores, então tudo o que o torna mais curto, mais agradável e mais fácil de entender, tem um grande valor.

Outros Tipos

Temos falado sobre componentes, ou widgets até agora, no entanto alias podem ser atribuídos a quase qualquer tipo de classe.

Plugins

Definir

    
Ext.define('Ext.ex.grid.Search',{
     extend:'Ext.AbstractPlugin',
     alias:'plugin.ex-gms'
});

Usar:

    
Ext.define('Ext.ex.grid.Search',{
     plugins:[{
        ptype:'ex-gms'
    }]
});

Proxy

definir

Ext.define('MyApp.proxy.CustomProxy',{
     extend:'Ext.data.proxy.Server'
     alias:'proxy.myproxy'
});

Usar

Ext.define('MyApp.model.MyMode',{
     extend:'Ext.data.Model',
     fields:[...],
     proxy:{
        type:'myproxy'
    }
});

Você pode definir Alias para os leitores, gravadores, stores, layouts, recursos etc.

Sinônimos alias

Pode haver mais de um alias definido para um nome de classe. Isso pode ser útil para compatibilidade com versões anteriores ou outras finalidades possíveis. Para atribuir uma classe a mais aliases, usamos apenas uma matriz de strings em vez de uma única string.

Ext.define('Ext.ex.grid.Search,{
    extend:'Ext.AbstractPlugin',
    alias:['plugin.ex.gms','plugin.ux-gms']
});

Conclusão

Use xtype sempre que puder, principalmente por causa da qualidade do seu código. É claro que pode haver situações em que você precisa instanciar uma classe diretamente, Ext.create mas não com mais frequência do que situações que o alias pode ser usado.