Comprenez la notion de conteneur dans ExtJS. Découvrez la classe ‘Container’, classe de base dont hérite les conteneurs conteneurs ExtJS, comme le ‘Viewport’ ou le ‘Panel’ et ses dérivés. Ajoutez, supprimez et insérez des composants visuels ExtJS dans un conteneur. Comprenez cette relation parent/enfant via l’attribut ‘items’ d’un conteneur. Comprenez enfin deux valeurs ajoutées de l’attribut ‘xtype’ : performance et clarté du code.
Prérequis
Connaissance HTML, javascript.
Objectifs
Comprendre la notion de conteneur ExtJS.
Comprendre la classe Container
Comprendre la hiérarchie de conteneurs
Instancier et placer un Panel dans une page HTML
Comprendre les conteneurs Viewport et Panel
Comprendre l’attribut ‘xtype’ (Bonne pratique !)
Comprendre la methode doLayout()
Programme
Nos petits déjeuners ExtJS
Introduction
Partie 1 : Comprendre la classe Container
Partie 2 : Manipulations Panel : instanciation directe , placement, rendu, identifiant
Partie 3 : Manipulations Panel : enfants, références
Partie 4 : Comprendre le chargement retardé (xtype)
Partie 5 : Gestion du rendu avec doLayout()
Durée
30min
Petit-déjeuner ExtJS 6 vendredi 25 septembre – Paris
Découvrez les opportunités offertes par le framework ExtJS 6 pour le développement de vos applications Web et Mobile.
Depuis 2009, Objis accompagne (conseil + formation) les organisations possédant un Backoffice JAVA/PHP/.NET et désireuses de créer des interfaces utilisateurs Web et Mobile à forte valeur ajoutée. Nous avons développé un savoir-faire technique et pédagogique sur Sencha ExtJS , Sencha GXT et l’éditeur Sencha Architect.
INSCRIPTION Petit-déjeuner ExtJS 6
Introduction
Un conteneur ExtJS est une zone de l’écran pouvant contenir des composants visuels (ou d’autres conteneurs). On parle d’une relation parent-enfant. Des exemples classiques de conteneur dans extJS sont :
Panel (Ext.Panel) : conteneur ‘de base’ dont plusieurs autres héritent : TabPanel, GridPanel, FormPanel, Windows…
ViewPort (Ext.ViewPort) : représente la totalité de la zone du rendu (Body) navigateur
Partie 1 : la classe Container
Tous les conteneurs héritent de la classe Container.
En utilisant le schéma ci-dessous, expliquez :
Quelle différence entre un ‘Component’ et un ‘Container’
Quel lien entre un ‘Container’ et un ‘Panel’
En utilisant la documentation ExtJS, identifiez les méthodes de la classe Container permettant de :
Ajouter un composant dans un conteneur
supprimer un composant de la zone du conteneur
insérer un composant entre deux autres composant
obtenir la liste des composant d’un type particulier présents dans le conteneur
Partie 2 : instanciation, placement, rendu, identifiant Panel
Le travail pas à pas ci-dessous permet de faire ses premiers pas dans :
— L’instanciation directe d’un Panel (remplacée plus tard par instanciation tardive)
— Le placement du panel dans une zone de la page
— L’analyse du code généré par ExtJS pour le rendu visuel
— L’ajout de composants dans le conteneur Panel
— L’initiation à l’agencement des composants (layout)
Mise en oeuvre pas à pas
Créez une page html avec deux zones
observez le rendu avec Firebug.
ajoutez le code necessaire à la mise en oeuvre ExtJS. En particulier, notre code sera présent dans un fichier ‘demopanelhtml.js’
Créez un fichier vierge demopanelhtml.js et ajoutez-y le code suivant :
Analysez le rendu visuel utilisateur…et le rendu html dans firebug
En déduire la valeur ajoutée de l’attribut ‘renderTo’ de l’objet config passé en paramètre du constructeur de Panel
Analysez de plus près le HTML du panel (2 zones : en tête et corps)
Créez dans le HTML une troisième zone, dans laquelle nous souhaitons placer notre panel
Analysez le code suivant
Expliquez le rendu visuel et HTML ci-dessous
Identifiant du Panel
Notez que le DIV généré par ExtJS pour le panel possède un identifiant auto-généré (ici : ext-comp-1001).
Il peut être utile de fournir vous-même un identifiant à ce panel . Le panel pourra alors plus tard être localisé grâce à cet identifiant via Ext.getCmp(id)
Analysez l’impact :
Partie 3 : ajout composants dans Panel
Pour ajouter un composant dans un conteneur, la meilleure pratique est :
— 1) Passer par l’attribut ‘items’ de type tableau pour déclarer l’ensemble des composants
— 2) Déclarer chaque enfant à travers un objet config
— 3) Pour chaque objet config enfant, spécifier comme premier attribut le xtype de ce composant enfant.
Modifier le code ainsi :
Analysez l’impact
REMARQUE : ici le bouton a été ajouté sous forme d’une instanciation directe et de façon anonyme. ce n’est pas une bonne pratique. c’est uniquement à des fins pédagogique.
gérer l’agencement des enfants dans le conteneur
Modifier le code ainsi :
analysez le rendu
Modifiez le layout en mettant ‘vbox’ au lieu de ‘hbox’. Quel impact ?
en déduire l’impact de l’attribut ‘layout’ du conteneur
INFO : c’est dans le TP suivant ‘layout ExtJS‘ que vous allez approfondir la notion de Layout.
CORRECTION
Partie 4 : xtype (instantiation retardée)
Tous les composants ExtJS sont référencés dans extJS (Gestionnaire de composant : Ext.ComponentMgr) par une chaine de caractères représentant leur type. Il s’agit du xtype du composant. Par exemple, le xType d’un bouton est ‘button’.
Pour utiliser un composant ExtJS dans vos écrans, il y a 2 techniques :
l’instanciation directe (moins performant) : new Button()
l’instanciation retardée / lazy (Bonne pratique !) qui force ExtJS à instancier le composant uniquement lorsque celui-ci sera vraiment nécessaire dans l’interface utilisateur. L’instanciation retardée est rendu possible en ajoutant dans la déclaration de votre composant l’attribut xtype (xtype : ‘button’).
