web-dev-qa-db-fra.com

EXT JS: Qu'est-ce que xtype est bon?

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

Qu'est-ce que c'est bon? Où est le gain de performance (si c'est la raison) si l'objet va être créé quand même?

extjs
29
flybywire

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

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

De plus , la création de pages de cette manière permet à EXT JS de rendu 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 chargée, EXT JS rend les composants lorsque l'utilisateur doit les voir. Pas une grosse affaire si vous avez une page, mais si vous exploitez des onglets ou un accordéon, de nombreuses pages sont initialement masquées et que l'application se chargera donc plus rapidement.

De plus, vous pouvez créer et enregistrer Nouveaux composants créant des XTYPES de votre choix. EXT JS rendra de la même manière que vos composants paresseusement.

Vous pouvez également récupérer des composants par ID. Étant donné que votre composant (ainsi que les composants EXT JS) peuvent fournir un tas de bons comportements, il est parfois pratique de rechercher et de récupérer un composant plutôt que d'un simple élément domog ou de noeud.

En bref, XTYPES identifie les composants et les composants sont un aspect clé de l'EXT JS.

54
Upperstage

Je suis nouveau à Sencha/ext JS mais je pense qu'à ce stade, la notion étrange d'avoir une chaîne d'identifiant de définition sténographique pour seuls les composants de l'interface utilisateur doit être de satisfaire les utilisateurs hérités.

Regardez la "liste des xtypes" ici: http://docs.sencha.com/touch/2-0/#!/Guide/Components

Existe-t-il une bonne raison d'utiliser un identifiant similaire-mais non-tout-même de chaîne que le nom "Classe" comme identifiant de définition sténographique? Je ne le pense pas.

Vérifiez l'échantillon suivant de certains mappages de noms XTYPE pour Sencha Touch:

  • video - ext.video
    [.____] Ok ce genre de sens - Version minuscule du nom 'Class'
  • carousel - ext.carousel.carousel
    [.____] Même motif ici
  • carouselindicator - ext.carousel.Indicator
    [.____] um, OK - Nous inclurons également un paquet
  • navigationview - ext.navigation.view
    [.____] et encore une fois ici
  • datepicker - ext.picker.date
    [.____] OK, WTF?

Certains des arguments ci-dessus pour XTYPE étaient qu'il a permis d'accroître l'instanciation différée des composants. Je pense que c'est complètement non pertinent - ce qui permet à l'instanciation différée est le fait que SENCHA/EXT JS prend en charge 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 pouvant être instancié ultérieurement est totalement arbitraire - et dans le cas de SENCHA/EXT JS, malheureusement idiot (voir des exemples ci-dessus).

Au moins, suivez simplement un motif sensible - par exemple pourquoi un ext.label n'a pas pu avoir un "xtype" de Label? Trop simple?

En réalité, je sais pourquoi - c'est parce qu'ils ont fait des noms de xtype qui ont bien lu - il existe de nombreux noms de classe répétés qui ne fonctionnaient pas (ext.panel et ext.tab.panel), et pickerDate semblerait sincèrement stupide .

Mais je n'aime toujours pas ça - c'est un petit raccourci incessionniste étrange qui obtient plus que ce qu'il aide.

8
sksizer

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

{itemID: 'myObject', xtype: 'myclass' ...}

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

this.getComponent('myObject');
3
lwe

Si vous déclarez une classe et donnez-lui un xtype, vous pouvez la demander plus tard avec Ext.ComponentQuery.query()

Par exemple:

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

Plus tard dans votre code, si vous faites:

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

ensuite, buttonArray contiendra une gamme 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 cours autour (disons, vous ajoutez un autre sous-répertoire sous "View": MyApp.view.button.MyButton), alors vos requêtes de composants peuvent toujours rester les mêmes, car votre xtype ne change pas. Une fois que votre projet devient grand, vous commencerez à créer des sous-répertoires et de déplacer des cours autour.

2
Patrick Chu

Un xtype est simplement un nom donné pour représenter une classe. C'est un objet de définition qui n'a pas besoin d'être instancié lorsqu'il est utilisé dans une partie de l'application.

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 créera automatiquement une instance de cette classe uniquement si nécessaire, par exemple. En réponse à un événement comme Click.

Nous n'avons pas besoin d'obtenir une instance manuellement car après avoir enregistré un xtype, le "composant mgr" créera automatiquement une instance pour la classe repressée par ce type xtype uniquement s'il est utilisé n'importe où dans L'application ou cela n'instende simplement pas cette classe si elle n'est pas utilisée ailleurs. Composant Mgr exécute ce code:

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

xtype ne pas instancier la classe lorsque Ext.Ready est exécuté. Mais, nouvelle Ext.Container() créera toutes les instances lorsque Ext.Ready Est exécuté. Ainsi, en utilisant xtype est intelligent pour les grandes applications pour vous débarrasser des objets à ordures.

1
Mr.Kool