Ext.grid
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).
new Ext.grid
Pour ce tutoriel on va se baser sur une page html d'une complexité inextricable, voyez vous même : <source lang="html4strict"> <!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>
</body> </html> </source>
Ensuite la difficulté de chaque nouveau grid sera grandissante, jusqu'à atteindre les limites du cerveau humain. Il y a trois problèmes qui émergent :
- de une, la machine pour apprendre dépeinte dans Planète interdite ou dans Matrix n'existe pas.
- de deux, ça fait aussi mal à la tête de lire ce tuto que d'utiliser une de ces machines imaginaires
- 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
<source lang="javascript">
var myData= [['1', 'pomme'],['2','orange']];
var myStore = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'id'},
{name: 'punydom'}
],
data: myData
});
</source>
Tu grides
<source lang="javascript"> 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',
});
</source>
Ext.grid avec paging
- http://www.mgd.im/js/paging.js
- Liste de .fr créés quotidiennement : http://www.mgd.im
grid.CheckboxSelectionModel
Rows selectables ou non grace au event 'beforerowselect' :
<source lang="javascript"> // 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 '
';
}
}
} ,listeners:{
beforerowselect:function(sm, rowIndex, keep, rec){
if(rec.data.updatable==false) { return false; }
} } });
</source>
grid.ColumnModel
Un ColumnModel de base tout concon : <source lang="javascript">
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 }) }
]);
</source>
Un ColumnModel custom avec la chaine ">>>>TON MOUMOUTTE<<<<" affichée devant chaque commentaire :
<source lang="javascript">
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;}
}
]);
</source>
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 : <source lang="javascript"> grid.getView().getRowClass = function(record, index) { return (record.data.completed == '1' ? 'completed' : 'uncompleted'); }; </source>
Sans oublier de définir ces classes dans votre fichier css ; <source lang="css"> .completed { background-color: #FFDD77; } .uncompleted { background: #F0CBFE; } </source>
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 : <source lang="html4strict"> <script type="text/javascript" src="/js/ext-3.2.0/plugins/Ext.ux.grid.Search.js"></script> </source>
Add a plugin to your existing grid instance : <source lang="javascript"> 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:[...]
</source>
En mode 'remote', la chaine saisie se trouve dans $_POST['query'], à vous de vous démerder pour filtrer vos résultats avec.
Liens
pageSize
Rajouter une combo avec la taille de page en nombre de lignes. en cours de rédaction
Liens
plugins
- https://market.sencha.com/users/68/addons/95 grid filter par colonne