Le xtype dans le framework Sencha Touch

Si vous développez avec le framework Sencha Touch, vous avez probablement entendu parlé des « xtypes ». Pour développer proprement sur ce framework, l’idéal est de séparer ses fichiers JavaScript afin d’avoir une clarté de code utile pour une équipe, et même seul pour s’y retrouver. Pour ça, vous allez devoir utiliser les xtypes !

C’est en fait un principe mis en place par Sencha sur ce framework, permettant, après avoir étendu une classe, de lui attribuer un « xtype », qui pourrait correspondre à un nom de prototype de classe, afin de ne plus avoir qu’a utiliser ce xtype pour instancier notre classe réécrite. Peu clair ? Voyons un peu de code :


App.Master = Ext.extend(Ext.Panel, {
fullscreen:true,
layout:'card',
items:[
{xtype:'app-accueil'}
]
});
Ext.reg('app-master', App.Master);

Dans ce cas là, nous avons étendu la classe Panel de Sencha afin de la faire correspondre à notre besoin, et ensuite « enregistrée » avec Ext.reg comme correspondant au xtype « app-master ». Nous pourrons ensuite dans notre application instancier cette classe simplement, comme nous l’avons fait pour « app-accueil », par :


{xtype:'app-master'}