Discussion :

[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

[mynour]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[takitano]

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.

[Mako 5013]

Voici le code pour la pagination :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

layout:'column'

et dans ton grid, tu mes
tu mes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

columnWidth:1

[takitano]

Concernant ta pagination,

tu dois utiliser l'attribut reader dans ton store (de type Store, et non ArrayStore ...)

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ...

[Mako 5013]

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.



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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[takitano]

bonjour ...

effectivement c'est tres amusant ... lol
essayes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

layout:'fit'

, au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

layout:'table'

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

[Mako 5013]

effectivement c'est tres amusant ... lol

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

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

[takitano]

t as fait un panel.dolayout()

[Mako 5013]

Non, je ne l'avais pas fait, mais même en le rajoutant à la fin, cela ne change rien...

[takitano]

le pb viens de ton panel ...

as tu enlevé ?:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

      layoutConfig: {columns: 1},

[Mako 5013]

as tu enlevé ?:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

layoutConfig: {columns: 1},

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

[takitano]

bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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');

[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

[takitano]

avec ce code,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...



mettre dans grid:

autoheight:true,

[Mako 5013]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Mako 5013]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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