Pagination dans une grille

Version imprimable

19/05/2010, 17h06
Mako 5013

Pagination dans une grille

Bonjour,

Le soucis est le suivant. J'ai une grille qui doit afficher une liste de valeur (donnée sous la forme d'un tableau : [['obj 1 col 1','obj 1 col 2'],['obj 2 col 1', etc.). Tout fonctionne nickel.

Par contre, lorsque je veux utiliser la pagination pour ma grille (pour afficher les résultats par tranche de 10 par exemple), la première page s'affiche sans problème, mais je n'arrive pas à afficher les autres. Quelqu'un saurait-il comment faire ?

Autre petite question en passant : est-il possible de faire en sorte qu'une grille s'adapte au contenu, en terme de hauteur (height), comme c'est le cas de base pour la largeur (width) ?

Merci.

Mako

Bonjour!

Tu peux nous montrer ton code stp?

Pour ce qui concerne la hauteur, je pense que [ autoHeight: true, ] va résoudre le problème.
Code:

1 2 3 4 5 6 7 8 9 10 11 //.. title: 'My Grid', width: 400, height: 250, autoHeight: true, initComponent: function() { this.columns = [ { //....

20/05/2010, 00h48
takitano

Citation:

Envoyé par Mako 5013

Bonjour,

Le soucis est le suivant. J'ai une grille qui doit afficher une liste de valeur (donnée sous la forme d'un tableau : [['obj 1 col 1','obj 1 col 2'],['obj 2 col 1', etc.). Tout fonctionne nickel.

Par contre, lorsque je veux utiliser la pagination pour ma grille (pour afficher les résultats par tranche de 10 par exemple), la première page s'affiche sans problème, mais je n'arrive pas à afficher les autres. Quelqu'un saurait-il comment faire ?

Autre petite question en passant : est-il possible de faire en sorte qu'une grille s'adapte au contenu, en terme de hauteur (height), comme c'est le cas de base pour la largeur (width) ?

Merci.

Mako

pour ta première question il faudrait que tu montres ton code ... pour trouver ton erreur ...

concernant la deuxième, (j'ai pas tres bien compris, mais) si tu veux faire une adaptation de la hauteur de ta cellule de ton tableau à son contenu, je pense que tu dois rajouter des baise html, comme <p>mon contenu</p>.
Il me semble que le contenu est tronqué par défaut, car il n y a pas de balise...
il faudra alors rajouter l'attribut renderer dans ton objet column de ta grid.

Voici le code pour la pagination :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
var listeResultat; //  Liste de résultat sous forme de tableau initialisée correctement 
var store = new Ext.data.ArrayStore({
     fields: [
          { name: 'labelId', type: 'float' },
          { name: 'labelCompleteName', type: 'string' },
          { name: 'labelPostCode', type: 'float' },
          { name: 'labelLoc', type: 'string' },
          { name: 'labelType', type: 'string' },
          { name: 'labelName', type: 'string' },
          { name: 'labelManager', type: 'string' },
          { name: 'labelStrNum', type: 'float' }
     ],
     data: listeResultat
});
// On cree notre grille avec les bonnes donnees dedans
var grid = new Ext.grid.GridPanel({
     autoExpandColumn: 'labelCompleteName',
     height: 300, // J'aimerais me passer de passer la hauteur en 'dur'
     enableColumnResize: false,
     store: store,
     columns: [
          {id:'labelId', header: "<bean:message key="label.id"/>", sortable: true, dataIndex:'labelId'},
          {id:'labelCompleteName', header: "<bean:message key="label.name.complete"/>", sortable: true, dataIndex:'labelCompleteName'},
          {id:'labelPostCode', header: "<bean:message key="label.post.code"/>", sortable: true, dataIndex:'labelPostCode'},
          {id:'labelLoc', header: "<bean:message key="label.locality"/>", sortable: true, dataIndex:'labelLoc'},
          {id:'labelType', header: "<bean:message key="label.type"/>", sortable: true, dataIndex:'labelType'},
          {id:'labelName', header: "<bean:message key="label.name.original"/>", sortable: true, dataIndex:'labelName'},
          {id:'labelManager', header: "<bean:message key="label.manager"/>", sortable: true, dataIndex:'labelManager'},
          {id:'labelStrNum', header: "<bean:message key="label.count.streetnum"/>", sortable: true, dataIndex:'labelStrNum'}
               ],
     bbar: new Ext.PagingToolbar({
          pageSize: 10,
          store: store,
           displayInfo: true,
           displayMsg: 'Résultats {0} - {1} sur {2}',
           emptyMsg: 'Pas de résultat'
     })
});

Concernant le second problème, ce que je veux, c'est que la taille de ma grille s'adapte au nombre de résultats à afficher. Si par exemple je veux avoir 25 résultats par pages, mais que je n'en ai que 10 à afficher, je ne veux pas avoir "de la place vide" pour les 15 dernières lignes. Dans l'idée, je pensais que "autoHeight" répondrait à mes attentes, mais cela ne fonctionne pas. Si je le mets à true, et que je mets par la suite height: 'auto', ma grille fait une ligne de hauteur...

@takitano :
J'avoue ne pas trop saisir ta proposition...Adaptée au code ci-dessus, cela donnerait quoi ?

Merci.

Mako

20/05/2010, 11h17
takitano

ok ... oublie ce que j'ai dit hier ...

j'ai mal compris ...

en fait pour arriver a tes fins, tu dois:
dans l'objet parent de ton grid, tu dois mettre l'attribut:

Code:

layout:'column'

et dans ton grid, tu mes
tu mes

Code:

columnWidth:1
20/05/2010, 11h37
takitano

Concernant ta pagination,

tu dois utiliser l'attribut reader dans ton store (de type Store, et non ArrayStore ...)
20/05/2010, 14h20
Mako 5013
Pour la pagination, il me dit à présent que "this.proxy is null or not an object"; et je ne vois pas trop quoi lui donner comme proxy...En effet, je récupère mes valeurs comme ceci (en initialisant le tout dans l'action Struts associée à ma jsp) :
Code:

1 2 var listeResultat = <%=session.getAttribute("listeResultatExtJS")%>;
En outre, je viens de m'apercevoir que le problème est légèrement plus complexe, puisqu'il m'affiche correctement le nombre de pages (par exemple, 2 dans le cas de 15 résultats avec pageSize: 10), mais concrètement, tous mes résultats sont tout de même affichés directement sur la première page (avec une scroll barre si besoin est).

Pour le second problème, j'ai fait comme tu m'as dit, avec le layout:column dans l'objet parent de la grille. Par contre, pour le columnWidth de la grille, d'une part cela ne fonctionne pas, et d'autre part, ce n'est pas un attribut décrit dans l'API...Enfin, ce ne serait pas plutôt sur le height qu'il faudrait jouer ? Parce que pour le width, je n'ai pas de problème...

Mako
20/05/2010, 15h00
takitano

pour le layout column, avec un widthColumn a 1, ta grille prendra toute la largeur disponible, et la hauteur s'adaptera au contenu ...

c est que tu voulais je crois ...

1 pièce(s) jointe(s)

Je crois que je n'ai pas du être très clair...Ci-joint une image du problème. L'image correspond au code en-dessous.

Pièce jointe 62691

Là, il y a un soucis de height évident, et également de width (que j'avais du rentrer en dur auparavant pour le panel, mais cela ne me satisfaisait pas). Le but du jeu est donc de faire en sorte que ma grille prenne toute la place à droite, et s'adapte au contenu en hauteur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
var listeResultat = <%=session.getAttribute("listResultExtJS")%>;
var store = new Ext.data.Store({
     reader: new Ext.data.ArrayReader({}, [
          // Comme dans le code des messages précédents
     ]),
     data: listeResultat
});
// On cree notre grille avec les bonnes donnees dedans
var grid = new Ext.grid.GridPanel({
     autoExpandColumn: 'labelCompleteName',
     widthColumn: 1,
     enableColumnResize: false,
     store: store,
     columns: [
            // Comme dans le code des messages précédents
     ],
     bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            displayMsg: 'Résultats {0} - {1} sur {2}',
            emptyMsg: 'Pas de résultat'
      })
});
 
var panel = new Ext.Panel({
      renderTo: 'main_ExtJS',
      layout: 'table',
      layoutConfig: {columns: 1},
      defaults: {
              frame: true,
              collapsible: true
       },
       items: [{
              title: "<bean:message key="title.street.list"/>",
              layout: 'column',
              buttonAlign: 'left',
              items: [ grid
                   ],
              buttons: [
                   buttonBack,
                   buttonExtract
              ]
       }]
});

Au passage, le code ci-dessus permet de voir également pour la pagination ;)

Mako

20/05/2010, 15h30
takitano

bonjour ...

effectivement c'est tres amusant ... lol
essayes

Code:

layout:'fit'

, au lieu de

Code:

layout:'table'

layout:'table', n'existe pas ... dans extjs ...
20/05/2010, 15h36
Mako 5013

Citation:

effectivement c'est tres amusant ... lol

Bizarrement, je ne pense pas que les clients vont trouver ça aussi amusant...

Citation:

layout:'table', n'existe pas ... dans extjs ...

Tu en es sûr ? Parce que dans le 'layout' du panel, sur l'API (voir ici), il existe...

Pour le 'fit', il y a du mieux, mais c'est pas encore gagné ! La grille et le panel prennent bien chacun toute la largeur, ça c'est cool. Par contre, pour la hauteur, c'est encore pire : je ne vois même plus la première ligne ! En fait, je vois simplement la moitié des headers de la table, et puis c'est tout...

Mako
20/05/2010, 15h43
takitano

t as fait un panel.dolayout()
20/05/2010, 15h54
Mako 5013

Non, je ne l'avais pas fait, mais même en le rajoutant à la fin, cela ne change rien...
20/05/2010, 16h07
takitano

le pb viens de ton panel ...

as tu enlevé ?:

Code:

layoutConfig: {columns: 1},
20/05/2010, 16h10
Mako 5013

Citation:

as tu enlevé ?:

Code:

layoutConfig: {columns: 1},

Oui, j'ai essayé sans ça, et avec le panel.doLayout(), mais rien n'y fait...

bonjour,

Je viens de coder ce truc a l'arrache ... il faut t en inspirer, ca devrait marcher ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var p = new Ext.Panel({
   //   renderTo: 'main_ExtJS',
      layout: 'column',
     // layoutConfig: {columns: 1},
      defaults: {
              frame: true,
              collapsible: true
       },
       items: [{
              title: "sdfsdfsd",
              columnWidth:1,
              layout: 'column',
	           items:[{
	           	xtype:'panel',
	           	title:'popo',
	           	html:'sdfsdfs df sdf sdf sdf sd',
	           	columnWidth:1
	           }]
       }]
}); 
 p.render('panel-basic');

