Ext JS: qu'est-ce que xtype bon?
Je vois il y a beaucoup d'exemples de Ext JS où, au lieu de créer de Ext JS objets, un objet littéral avec un xtype
propriété est passée.
Quel est ce bon? Où est le gain de performances (si c'est la raison) si l'objet est en train d'être créée de toute façon?
Vous devez vous connecter pour publier un commentaire.
xtype
est un raccourci pour identifier les composants particuliers:panel
=Ext.Panel
,textfield
=Ext.form.TextField
, etc. Lorsque vous créez une page ou d'un formulaire, vous pouvez utiliser cesxtypes
plutôt que d'instancier des objets. Par exemple,En outre, la création de pages de cette manière permet Ext JS pour rendre paresseusement la page. C'est là que vous voyez un "gain de performance." Au lieu de créer un grand nombre de composants lors de l'application des charges, Ext JS rend les composants lorsque l'utilisateur a besoin de les voir. Pas une grosse affaire si vous avez une page, mais si vous exploiter les onglets ou d'un accordéon, de nombreuses pages sont d'abord caché et, par conséquent, l'application se charge plus rapidement.
En outre, vous pouvez créer et enregistrer de nouveaux composants de la création d'xtypes de votre choix. Ext JS va de même de rendre vos composants paresseusement.
Vous pouvez aussi récupérer des composants par ID. Depuis votre composant (ainsi que l'Ext JS composants) peut fournir un tas de nice comportement, il est parfois commode de rechercher et de récupérer un composant plutôt qu'un simple élément du DOM ou un nœud.
En bref, xtypes identifier les composants et les composants sont un aspect clé de Ext JS.
Ext.create('full.clazz.Name', {})
qui crée en fait un appel AJAX synchrone (si ce n'est pas encore chargé).xtype: 'form-login',
Ce qui est de la classe utilisée aliasform-login
?Je suis nouveau sur le Sencha/Ext JS, mais je pense qu'à ce point de l'étrange idée d'avoir une abréviation définition de l'identificateur de chaîne pour les seuls composants de l'INTERFACE utilisateur doit s'assurer de l'héritage des utilisateurs.
Oeil à la "Liste des xtypes" ici: http://docs.sencha.com/touch/2-0/#!/guide/composants
Est-il une bonne raison d'utiliser un semblable-mais-pas-vraiment-la-mêmes identifiant de chaîne "classe" comme nom de l'abréviation définition d'identification? Je ne le pense pas.
Vérifiez les points suivants de l'échantillon de certains xtype de classe dans les mappages de nom pour le Sencha touch:
video
- Ext.VidéoOk cette sorte de sens - version minuscule de la "classe" nom
carousel
- Ext.carrousel.CarrouselMême modèle ici
carouselindicator
- Ext.carrousel.IndicateurEuh, ok, nous allons inclure un paquet trop
navigationview
- Ext.la navigation.VueEt encore ici
datepicker
- Ext.sélecteur.DateOk, wtf?
Certains des arguments ci-dessus pour xtype étaient qu'elle a permis à différés instanciation de composants. Je pense que c'est complètement hors de propos - ce qui permet à l'instanciation différée est le fait que le Sencha/Ext JS prend en charge la spécification d'un identifiant de chaîne au lieu d'un composant instancié en vue de la hiérarchie.
La cartographie d'une chaîne particulière à un élément particulier qui peut être instancié plus tard complètement arbitraire, et dans le cas de Sencha/Ext JS, malheureusement idiot (voir les exemples ci-dessus).
Au moins il suffit de suivre un bon modèle par exemple pourquoi ne pouvais-Ext.Étiquette ont une "xtype" de
Label
? Trop simple?En réalité, je sais pourquoi, c'est parce qu'ils ont fait xtype de noms qui lisez bien il y a beaucoup répété les noms de classe qui ne fonctionne pas (Ext.Panneau et Ext.onglet.Panneau), et
pickerDate
serait juste de paraître stupide.Mais je ne l'aime toujours pas, c'est un peu bizarre incompatible raccourci qui dissimule plus qu'elle n'aide.
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 uneitemId
dans le même objet:{
itemId: 'myObject',
xtype: "myClass"
...
}
Alors vous pouvez le trouver avec
getComponent()
comme dansSi vous déclarez une classe et de donner une xtype, vous pouvez l'interroger plus tard avec
Ext.ComponentQuery.query()
Par exemple:
Plus loin dans votre code, si vous n':
puis
buttonArray
contiendra une gamme de composants de ce type de classe. Si vous créez des composants en ligne, votre composant la requête va être plus complexe.Un autre avantage de xtypes est que si vous déplacez vos classes autour de (disons, vous ajoutez un autre sous-répertoire sous "affichage":
MyApp.view.button.MyButton
), puis votre composant les requêtes peuvent toujours rester le même, depuis votre xtype ne change pas. Une fois que votre projet est grande, vous allez commencer à créer des sous-répertoires et le déplacement de classes autour de.Un
xtype
est simplement un nom donné à représenter une catégorie. C'est undéfinition d'un objet qui n'a pas besoin d'être instanciés lorsque utilisé dans
toute partie de la demande.
Pendant l'enregistrement d'un
xtype
, nous avons tout simplement utiliser cette syntaxe:Ext.reg(<xtype name>,<classname>)
. Mais, nous n'utilisons pas lenew
mot avec le nom de la classe parce que le Composant Mgr va automatiquement créer une instance de cette classe seulement en cas de besoin, par exemple. en réponse à un événement de clic.Nous n'avons pas besoin d'obtenir une instance manuellement car après l'inscription d'un
xtype
, la Composante " Mgr " sera automatiquement créer une instance de la classe représentait parxtype
uniquement s'il est utilisé n'importe où dans l'application, ou il suffit de ne pas instancier cette classe si pas utilisé ailleurs. Composant Mgr exécute ce code:xtype
ne pas instancier la classe lors de laExt.Ready
s'exécute. Mais, les nouveauxExt.Container()
permettra de créer tous les cas lorsqueExt.Ready
s'exécute. Ainsi, l'utilisation dextype
est intelligent pour les grandes applications de se débarrasser des ordures objets.