Créez un formulaire ExtJS. Découvrez la flexibilité du formulaire ExtJS par rapport au formulaire HTML traditionnel : gestion d’erreurs, style, layout. Découvrez les classes FormPanel, BasicForm et Field
Prérequis
Connaissance HTML, javascript.
Connaissance Ajax
Liens utiles
Démonstrations Formulaire 100% ExtJS 4
Formulaire Ext3 + Ext4/FieldLayout + Ext4/Hbox
Objectifs
Comprendre les techniques d’insertion d’un code html dans un Panel ExtJS
Programme
Nos petits déjeuners ExtJS
Introduction
Partie 1 : formulaire initial
Partie 2 : validation champs
Partie 3 : validation champs personnalisée
Partie 4 : ajout bouton radio
Partie 5 : ajout combo, données dans tableau
Partie 6 : ajout zone de texte
Partie 7 : ajout combo, données dans base de données
Partie 8 : Ajout Boutons soumission / reset
Partie 9 : soumission formulaire
Partie 10 : chargement données au démarrage application
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
Pour créer un formulaire ExtJS, vous devez gérer 2 points clés :
— traiter les données du formulaire
— controller comment les champs sont disposés
le composant à lui seul Ext.form.FormPanel répond à ces objectifs . les fonctionnalités suivantes sont exposés via un objet config ExtJS :
— gestion des erreurs
— écoute touche clavier
— validation de message
— restriction de contenu de champs
Partie 1 : formulaire initial
Objectif :
Code html
Expliquez.
Code Javascript
Expliquez.
REMARQUE : Au lieu d’un tableau d’instances de Ext.form.Field, c’est un tableau d’objet config qui a été utilisé. 2 avantages clés :
— 1) + Rapide à coder
— 2)+ Réutilisable !
QUESTION : à quoi sert l’attribut ‘xType’ ?
REPONSE : l’attribut xType est une chaine de caratères représentant le type de composant qui sera utilisé pour ce champs .
un xType de type ‘textfield‘ reference un composant Ext.form.TextField
Voici quelques exemples :
— textfield
— timefield
— numberfield
— datefield
— combo
— textarea
INFO : le xType par défaut est ‘panel’ . chaque structure … sans attribut ‘xType’ sera donc un Panel
CORRECTION
Bonus
Expliquer le code suivant :
Mettez le en oeuvre dans ce formulaire.
Partie 2 : validation champs formulaire
Ajoutez la ligne suivante dans la configuration du champs ‘Thème’ :
Quel impact sur la validation du champs ?
Ajoutez le code suivant , qui initialise l’objet QuickTips d’ExtJS , et ce AVANt la création du formulaire.
Quel impact ?
Partie 3 : validation personnalisée
Validation personnalisée avec attribut ‘vtype’
Nous souhaitons que l’utilisateur entre un nombre thème formation commençant obligatoirement par une majuscule, et d’au moins 2 caractères.
2 étapes majeures pour cela :
Expliquez l’impact du code suivant :
INFO : chaque définition vType contient :
— xxxVal: Une valeur : expression régulière
— xxxMask: Un masque
— xxxText: Un texte d’erreur
— Une fonction de test
…en complément de la configuration suivante :
Rendu pour mauvais masque
Rendu pour bon masque
Partie 4 : ajout boutons radio
Expliquez et mettez en oeuvre le code suivant.
afin d’avoir le rendu suivant :
Partie 5 : ajout champ de sélection
Nouvelles options à connaître :
— store : données de la combo
— mode : le store doit’il être préchargé avec données présentes localement (local) ou bien données à distance (remote)
— displayField: champ précisant la description
— valueField: champ précisant la valeur
— hiddenName: champ caché utilisé pour stocker et soumettre une valeur différente de la combo si le champ descriptif n’est pas celui affiché.
Création Store
Analysez le code suivant :
Expliquez
Création Combo
Analysez le code suivant :
Expliquez
Rendu visuel
Partie 6 : ajout zone de texte éditable
Pour un rendu suivant :
Expliquez le code suivant.
QUESTION : Ou ajouter ce code ?
QUESTION : à quoi sert l’attribut ‘anchor’
QUESTION : quel est l’impact d’une modification du ‘xtype’ en ‘textarea’ ?
Partie 7 : données combo en base
2 taches à réaliser :
— tache 1 : chargement ‘Ajax’ de la combo
— tache 2 : gestion évènement ‘select’ de la combo
Partie 1 : chargement ‘Ajax’ de la combo
Nous allons modifier l’origine des données. Au lieu d’un tableau en mémoire, les données viennent :
— d’une base de données ‘formationextjs’ (script création table)
— via un script PHP coté serveur (script ici) .
— sous forme d’un flux JSON
Script PHP récupération données combo
Code coté Javascript pour récupérer flux JSON venant du script PHP et alimenter la combo :
ci-sessous exemple de flux récupéré :
Partie 2 : gestion évènement ‘select’ de la combo
Analysez le code suivant , associé au traitement en cas de sélection :
En utilisant la documentation ExtJS associée au Composant comboBox, expliquez ce code.
Par exemple en cas de sélection de ‘Autre’, voici le rendu :
Expliquez.
Partie 8 : ajout boutons soumission / reset
Pour un rendu suivant :
Expliquez le code suivant.
Et le suivant :
Expliquez.
Partie 9 : Soumission formulaire (form.submit())
Expliquez le code suivant :
Suite à soumisson du formulaire, un script PHP va nous retourner un flux JSON . Par exemple voici une simulation d’un flux JSON de réponse (echec)
A VOUS DE JOUER : proposez un script PHP permettant d’insérer les données en base et retourner un ‘Success’
Partie 10 : Chargement initial données champs (form.load())
On veut précharger dynamiquement les champs :
CORRECTION
Conclusion
Dans ce tutoriel , vous avez mis en oeuvre un formulaire ExtJS : conception, validation des champs, validation du formulaire , et chargement du formulaire.