20/05/2010, 16h42
Mako 5013

Dans ton code, il y a un panel dans un autre panel, ce qui n'est pas vraiment ce que je recherche...

En l'état, cela ne fonctionne pas : j'ai de nouveau une seule ligne qui s'affiche, pour le reste, il me faut scroller. J'ai essayé de le modifier à droite à gauche, mais cela ne change pas grand chose au résultat...

Mako

1 pièce(s) jointe(s)

avec ce code,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var p = new Ext.Panel({
   //   renderTo: 'main_ExtJS',
      layout: 'column',
     // layoutConfig: {columns: 1},
      defaults: {
              frame: true,
              collapsible: true
       },
       items: [{
              title: "sdfsdfsd",
              columnWidth:1,
              layout: 'column',
	           items:[{
	           	columnWidth:1,
                    title: 'Grid in a Portlet',
                    layout:'fit',
                    tools: tools,
                    items: new SampleGrid([0, 2, 3])
                }]
       }]
});

j obtiens ca ...

http://www.developpez.net/forums/att...1&d=1274368069

mettre dans grid:

autoheight:true,

21/05/2010, 07h47
Mako 5013

Ok, pour la grille, cela fonctionne à présent. Je ne suis pas obligé de mettre un panel dans un panel, le

Code:

autoHeight: true,

