Créer son propre composant GridPaginator

Nous allons reprendre les exemples du chapitre précèdent : GrdiPanel dynamique avec pagination. vous devez aussi avoir lu Extend ou comment créer son propre composant 

Pour créer votre propre tableau paginer :

1) rechercher les paramètres variables dans la page gridPanelPaginator.js

Normalement vous devriez trouver à peu prêt cela :  

• champsDeDonnees : le nom des champs Sql à afficher dans le tableau
• mesColonnes: les colonnes du tableau
• limitParPage : le nombre de ligne à afficher
• sortInfo: la colonne qui sera ordonné par défaut
• url : L'adresse de la page php

Tous ces éléments sont variables d'un tableau à un autre. Par conséquent ils ne seront pas définit dans notre classe.

2) Création de la nouvelle classe dans une page séparée : MyGridPanelPaginator.js

Espace de nom :

Nous allons tout d'abord créer un espace de nom dans lequel nous placerons tout nos composants. L'espace de nom sera LIB. Comme ce composant est de type grid, l'espace de nom final sera LIB.grid

Ext.namespace('LIB','LIB.grid');

Squelete de la classe :

LIB.grid.MyGridPanelPaginator = Ext.extend( Ext.grid.GridPanel, {
  
    constructor : function(config) {

        config = Ext.apply( {
                       
        }, config);
       
        LIB.grid.MyGridPanelPaginator.superclass.constructor.call(this, config);
    }
  
});

Les propriétés variables de notre classe :

juste après la ligne :

constructor : function(config) {

1) Si, lors de la création du futur objet, on spécifie la variable champsDeDonnees alors on l'utilisera. Sinon ce sera un tableau vide.

var mesChampsDeDonnees = (config.mesChampsDeDonnees ? config.mesChampsDeDonnees : [] );

2) Nous allons faire de meme pour toutes les variables :

   var mesColonnes = (config.mesColonnes ? config.mesColonnes : []);
   var limitParPage = (config.limitParPage ? config.limitParPage : 2);
   var url = (config.url ? config.url : '');
   var sortInfo = (config.sortInfo ? config.sortInfo : []);

3 ) Création du store : (fields, url et sortInfo sont paramétrés)

       var monStore = new Ext.data.JsonStore({
            root: 'rows',
            fields:mesChampsDeDonnees,
            url:url,
            remoteSort : true,
            sortInfo:sortInfo,
            autoLoad:{
                params:{
                    limit:limitParPage
                }
            }
        });

4) Création du paginator :

     var maPagination = new Ext.PagingToolbar({
            store: monStore,  
            pageSize: limitParPage,
            displayInfo: true    
        });

 La configuration par défaut :

        config = Ext.apply( {
            autoHeight:true,
            renderTo:Ext.getBody(),
            store: monStore,
            columns:mesColonnes,
            bbar: maPagination
           
        }, config);

 L'appel de la methode de la classe parente :

 LIB.grid.MyGridPanelPaginator.superclass.constructor.call(this, config);

3) La Classe complete :

Page : MyGridPanelPaginator.js

Ext.namespace('LIB','LIB.grid');

/**
 * @class LIB.grid.MyGridPanelPaginator
 * @extends Ext.grid.GridPanel
 * @constructor
 *
 * @param {Object} config Les options de configurations
 */
LIB.grid.MyGridPanelPaginator = Ext.extend( Ext.grid.GridPanel, {
   
    constructor : function(config) {

        var mesChampsDeDonnees = (config.mesChampsDeDonnees ? config.mesChampsDeDonnees : []);
        var mesColonnes = (config.mesColonnes ? config.mesColonnes : []);
        var limitParPage = (config.limitParPage ? config.limitParPage : 2);
        var url = (config.url ? config.url : '');
        var sortInfo = (config.sortInfo ? config.sortInfo : []);
       
        var monStore = new Ext.data.JsonStore({
            root: 'rows',
            fields:mesChampsDeDonnees,
            url:url,
            remoteSort : true,
            sortInfo:sortInfo,
            autoLoad:{
                params:{
                    limit:limitParPage
                }
            }
        });
   
        var maPagination = new Ext.PagingToolbar({
            store: monStore,  
            pageSize: limitParPage,
            displayInfo: true    
        });
       
        config = Ext.apply( {
            autoHeight:true,
            renderTo:Ext.getBody(),
            store: monStore,
            columns:mesColonnes,
            bbar: maPagination
           
        }, config);

        LIB.grid.MyGridPanelPaginator.superclass.constructor.call(this, config); 
    }
   
});