Ext JS: à quoi sert xtype?

Je vois qu'il y a beaucoup d'exemples dans Ext JS où au lieu de créer réellement des objets Ext JS, un littéral d'objet avec une propriété xtype est passé.

À quoi ça sert? Où est le gain de performance (si c'est la raison) si l'objet va être créé de toute façon?

29
demandé sur Do Nhu Vy 2010-02-23 14:37:37

6 réponses

xtype est une abréviation pour identifier les composants particuliers: panel = Ext.Panel, textfield = Ext.form.TextField, etc. Lorsque vous créez une page ou un formulaire, vous pouvez utiliser ces xtypes plutôt que d'instancier des objets. Par exemple, 

items: [{
   xtype: 'textfield',
   autoWidth: true,
   fieldLabel: 'something'
}]

De plus , créer des pages de cette manière permet à Ext JS de rendre paresseusement la page . C'est là que vous voyez un "gain de performance."Au lieu de créer un grand nombre de composants lorsque l'application se charge, Ext JS rend les composants lorsque l'Utilisateur a besoin de voir ils. Ce n'est pas un gros problème si vous avez une page, mais si vous exploitez des onglets ou un accordéon, de nombreuses pages sont initialement cachées et donc l'application se chargera plus rapidement.

En outre, vous pouvez créer et enregistrer {[11] } de nouveaux composants créant des xtypes de votre choix. Ext JS rendra également vos composants paresseusement.

Vous pouvez également récupérer des composants par ID. Puisque votre composant (ainsi que les composants Ext JS) peuvent fournir un tas de comportement agréable, il est parfois pratique pour rechercher et récupérer un composant plutôt qu'un simple élément DOM ou un nœud.

En bref, les xtypes identifient les composants et les composants sont un aspect clé D'Ext JS.

54
répondu Upperstage 2018-04-20 14:34:24

Je suis nouveau sur Sencha/Ext JS mais je pense qu'à ce stade, la notion étrange d'avoir une chaîne d'identifiant de définition abrégée pour seulement les composants de L'interface utilisateur doit être de satisfaire les utilisateurs hérités.

Oeil à la "Liste des xtypes" ici: http://docs.sencha.com/touch/2-0/#!/guide/composants

Y a-t-il une bonne raison d'utiliser un identifiant de chaîne similaire mais pas tout à fait identique au nom de "classe" en tant qu'identifiant de définition abrégée? Je ne le pense pas.

Vérifiez ce qui suit exemple de mappages de noms xtype vers classe pour Sencha touch:

  • video - Ext.Vidéo
    Ok, ce genre de sens-version en minuscules du nom 'class'
  • carousel - Ext.carrousel.Carrousel
    Même modèle
  • carouselindicator - Ext.carrousel.Indicateur
    Hum, ok-nous allons inclure un paquet aussi
  • navigationview - Ext.navigation.Vue
    Et encore ici
  • datepicker - Ext.sélecteur.Date
    Ok, wtf?

Certains des arguments ci-dessus pour xtype étaient qu'il permettait l'instanciation différée des composants. Je pense que c'est complètement hors de propos - ce qui permet l'instanciation différée est le fait que Sencha/Ext JS supporte la spécification d'un identifiant de chaîne à la place d'un composant instancié dans une hiérarchie de vue.

Le mappage d'une chaîne particulière à un composant particulier qui pourrait être instancié plus tard est complètement arbitraire - et dans le cas de Sencha / Ext JS, malheureusement stupide (voir les exemples ci-dessus).

Au moins, il suffit de suivre un modèle sensible-par exemple, pourquoi ne pouvait pas un poste.L'étiquette a un" xtype " de Label? Trop simple?

En réalité, je sais pourquoi - c'est parce qu'ils ont fait des noms xtype qui se lisent bien-il y a beaucoup de noms de classe répétés qui ne fonctionneraient pas (Ext.Panneau et Ext.onglet.Panneau), et pickerDate serait juste stupide.

Mais je ne l'aime toujours pas-c'est un petit raccourci incohérent qui obscurcit plus qu'elle n'aide.

8
répondu sksizer 2016-07-13 19:41:44

J'ai posé la même question que Joe, mais j'ai trouvé la réponse. Si vous utilisez xtype, une approche consiste à spécifier une itemId dans le même objet:

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

, Alors vous pouvez le trouver avec getComponent(), comme dans

this.getComponent('myObject');
3
répondu lwe 2018-04-20 14:37:30

Si vous déclarez une classe et de donner une xtype, vous pouvez l'interroger plus tard avec Ext.ComponentQuery.query()

Par exemple:

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

Plus Tard dans votre code, si vous le faites: 

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

Alors buttonArray contiendra un tableau de composants de ce type de classe. Si vous créez des composants en ligne, votre requête de Composant sera plus complexe.

Un autre avantage de xtypes est que si vous déplacez vos classes (disons, vous ajoutez un autre sous-répertoire sous "view": MyApp.view.button.MyButton), alors vos requêtes de composants peuvent restent toujours les mêmes, puisque votre xtype ne change pas. Une fois votre projet volumineux, vous commencerez à créer des sous-répertoires et à déplacer des classes.

2
répondu Patrick Chu 2015-06-02 22:15:42

Un xtype est simplement un nom donné à représenter une catégorie. C'est un objet de définition qui n'a pas besoin d'être instancié lorsqu'il est utilisé dans toute partie de la demande.

Lors de l'enregistrement d'un xtype, nous utilisons simplement cette syntaxe: Ext.reg(<xtype name>,<classname>). Mais, nous n'utilisons pas le mot-clé new avec le nom de la classe car le composant Mgr ne créera automatiquement l'instance de cette classe que si nécessaire, par exemple. en réponse à un événement de clic.

Nous n'avons pas besoin d'obtenir une instance manuellement car après en enregistrant un xtype, Le 'Component Mgr' créera automatiquement une instance pour la classe réprimée par ce xtype seulement si elle est utilisée n'importe où dans l'application ou si elle n'instancie simplement pas cette classe si elle n'est pas utilisée ailleurs. Le composant Mgr exécute ce code: 

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

xtype n'instanciez pas la classe lorsque Ext.Ready s'exécute. Mais, new Ext.Container() créera toutes les instances lorsque Ext.Ready s'exécute. Ainsi, l'utilisation de xtype est intelligente pour les grandes applications pour se débarrasser des objets inutiles.

1
répondu Mr.Kool 2018-04-20 14:46:14

Xtypes dans ext n'est pas pour la performance. Il est facile à coder. Avec l'aide de code xtype devient plus courte, facile à lire et à comprendre, surtout si vous créez un poste.forme.FormPanel et il a beaucoup de textareas, datefields, combos et ainsi de suite... Par exemple: il est utile lorsque chaque champ de date du formulaire doit avoir un format comme 'D. M. Y' , vous n'avez pas besoin d'écrire séparément format: 'D. M. Y' à chaque champ de date, vous écrivez simplement dans form config object defaults: {format: 'D. M. Y'}... il existe de nombreux cas lorsque xtype shorters le code...

En conclusion: Il est facile de coder...

-3
répondu Zango 2010-02-23 12:28:18