semble suffire (j'étais pourtant sûr d'avoir essayé auparavant...). Donc une bonne chose de faite.

Il ne me reste plus que le second problème, à savoir la pagination. Petit rappel des faits. Pour le moment, toutes mes données sont chargées dans la première page, bien que la toolbar de ma grille m'affiche le bon nombre de page total (par exemple 5 si j'ai 45 résultats et un pageSize de 10). Avec le code posté précédemment, j'ai une erreur concernant un this.proxy qui est null (normal vu que je n'en ai pas défini...).

Le soucis, c'est que je ne vois pas comment utiliser un proxy, mes données étant dans un tableau "en dur" (cf code précédent).

Mako

C'est bon également pour la pagination. Le problème était que mes données étaient en local (pas d'appel serveur pour (re)charger les données page par page). J'ai trouvé une extension me permettant de réaliser simplement ce que je souhaitais, à partir du lien suivant (fichier PagingStore3_v0.4.1 zip).

Pour ceux à qui cela pourrait être utile, voici le code final (pagination + autoHeight).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
var listeResultat; // Donnees sous forme de tableau
var store = new Ext.ux.data.PagingStoreArray({
     fields: [
          {name: 'name01', type: 'string'},
          {etc.}
          // Comme dans le code des messages précédents
     ],
     data: listeResultat,
     lastOptions: {params: {start: 0, limit: 10}}
});
// On cree notre grille avec les bonnes donnees dedans
var grid = new Ext.grid.GridPanel({
     autoExpandColumn: 'name01',
     widthColumn: 1,
     autoHeight: true,
     enableColumnResize: false,
     store: store,
     columns: [
          {id: 'col01', header: 'colonne 1', sortable: true, dataIndex: 'name01'},
          {etc.}
          // Comme dans le code des messages précédents
     ],
     bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            displayMsg: 'Résultats {0} - {1} sur {2}',
            emptyMsg: 'Pas de résultat'
      })
});
// Panel pour afficher la grille, ainsi que deux boutons definis au prealable               
var panel = new Ext.Panel({
      renderTo: 'main_ExtJS', // id d'une div presente dans ma page
      layout: 'column',
      defaults: {
              frame: true,
              collapsible: true
      },
      items: [{
              title: 'Ma grille',
              columnWidth: 1,
              layout: 'column',
              buttonAlign: 'left',
              items: grid,
              buttons: [
                   buttonBack,
                   buttonExtract
              ]
      }]
});

Merci à tous ceux qui ont eu la gentillesse de m'aider.

Mako