Maîtrisez la création de menus ExtJS. Créez des sous-menus. Associez des icones, du style, du texte et des évènements aux éléments de menus. Gérez le menu contextuel. Comprenez les menu sous forme de bouton
Prérequis
Connaissance HTML, javascript.
Objectifs
Comprendre la création de menus fixes ou flottants
Programme
Introduction
Partie 1 : Mise en oeuvre Menu non flottant + gestion évènement
Partie 2 : menu contextuel
Partie 3 : Barre d’outils (Toolbar)
Partie 4 : Mise à jour Body via Singleton
Durée
30min
Introduction
ExtJS vous permet de créer rapidement des menus professionnels pour vos applications. Au coeur de cette stratégie, la classe Ext.menu.Menu
Vous pouvez associez des icones, du style, du texte et des évènements aux éléments de menus.
Partie 1 : Mise en oeuvre menu non flottant
Supposons que vous souhaitez un menu (fixe) avec un rendu suivant :
Et l’écran suivant si click sur tout élément de menus :
Nous allons réaliser cela en 3 étapes clés :
Etape 1 : images et style
INFO : les images sont à récupérer dans ce dossier images:
Et le style est géré ainsi :
QUESTION : quelle différence entre les attributs ‘icon’ et ‘iconCls’ ?
Etape 2 : le menu
Analysez le code suivant :
Expliquez.
Etape 3 : les composantes du menu
Analysez le code suivant :
expliquez
Etape 4 : code du gestionnaire
Expliquez
Partie 2 : menu contextuel
Analysez le rendu suivant , résultat d’un menu contextuel sur le corps de la page.
Analysez le code suivant associé
Expliquez.
Partie 3 : menu Toolbar
Bouton simple
Expliquez.
action sur l’état du bouton
Analysez le rendu suivant :
et le code associé :
Expliquez.
QUESTION : comment obtenir le séparateur suivant :
