Découvrez la notion de Layout Manager dans ExtJS sur un exemple concret avec un layout de type ‘hbox’. Comprenez les règles d’arrangement des composants ‘enfants’. Identifiez un atout maître : le ‘dynamic sizing’. Identifiez les différents types de layout Managers proposés par ExtJS, dont le BorderLayout
Prérequis
Connaissance HTML, javascript.
Objectifs
Comprendre ce qu’est un layout manager
Comprendre la valeur ajoutée d’un layout manager
Identifier les Layout Manager fournis par ExtJS
Comprendre le conteneur ‘ViewPort’
Lien utile
DEMO LAYOUTS : clés layout , type, align, pack, flex
DEMO xType par défaut
DEMO doLayout()
Programme
Nos petits déjeuners ExtJS
Introduction
Partie 1 : exemple layout manager : ‘hbox’
Partie 2 : Types de Layout
Partie 3 : focus BorderLayout & ViewPort
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 layout manager est un objet qui assure le rendu visuel des composants enfants d’un conteneur.
Le layout manager par défaut affiche les enfants les un à la suite des autres dans le DOM du conteneur.
Le layout manager par défaut n’assure pas l’ajustement de la taille des enfants par rapport à la taille du conteneur (sizing)
Certains layout managers disponibles dans ExtJS permettent (selon le type et la configuration) d’appliquer des règles de ‘sizing’ et ‘positionning’
Partie 1 : Exemple de layout manager : hbox
Analysez l’écran suivant : dans un panel, 2 zones alignées horizontalement ( 50% / 50% ) en utilisant le layout de type ‘hbox’
Expliquez
Analyse des règles du layout
En utilisant la documentation ExtJS, expliquez les rôle des attributs ‘align’ et ‘padding’ du layout
Analysez l’impact du rendu visuel sans ces 2 attributs.
Modifiez la taille du panel (Ex : largeur = 700 et hauteur = 600). Quel impact sur les règles de layout ? Quelle différence s’il n’y avait pas d’attribut ‘layout’ ?
— > Vous venez de constater un atout fondamental du layout manager : le ‘dynamic sizing’
Analyse des zones
QUESTION : Qu’est ce qu’un ‘xtype’ ? Quel est le xtype par défaut pour un enfant de Panel ?
QUESTION : à quoi sert l’attribut ‘flex’ ?
QUESTION : comment faire pour que la zone de gauche occupe 75% de l’espace disponible horizontalement au lieu de 50% ?
CORRECTION
Partie 2 : Types de Layout
En utilisant la documentation ExtJS, expliquez les différents types de layout suivant :
AbsoluteLayout
AccordionLayout
AnchorLayout
BorderLayout (Seule la ‘region’ centre est obligatoire)
CardLayout
ColumnLayout
FitLayout
FormLayout
HBoxLayout
VBoxLayout
TableLayout
Partie 3 : BorderLayout & ViewPort
L’exemple de la partie 1 a montré comment un conteneur individuel (ici Panel) peut arranger ses enfants suivant un layout (ici HBoxLayout).
Pour créer des applications ‘type bureau’, nous allons utiliser l’ensemble de la fenêtre navigateur. Il existe un conteneur spécial appelé ‘ViewPort‘ qui encapsule l’ensemble du body de la page, et se redimensionne automatiquement lorsque le navigateur change de taille.
Le viewPort est configuré avec un layout gestionnaire de taille. Ce layout applique les régles de repositionnement aux enfants. Le ViewPort utilise le ‘body’ comme élément principal.
Il n’a pas besoin d’être affiché par programmation.
Nous allons créer une application dynamique avec le ViewPort.
Expliquez le rôle des attributs suivants :
— split
— collapsible
— collapsibleMode
— html
Redimensionnez la fenêtre navigateur. Notez comment la hauteur des zones Nord/Sud ne sont pas modifiés, tout comme la largeur des zones est/ouest
CORRECTION
Partie 4 : region ‘center’ du BorderLayout
Ajouter le code permettant d’insérer un Tabpanel dans la région centre du BorderLayout. Ce TabPanel contient 2 onglets contenant du texte.
Analysez et utilisez le code suivant :
CORRECTION
QUESTION : Ajoutez un troisième onglet contenant une grille de données
contenant
Partie 4 : contenu des Panels enfants
Dans la partie 3, vous avez noté que c’est à travers l’attribut ‘html’ qu’est précisé le contenu de chaque zone. Cela limite le contenu de chaque zone à du html. Or les zones peuvent contenir autre chose.
Ci-dessous nous allons spécifier que la zone centre va contenir un un Conteneur de type TabPanel (qui contiendra dans un premier temps du html :)).
La seule différence entre ces deux exemples est que l’objet config de la zone centre :
— a un attribut ‘xtype’ spécifiant qu’il sera utilisé pour créer un TabPanel (au lieu d’un simple panel)
— a un attribut items précisant le contenu des panels enfants du TabPanel.
Ce qui donne comme rendu ceci :
Expliquez
Ajoutez un deuxième objet.
