Tutoriel : GridPanel simple

GridPanel simple

Le gridPanel est la représentation d'un tableau en ExtJs.

 

Nous allons créer un tableau simple de trois colonnes.

Le schéma :

  • <body>
    • monGridPanel
      • columns : mesColonnes
        • {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}
      • store : monStore
        • fields : mesChampsDeDonnees
          • {name: 'numero_enregistrement'},  
          •  {name: 'nom_enregistrement'},  
          •  {name: 'date_creation',type:'date',dateFormat:'Y-m-d'}
        • data : mesDonnees
          • rows:[
                        {numero_enregistrement: 1,nom_enregistrement: 'Premier enregistrement',date_creation: '2011-03-13'},
                        {numero_enregistrement: 2,nom_enregistrement: 'Deuxieme enregistrement',date_creation: '2011-03-14'},
                        {numero_enregistrement: 3,nom_enregistrement: 'Troisième enregistrement',date_creation: '2011-03-15'}
                    ]

Le gridPanel :

Notre gridPanel définit quatre paramètres :

  • La propriété autoHeight : qui va agrandir la hauteur du tableau en fonction du nombre de ligne
  • La propriété renderTo : qui permet d'afficher le tableau dans une balise HTML
  • Un objet Store : qui contient et permet de manipuler les données
  • un objet Columns : qui informe le tableau sur la manière de créer des colonnes.

var monGridPanel = new Ext.grid.GridPanel({
        autoHeight:true,
        renderTo:Ext.getBody(),
        store: monStore,
        columns:mesColonnes
    });

Les Colonnes :

Nous allons définir les colonnes de notre tableau sous la forme d'un tableau JSON :

Nos colonnes sont définis avec plusieurs propriétés:

  • header :le titre de la colonne
  • width :la largeur de la colonne
  • dataIndex :le nom du champ de données qui serra placé dans cette colonne
  • sortable :la colonne peut elle être ordonner
  • xtype :raccourci pour créer un type d'objet
  • format :le format d'affichage de la donnée

var mesColonnes = [
        {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}
    ];

 

Le Store :

Nous allons créer un JsonStore car les données qu'il va contenir seront sous la forme JSON.

Notre Store définit  quatre paramètres :

  • La propriété root : qui précise au store quelle nom de propriété contient les données
  • La propriété idProperty : qui précise au store quel champ sera l'identifiant unique
  • L' objet fields : qui contient la mise en forme des données
  • L'objet data :  qui contient les données

 

var monStore = new Ext.data.JsonStore({
        root: 'rows',
        idProperty: 'numero_enregistrement',
        fields:mesChampsDeDonnees,
        data:mesDonnees
    });

Le format de données :

Il permet de connaître le type et le format de chaque donnée récupéré.

Nous utilisons un tableau  JSON de plusieurs paramètres :

  • name : Le nom du champ de la donnée
  • type : Le type de champ
  • dateFormat : le format de la date récupérée

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

Les Données :

Nous utilisons un tableau de données JSON :

Il contient une propriété :

  • rows : le nom de la propriété qui contient le tableau de données constitué de trois lignes avec plusieurs parametres :
    • numero_enregistrement : l'identifiant de l'enregistrement
    • nom_enregistrement : Le libellé de l'enregistrement
    • date_creation : La date de l'enregistrement

var mesDonnees = {
        rows:[
            {numero_enregistrement: 1,nom_enregistrement: 'Premier enregistrement',date_creation: '2011-03-13'},
            {numero_enregistrement: 2,nom_enregistrement: 'Deuxieme enregistrement',date_creation: '2011-03-14'},
            {numero_enregistrement: 3,nom_enregistrement: 'Troisième enregistrement',date_creation: '2011-03-15'}
        ]
    }

Le code complet :

La page gridPanel.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/gridPanel.js"></script>
    </head>
    <body>
  
    </body>
</html>

 

La page gridPanel.js :

Ext.onReady(function(){
   
    var mesChampsDeDonnees = [
        {name: 'numero_enregistrement'},
        {name: 'nom_enregistrement'},
        {name: 'date_creation',type:'date',dateFormat:'Y-m-d'}
    ];
   
    var mesDonnees = {
        rows:[
            {numero_enregistrement: 1,nom_enregistrement: 'Premier enregistrement',date_creation: '2011-03-13'},
            {numero_enregistrement: 2,nom_enregistrement: 'Deuxieme enregistrement',date_creation: '2011-03-14'},
            {numero_enregistrement: 3,nom_enregistrement: 'Troisième enregistrement',date_creation: '2011-03-15'}
        ]
    }
   
   
    var monStore = new Ext.data.JsonStore({
        root: 'rows',
        idProperty: 'numero_enregistrement',
        fields:mesChampsDeDonnees,
        data:mesDonnees
    });
   
   
    var mesColonnes = [
        {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 monGridPanel = new Ext.grid.GridPanel({
        autoHeight:true,
        renderTo:Ext.getBody(),
        store: monStore,
        columns:mesColonnes
    });
   
   
    monGridPanel.show();
}); 

contact : julien@lyondev.fr