Tutoriel : Grid

Grid

Les éléments du réseau ont été réécrits à partir du sol pour Ext 4. Bien que cela a été pour de bonnes raisons et les bénéfices seront en vaut la peine, ce n'est malheureusement l'un des domaines dans Ext 4 où une compatibilité complète n'a pas pu être pratiquement maintenu. Un guide de migration complète sera fournie pour aider à la transition de la Extjs3 à 4 grilles.

Intelligent Rendering

grille de Ext 3 fonctionne parfaitement, mais prend le "plus petit dénominateur commun» pour son soutien riche en fonctionnalités par engendre toujours le balisage complet de toutes les fonctionnalités nécessaires à la grille (qui est trop lourde-dans la plupart des cas). Ext 4 adopte une approche beaucoup plus intelligente à ce problème. La grille de base par défaut a balisage très léger, et seulement en tant que développeurs d'activer les fonctionnalités différentes du balisage supplémentaire fonctionnalités spécifiques soient rendus. Il s'agit d'un énorme coup de pouce à la fois pour la vitesse de rendu de page et de la performance globale des réseaux.

Mise en page normalisée

Avec un pipeline de rendu plus intelligent, de nombreuses parties de la nouvelle grille ont été faites en bonne Composants et intégrés dans le système de gestion de norme plutôt que de compter sur le balisage intérieur personnalisé et CSS. Cela nous permet d'unifier les processus de rendu de la grille avec le reste du cadre, tout en conservant une parfaite assurance-chômage expérience pixel.

Un bon exemple de ceci est la nouvelle HeaderContainer classe. En Ext 3 têtes de colonne ont été cuits dans le réseau et pas très variés. En Ext 4-têtes de colonne sont remplies conteneurs et maintenant utiliser une norme HBox mise en page, vous permettant de faire des choses comme fournir des valeurs personnalisées flex par colonne.

Fonctionnalités prises en charge

En Extjs3, il était facile d'ajouter de nouvelles fonctionnalités aux réseaux, mais il n'y avait pas de stratégie unique pour le faire. Beaucoup de fonctionnalités supplémentaires ont été fournis sous forme de plugins, mais certains ont été fournis au moyen de sous-classement. Il était donc très difficile (voire impossible) de combiner certaines fonctions facilement.

Ext 4 comprend une base de la grille nouvelle classe appelée Ext.grid.Feature qui fournit la base pour la création d'une grande souplesse caractéristiques du réseau en option. Le sous-jacentes des modèles peuvent maintenant être modifiés par n'importe quel entité classes afin de décorer ou de muter le balisage que le GridView génère. Caractéristiques de fournir une puissante alternative à l'ancien sous-classement GridView car il est facile de mélanger et assortir des fonctions compatibles.

Quelques exemples de fonctionnalités disponibles dans le poste 4 de la grille sont:

  • RowWrap
  • RowBody
  • Groupement
  • Chunking / mise en mémoire tampon

Défilement virtuel

Le poste 4 grille désormais en mode natif prend en charge ses données en mémoire tampon lors du rendu, fournissant une virtuelle, la charge sur la vue à la demande de ses données. Grilles sera maintenant facilement supporter des centaines voire des milliers de dossiers sans pagination, qui sera une amélioration massive par rapport aux capacités du réseau de Ext 3.

Modification des améliorations

En Extjs3, il fallait utiliser les institutions spécialisées EditorGrid classe pour fournir une grille modifiable, ce qui limitait sa souplesse.  en ExtJs4, il ya maintenant une édition plugin qui peut être appliquée à toute instance de réseau, il est complètement réutilisable dans tous les réseaux.

Dans le cadre de l'amélioration de l'édition, le populaire RowEditor extension du Extjs3 a été promu à une classe et entièrement prise en charge cadre composante-premier poste 4.

DataView

Le nouveau GridView en Ext 4 étend la norme DataView classe maintenant. Cela ne minimise pas l'intérieur du code dupliqué, il permet également la nouvelle grille encore plus facile à personnaliser. Parce qu'elle s'étend DataView la nouvelle grille est également en mesure de tirer parti des modèles de sélection comme n'importe quel point de vue, y compris la sélection discontinguous via la navigation au clavier. Le Home , End , PageDown et PageUp touches sont entièrement pris en charge.