Formulaire

Disposition :

En Extjs3, la FormPanel utilisé le FormLayout classe pour les étiquettes de champ de positionnement, les boîtes de saisie, les indicateurs d'erreur, etc Ext 4 FormLayout a été entièrement supprimée, en faveur de l'aide des configurations standard pour accord global et la nouvelle FieldLayout (l'un des nouveaux ComponentLayout classes) pour les étiquettes de terrain, etc Il est donc maintenant possible d'utiliser n'importe quel type de mises en page standard au sein de n'importe quelle forme, faire de la création de mises en page de formulaire personnalisé extrêmement simple par rapport à Ext 3.

La mise en conteneur par défaut pour FormPanel est maintenant d'ancrage , bien que toute norme peut maintenant être utilisé dans les formes.

FieldContainer :

Ext4 introduit également une nouvelle classe pour la présentation des formulaires de gestion: Ext.form.FieldContainer . Il s'agit d'un standard Ext.Container qui a été amélioré pour permettre plus d'une étiquette et / ou un message d'erreur, en utilisant tous les mêmes configurations sur l'étiquette et les erreurs de placement qui sont soutenus par Ext.form.Field . Le conteneur enfants seront confinés à l'espace même que l'entrée sur le terrain devrait occuper dans un champ réel. Il est donc facile d'ajouter un groupe de composants arbitraires à un formulaire et les avoir parfaitement aligné avec la forme de champs.

Domaine que Mixin :

L'une des difficultés de longue date avec Ext a été l'ajout non- terrain composants dans un formulaire avec comme-capacités sur le terrain comme mise en page, validation, gestion de la valeur, etc La seule façon de facilement hériter comportement sur le terrain en Extjs3 a été la sous-classe Ext.form.Field directement , mais en réalité, de nombreux éléments doivent sous-classe quelque chose en dehors du terrain hiérarchie de classe. Depuis Ext (et JavaScript) ne supporte pas l'héritage multiple vrai, le résultat est normalement plus de copie si le terrain le code de l 'directement dans la classe personnalisée, ce qui n'est pas optimale pour dire le moins.

Maintenant que Ext 4 supports mixins dans le cadre de son système de mise à jour de classe, ce n'est plus un problème. Field peut maintenant être utilisé comme un mixin à tout autre composant, le rendant simple à apporter leur plein champ Support de l'API à peu près n'importe quoi. Et bien sûr, vous pouvez facilement remplacer les méthodes au besoin si la valeur par défaut sur le terrain le comportement doit être adapté (il est courant de remplacer getValue et setValue par exemple).

Validation :

Un désir commun lorsque les formes de construction est de donner la rétroaction des utilisateurs sur la validité des domaines aussi immédiatement que possible, tant que l'utilisateur entre des données. Bien que cela puisse se faire en Extjs3, il a été maladroit et désirée à l'aide monitorValid option sur FormPanel qui a été non-optimales pour les performances, car elle a invoqué-forme de validation complète plusieurs fois par seconde.

En ExtJs4, nous avons retravaillé la validation du formulaire pour faire une rétroaction immédiate plus élégant et performant. Cette option est activée la mise en œuvre principalement par un écoulement d'un nouvel événement:

• Les champs de saisie maintenant écouter un ensemble d'événements navigateur moderne qui nous permettent de détecter immédiatement les changements que l'utilisateur les fait par n'importe quelle méthode possible, y compris la saisie, couper / coller, et en faisant glisser le texte dans le champ. Nous nous occupons de ces événements et les rouler ensemble, de tir du champ changeEvent lors d'un changement de sa valeur est observée (voir plus loin).
• Chaque champ lui-même sa validation lorsque sa valeur change. Lorsque ses changements de validité valable pour non valides ou vice-versa, il déclenche une nouvelle validitychange événement.
• Lorsque l'un des validitychange événements déclenchés par les champs causes de la validité globale de la forme joignant au changement, la BasicForm tire un validitychange cas de ses propres.

Ce flux d'un nouvel événement permet une rétroaction immédiate aux utilisateurs quant à la validité de la forme, et parce qu'elle est basée sur les événements plutôt que du scrutin, le rendement est excellent. Par conséquent, c'est maintenant le comportement par défaut (il devait être activé explicitement dans Ext 3), même si elle peut bien entendu être facilement désactivé.

Il ya encore des situations, cependant, dans lequel le scrutin peut encore être utile. Certains navigateurs (Opera et notamment les anciennes versions de Safari) ne sont pas toujours déclencher des événements lorsque les champs sont édités à certains égards comme le couper / coller via le menu contextuel. Pour traiter ces cas limites, vous pouvez utiliser la nouvelle pollForChanges config sur FormPanel de mettre en place intervalle d'interrogation pour la modification des valeurs de champ, ce qui déclenche le flux même événement ci-dessus. Même si le scrutin n'est pas encore parfait pour la performance, ce qui est moins intensive de 3 de scrutin poste car il ne vérifie que des changements de valeur, plutôt que de forcer la validation (et donc l'analyse de la valeur, la conversion, et filtrage) à chaque fois.

La validation de chaque champ est maintenant déclenché quand un changement dans le champ de la valeur est détectée (en supposant que le validateOnChange config est toujours activée). Les événements navigateur utilisé pour détecter les changements de valeur sont définies par le checkChangeEvents config, et sont mis à la suivante par défaut:

• changement et propertyChange pour Internet Explorer
• changement , d'entrée , textInput , keyup , et dragdrop pour tous les autres navigateurs

Cet ensemble d'événements détecte avec succès presque tous les changements initiés par l'utilisateur à travers l'ensemble des navigateurs pris en charge. Les seules exceptions connues au moment de l'écriture sont les suivantes:

• Safari 3.2 et plus: couper / coller dans les zones de texte via le menu contextuel, et le texte glisser dans les zones de texte
• Opera 10 et 11: le texte en faisant glisser dans les champs texte et les zones de texte, et couper via le menu contextuel dans les champs texte et les zones de texte
• Opera 9: Même chose que Opera 10 et 11, plus coller à partir du menu contextuel dans les champs texte et les zones de texte

Si vous devez absolument veiller à ce que les changements provoqués par les actions ci-dessus également déclencher la validation, vous pouvez utiliser FormPanel de pollForChanges et pollInterval configs, et / ou startPolling et stopPolling méthodes pour vérifier les changements sur une minuterie.

Ext 3 a appuyé la formBind de propriété sur les boutons ajoutés au formulaire via le bouton de propriété, ce qui leur permet d'être automatiquement activé / désactivé que la validité des changements constituent la.  en ExtJs4, ce qui a été élargie afin que formBind peut être spécifié sur un composant qui est ajouté n'importe où dans le FormPanel .

FieldDefaults :

Une fonction d'économie-temps de l'ancien Extjs3 FormLayout était qu'il permettait aux développeurs de configurer la disposition de tous les champs du formulaire à partir d'une seule configuration, en utilisant le hideLabels , labelAlign , etc config propriétés de FormPanel . Depuis Ext 4 utilise maintenant les mises en page standard pour les contenants forme, il serait beaucoup moins pratique d'avoir à spécifier les mêmes propriétés disposition des champs, encore et encore pour chaque champ ou un conteneur. Par conséquent FormPanel a maintenant un fieldDefaults objet de configuration, qui spécifie les valeurs qui seront utilisées comme configuration par défaut pour tous les domaines à n'importe quelle profondeur dans le FormPanel .

BasicForm :

Bien que BasicForm a été le plus souvent limitée à un usage interne par FormPanel en Extjs3, il a été remaniée au poste 4 pour le rendre plus souple et plus facilement étendu. Il n'a plus besoin de son conteneur associés pour fournir un élément form autour de tous les domaines, et ne nécessite pas de son récipient à la main aviser le BasicForm lors de l'ajout ou suppression de champs. Il est donc désormais totalement découplés de la FormPanel , et peut potentiellement être utilisé pour gérer les champs de formulaire dans n'importe quel conteneur .