Ext.grid

De Bricosoft.

Fichier:IntroToExt grid.gif

Ext.grid ressemble à des tableaux mais en fait c'est une gigantesque purée de div imbriqués avec des id qui changent à chaque reload \o/ (ou pas).

Sommaire

new Ext.grid

Pour ce tutoriel on va se baser sur une page html d'une complexité inextricable, voyez vous même : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Grid</title>
        <link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/js/ext/ext-all-debug.js"></script>
</head>
<body>
<html>
<div id="my_grid"></div>
</body>
</html>

Ensuite la difficulté de chaque nouveau grid sera grandissante, jusqu'à atteindre les limites du cerveau humain. Il y a trois problèmes qui émergent :

  1. de une, la machine pour apprendre dépeinte dans Planète interdite ou dans Matrix n'existe pas.
  2. de deux, ça fait aussi mal à la tête de lire ce tuto que d'utiliser une de ces machines imaginaires
  3. et enfin cinq... y a pas de cinq.

Faites quand meme gaffe aux chemins vers ext-all-debug.js et ext-all.css dans l'en-tete html.

Ext.grid simple sans ajax

Le résultat final est à :

Tu stores

    var myData= [['1', 'pomme'],['2','orange']];
 
    var myStore = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'id'},
           {name: 'punydom'}
        ],
        data: myData
    });

Tu grides

var grid = new Ext.grid.GridPanel({
        store: myStore,
        columns: [
            {
                text     : 'id',
                width    : 50,
                sortable : true,
                dataIndex: 'id'
            },
            {
                text     : 'Fruit',
                width    : 350,
                sortable : true,
                dataIndex: 'fruit'
            }
        ],
        height: 460,
        width: 800,
        title: 'Les fruits',
        renderTo: 'my_grid',
});

Ext.grid avec paging

grid.CheckboxSelectionModel

Rows selectables ou non grace au event 'beforerowselect' : 

// my reader :
var myReader = new Ext.data.JsonReader({
    totalProperty: 'total',
    successProperty: 'success',
    root: 'datas',
    messageProperty: 'message'
	}, ['col1', 'col2', 'updatable']
);
 
/* Example JSON :
{
    "success": true,
    "message": "RAS",
    "total": 0,
    "datas": [
        {
            "col1": "colin",
            "col2": "col deux",
            "updatable": false,
        },
        {
            "col1": "col one",
            "col2": "col two",
            "updatable": true,
        },...
    ]
}
*/
 
 
// my column model :
var infosColumns = [ mySelModel    
                     ,{id:'col1',header: "Col one", dataIndex: 'col1'}
		     ,id:'col2',header: "Col deux", dataIndex: 'col2'}
                  ];
 
// my selection model
// ext:qtip : < Ext4
// data-qtip : Ext4
var mySelModel = new Ext.grid.CheckboxSelectionModel({
// 	header:' ',	// not commented == no "check all" checkbox
	,renderer : function(v, p, record) {
	              if (false == record.data.updatable) {
		            return '<div class="ug-disabled-row-checker" ext:qtip="UPDATE VERBOTEN"> </div>';
		      }
            	    }
	}
	,listeners:{
              beforerowselect:function(sm, rowIndex, keep, rec){               
	        if(rec.data.updatable==false) {
	        	return false;
	        }
       }
    }
 });

grid.ColumnModel

Un ColumnModel de base tout concon : 

 var mycm= new Ext.grid.ColumnModel([
       	        { header: "Numero", width: 120, dataIndex: 'num', sortable: true, editor: new Ext.form.TextField() },
       	        { header: "Commentaire", width: 100, dataIndex: 'comment', sortable: true, editor: new Ext.form.TextArea({ allowBlank: false }) }
                ]);

Un ColumnModel custom avec la chaine ">>>>TON MOUMOUTTE<<<<" affichée devant chaque commentaire : 

 var mycm= new Ext.grid.ColumnModel([
       	        { header: "Numero", width: 120, dataIndex: 'num', sortable: true, editor: new Ext.form.TextField() },
       	        { header: "Commentaire", width: 100, dataIndex: 'comment', sortable: true, editor: new Ext.form.TextArea({ allowBlank: false }),
                  renderer: function(val) {
                       return '>>>>TON MOUMOUTTE<<<<'+val;}
                            }
                ]);

changer la couleur d'une ligne / alter row color

Suivant la valeur d'une colonne (ici "completed") vous renvoyer la class html de votre ligne de tableau : 

grid.getView().getRowClass = function(record, index) {
	return (record.data.completed == '1' ? 'completed' : 'uncompleted');
};

Sans oublier de définir ces classes dans votre fichier css ; 

.completed {
	background-color: #FFDD77;
}
.uncompleted {
	background: #F0CBFE;	
}

relation 1:N dans un tableau / one to many relation into grid

Je n'ai pas encore trouvé de solution élégante, mais vous avez plusieurs solutions :

  • custom renderer avec infobulle pour afficher la liste
    • ok : solution la plus KISS
    • ko : on ne le voit pas à moins d'un survol
  • combobox renderer avec [remote|local] store
    • ok : cas d'un grid editable
    • ko : c'est un élément de formulaire, peu pertinent si lecture seule
  • un bouton action dans la cell.
    • ok : bien visible
    • ko : tricky

toolbar tbar

La barre d'outils ou toolbar ou tbar pour simplifier ou 7b4r en langage 31337 permet de rajouter un tas de boutons ou d'élements de formulaire en haut d'un grid. Bien sur cela s'applique au pendant qui se trouve en bas du grid, la bottombar ou bbar, et non Babar, c’est un éléphant ! Et puis ça a pas le téléphone, les éléphants, et en plus ça salope tout. (c) Derrick.

Exemple : 

tbar: [{ text : 'Recharger', handler: function(){ Ext.getCmp("mygrid").store.reload(); }, iconCls:'icon-reload' },
       { xtype:'textfield', id:'prenom_soeur', name:'prenom_soeur',
         emptyText: 'Le prenom de ta soeur puis Entree',
  	 listeners:{
           render: function(f){ f.el.on('keydown', envoiPrenom, f); }
	 }
        }]

plugins

gridSearch

get Ext.ux.grid.Search.js from :

put into ext-3.2.x/plugins/ and update your page html header : 

<script type="text/javascript" src="/js/ext-3.2.0/plugins/Ext.ux.grid.Search.js"></script>

Add a plugin to your existing grid instance : 

var gridSearch= new Ext.ux.grid.Search({
		minChars:2
		,autoFocus:true
		,mode: 'local'		// no AJAJ, default= remote
		,position: 'top'	// tbar, default= bottom(bbar)
	});
....
 
var grid = new Ext.grid.GridPanel({
    	id: 'mygrid',
    	renderTo: 'mygrid',
        store: store,
...
        plugins: [gridSearch],
        bbar: [...]
        tbar:[...]

En mode 'remote', la chaine saisie se trouve dans $_POST['query'], à vous de vous démerder pour filtrer vos résultats avec.

pageSize

Rajouter une combo avec la taille de page en nombre de lignes. en cours de rédaction

Liens

Récupérée de « http://www.bricosoft.com/Ext.grid »
Outils personnels
Plus