Tutoriel : Utiliser son propre composant GridPaginatorPerso

Utiliser son propre composant GridPaginatorPerso

 

Pour utiliser le composant que vous venez de creer :

 

Création d'une page creationGridPaginator.js

1) Définition des champs de données :

var champsDeDonnees = [
        {name: 'numero_enregistrement'},
        {name: 'nom_enregistrement'},
        {name: 'date_creation',type:'date',dateFormat:'Y-m-d'}
    ];

2) Définition des colonnes :

var colonnes = [
        {header: 'Identifiant', width: 200, dataIndex: 'numero_enregistrement',sortable: true},
        {header: 'Nom', width: 200, dataIndex: 'nom_enregistrement',sortable: true},
        {header: 'Date', width: 200, dataIndex: 'date_creation',xtype:'datecolumn',format:'d/m/Y',sortable: true}
    ];

3) Définition du nombre de ligne à afficher :

var limit = 2; 

4) Définition de la colonne ordonné par défaut :

var  sort = {
        "field": "numero_enregistrement",
        "direction": "ASC"
    };

5) création du tableau

var monGridPanel = new LIB.grid.MyGridPanelPaginator({
        mesChampsDeDonnees:champsDeDonnees,
        mesColonnes:colonnes,
        limitParPage:limit,
        url:'gridPanelPaginator.php',
        sortInfo:sort
    });

 

6) affichage du tableau :

monGridPanel.show();

La page complete :

Page :creationGridPaginator.js

 

Ext.onReady(function(){
   
    var champsDeDonnees = [
        {name: 'numero_enregistrement'},
        {name: 'nom_enregistrement'},
        {name: 'date_creation',type:'date',dateFormat:'Y-m-d'}
    ];
    var colonnes = [
        {header: 'Identifiant', width: 200, dataIndex: 'numero_enregistrement',sortable: true},
        {header: 'Nom', width: 200, dataIndex: 'nom_enregistrement',sortable: true},
        {header: 'Date', width: 200, dataIndex: 'date_creation',xtype:'datecolumn',format:'d/m/Y',sortable: true}
    ];
   
    var limit = 2;  
   
    var  sort = {
        "field": "numero_enregistrement",
        "direction": "ASC"
    };
   
    var monGridPanel = new LIB.grid.MyGridPanelPaginator({
        mesChampsDeDonnees:champsDeDonnees,
        mesColonnes:colonnes,
        limitParPage:limit,
        url:'gridPanelPaginator.php',
        sortInfo:sort
    });
   
   
    monGridPanel.show();
});

La Page HTML :

Page : myGridPanelPaginator.html

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Insert title here</title>
        <link href="http://127.0.0.1/ext3/ExtJs3/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/ext-all-debug-w-comments.js"></script>
        <script type="text/javascript" src="http://127.0.0.1/ext3/ExtJs3/src/locale/ext-lang-fr.js"></script>
        <script type="text/javascript" src="http://127.0.0.1/ext3/myGridPanelPaginator.js"></script>
        <script type="text/javascript" src="http://127.0.0.1/ext3/creationGridPanelPaginator.js"></script>
    </head>
    <body>
  
    </body>
</html>

contact : julien@lyondev.fr