[GWT][GXT] Les grids

En GXT, on a souvent le besoin de mettre en forme des données. J'ai eu besoin de le faire, en me baladant sur le showcase de Sencha, j'ai vu le plugin exapander pour les grid. Un très beau rendu qui permet d'afficher des compléments d'informations pour une liste d'objets donnée.
Ca donnera ça :

On part de notre modèle pour aller vers la vue.

 Voici notre modèle : Student =

On déclare 3 attributs pour faire simple et un constructeur recevant nos 3 attributs.
On créé ensuite une interface héritant de BeanModelMarker

Ne surtout pas oublier l'annotation @BEAN({package}.{Class}.class), elle est très importante dans la liaison entre la classe Student et cette interface.

Maintenant on passe du côté Vue

Là ou on veut afficher notre grid, on créé une liste de Student, appelée students :

On se créé un magasin puis pour chaque Student de notre liste students, on génère le BeanModel associé. Ainsi, nous avons un store contenant des BeanModel :

On créé ensuite un XTemplate (KESAKO ? c'est ce qui sera affiché lorsque l'on cliquera sur le petit plus dans notre grid, on peut ne pas le faire si on veut juste une grid standard) :

Maintenant, il faut créer les colonnes. C'est là que c'est Magique.On créé une liste de ColumnConfig, on y ajoute notre plugin expander qui nous permet d'afficher des info supplémentaires selon le précédent XTemplate puis on créé autant de nouveau ColumnConfig que l'on veut de colonne.

 

2 méthodes très importantes ci-dessus,

colum.setHeader("Prénom");

colum.setId("firstName");

La méthode magique est cette dernière. Ce qu'on lui passe => firstName est, vous l'avez peut être déjà remarqué, le nom d'un des attributs de mon objet Student. Il faut retourner dans notre modèle Student pour générer tous les getters dont nous aurons besoin. ici firstName et LastName Student.class.php

Maintenant c'est quasiment fini, il faut créer le fameux Grid en lui passant notre liste de (Student)BeanModel et notre ColumnModel cm.

Voilà, c'est fini et normalement, je viens de le tester, ca fonctionne niquel !
Enjoy ;)