Grid tout tassé

Version imprimable

1 pièce(s) jointe(s)

Grid tout tassé

Salut,

J'ai un problème d'affichage avec un grid:

Je génère un grid qui est ajouté via appendChild dans un accordionPane.

Les données du store sont affichées, mais le grid est tout tassé en bas de l'accordionPane, les entêtes de colonnes sont recouvertes par les lignes de résultat etc (voir image)

Voici le code du Grid, lancé à partir d'onClick sur un Tree, le Tree étant instancié dans le addOnLoad:

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
 
[...]
var storeModelesListe = new dojo.data.ItemFileReadStore({
                                            data: donnees
                                            });
 
                                        var structureModeles = [
                                            { field: 'titre', name: 'Titre', width: '200px' },
                                            { field: 'producteur', name: 'Producteur', width: '50px' },
                                            { field: 'support', name: 'Support', width: 'auto' }
                                        ];
 
 
 
                                        gridModeles = new dojox.grid.DataGrid({
                                                            query:{ id: '*' },
															store : storeModelesListe,
															structure: structureModeles,                                                            
                                                            clientSort: true,
                                                            rowSelector: '20px'                                                            
                                        }, document.createElement('table'));
 
				  						dojo.byId('paneGrid').appendChild(gridModeles.domNode);
				                        gridModeles.startup();
[...]

Voici le markup qui reçoit le grid:

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
<div dojoType="dijit.layout.BorderContainer"
     design="sidebar"
     style="width: 100%;height:600px;">
 
        <div dojoType="dojox.layout.ContentPane"
             id="divArbre"
             style="width: 10%;"
             splitter="true"
             liveSplitters="true"
             region="left">
            <div id="btnValid">
                Sauver
            </div>
 
            <div id="arbre1114"></div>
        </div>
 
        <div dojoType="dojox.layout.ContentPane"
             region="center"
             id="main1114">
 
                <div id="accordeon"
                     dojoType="dijit.layout.AccordionContainer"
                     style="height:550px;">
 
					<div id="paneGrid"
					   jsId="paneGrid"
                       dojoType="dijit.layout.AccordionPane"
                       title="Liste">
 
                    </div>
 
[....]

De mémoire,
Code:

1 2 3 //dojo.byId('paneGrid').appendChild(gridModeles.domNode); dijit.byId('paneGrid').containerNode.appendChild(gridModeles.domNode);
Dis moi si c'est bon, sinon je testerai ce soir...

ERE

10/04/2009, 16h55
*.Har(d)t

1 pièce(s) jointe(s)
Citation:
Envoyé par emmanuel.remy

De mémoire,

Code:

1 2 3 //dojo.byId('paneGrid').appendChild(gridModeles.domNode); dijit.byId('paneGrid').containerNode.appendChild(gridModeles.domNode);

Dis moi si c'est bon, sinon je testerai ce soir...

ERE
Beaucoup mieux car le Grid se place comme il faut en haut du container.

En revanche, je n'ai toujours pas un vrai Grid (voir capture d'écran)

EDIT
----

J'ai testé avec le code exemple dont je me suis fortement inspiré, qui est à la page

http://docs.dojocampus.org/dojox/gri...ing-a-datagrid

et là ça fonctionne bien.

J'ai adapté le code pour l'afficher dans mon layout, et même problème qui réapparaît.

Donc ça ne semble pas venir des données, du store, ou du model.

Je cherche si certains styles ne seraient pas mal ou pas appliqués.

Encore un petit effort, hein ? :D

Je suis étonné par ton code. Essaie plutôt celui-ci:

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

<style type="text/css">
   #grid { 
        width: 100%;
        height: 100%;
   }
</style>

puis ce code JS: 

//en plus, suppression du document.createElement("Table")
gridModeles = new dojox.grid.DataGrid({
                     query:{ id: '*' },
                     store : storeModelesListe,
                     structure: structureModeles,
                     clientSort: true,
                     rowSelector:'20px',
                     id: 'grid'
                     });

dojo.byId('paneGrid').appendChild(gridModeles.domNode);

//est ce bien nécessaire ? Pas sûr, A essayer en commentaire
//gridModeles.startup();

[...]

ERE

10/04/2009, 17h58
*.Har(d)t

Le startup semble nécessaire. Sans lui, le grid est vide.

J'ai ajouté les règles de style et l'id que tu indiques, mais ça ne change rien.

Pour le document.createElement("table"), c'est quelque chose qui est présent dans le code de la doc qui me sert de modèle.

J'ai essayé avec un div et un table pour voir, mais c'est pareil.
Sans le createElement, c'est toujours pareil (donc je l'ai supprimé :) )

*.Har(d)t, fais attention dans mon précédent message j'ai recopié bêtement ton

Code:

dojo.byId('paneGrid').appendChild(gridModeles.domNode);

Le code que je voulais te donner est celui-ci:

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
 
<style type="text/css">
   #grid { 
        width: 100%;
        height: 100%;
   }
</style>
 
puis ce code JS: 
 
//en plus, suppression du document.createElement("Table")
gridModeles = new dojox.grid.DataGrid({
                     query:{ id: '*' },
                     store : storeModelesListe,
                     structure: structureModeles,
                     clientSort: true,
                     rowSelector:'20px',
                     id: 'grid'
                     });
 
dijit.byId('paneGrid').containerNode.appendChild(gridModeles.domNode);
 
//est ce bien nécessaire ? Pas sûr, A essayer en commentaire
//gridModeles.startup();
 
[...]

ERE

Re,

Je viens de faire un test et je te confirme que cela fonctionne:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<style type="text/css">
   #grid { 
        width: 100%;
        height: 100%;
   }
</style>
 
puis ce code JS: 
 
gridModeles = new dojox.grid.DataGrid({
                     query:{ id: '*' },
                     store : storeModelesListe,
                     structure: structureModeles,
                     clientSort: true,
                     rowSelector:'20px',
                     id: 'grid'
                     });
 
dijit.byId('paneGrid').containerNode.appendChild(gridModeles.domNode);
gridModeles.startup();
 
[...]

ERE

14/04/2009, 11h05
*.Har(d)t

Salut Emmanuel,

Désolé du délai de réponse, je n'ai pas pu travailler sur mon code ce week-end.

J'avais bien remarqué l'erreur de copie, j'ai conservé le containernode dans mon code ^^

Sinon, chez moi ça ne donne rien, je suppose que le code encapsulant tout ça doit interférer d'une manière ou d'une autre.

Vendredi soir j'avais une liste qui s'affichait en haut du container choisi, mais les entêtes de colonne étaient recouvertes par la liste, et je n'avais pas des cases de Grid comme on a habituellement.

Aujourd'hui, quand je clique pour générer mon Grid, j'ai une erreur de type "this.store.getFeatures is not a function"

Je vais débugger et retester et je te tiens au courant.
14/04/2009, 12h12
emmanuel.remy

Si cela ne marchait pas plus qu'avant essaie de me poster un zip du code complet (généré) que je regarde d'où cela peut venir.

ERE

1 pièce(s) jointe(s)

Bon, retour au statu quo.

Un problème de quotes avait tout foutu en l'air, je suis revenu au stade ou ça s'affiche mal.

En fait, les entêtes de colonnes s'affichent bien là où elles devraient être, mais pas le contenu du Grid, qui s'affiche apparemment dans le conteneur supérieur à celui des entêtes. Ce qui fait que ça recouvre les entêtes et que ça ne s'affiche pas comme il faut.

Ci-joint une capture.

Voici le markup:
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 <div dojoType="dijit.layout.BorderContainer" design="sidebar" style="width: 100%;height:600px;"> <div dojoType="dojox.layout.ContentPane" id="divArbre" style="width: 10%;" splitter="true" liveSplitters="true" region="left"> <div id="arbre1114"></div> </div> <div dojoType="dojox.layout.ContentPane" region="center" id="main1114"> <div id="accordeon" dojoType="dijit.layout.AccordionContainer" style="height:550px;"> <div id="paneGrid" jsId="paneGrid" dojoType="dijit.layout.AccordionPane" title="Liste"> </div>
J'ai l'impression que les données du Grid s'affichent dans l'AccordionContainer au lieu d'aller à la suite des entêtes dans le AccordionPane (id=paneGrid)

Je vais essayer de faire un zip si je ne trouve pas, mais comme il y a du PHP et des bases de données derrière, il faut que je prenne un peu de temps pour adapter.

15/04/2009, 14h27
emmanuel.remy

Citation:

Envoyé par *.Har(d)t

Bon, retour au statu quo.

Je vais essayer de faire un zip si je ne trouve pas, mais comme il y a du PHP et des bases de données derrière, il faut que je prenne un peu de temps pour adapter.

Fais un zip uniquement avec tes données JSON récupérées et le code HTML généré par ton script PHP.

ERE
15/04/2009, 16h13
*.Har(d)t

1 pièce(s) jointe(s)

Mmmh, j'ai fait un test en ajoutant le grid dans un div en dehors de tout autre élément (un simple <div id="toto"> just après le <body>), et même combat : Les entêtes sont recouvertes par la liste et je n'ai pas de belles case de Grid.

Est-ce que ça pourrait être un simple problème de CSS ?

EDIT
-----

Emmanuel,

Je t'ai fait un zip si tu as le temps et l'envie de regarder.

Dans modeles.htm, ligne 276, je reçois les valeurs pour le grid dans le xhrGet qui appelle modele.php.

Le grid est construit dans le addCallBack qui est en dessous.

Ici, il faut que tu récupères les valeurs qu'il y a dans polonais.json

J'ai déjà mis les valeurs du tree en dur dans 1114.json, mais je ne voulais pas virer le xhrGet à cet endroit là car ça m'obligeait à modifier l'appel à addCallBack, tu modifieras selon tes hypothèses.

En revanche, j'ai mis en dur polonais.json dans la addCallBack, comme ça si tu fais un fichier modele.php qui ne fait que répondre, on s'en fiche si les données viennent de xhrGet ou pas, et on ne modifie pas la structure d'origine.

Enfin tu vois selon ce que tu veux tester.

Merci encore pour ton aide, j'apprends beaucoup sur Dojo grâce à toi, même si je galère encore beaucoup avec ce framework.
16/04/2009, 02h28
emmanuel.remy

2 pièce(s) jointe(s)
Salut *.Har(d)t,

Déjà tu as mis un dojo.addOnLoad dans modele.htm, ce qui n'est pas bon car tu n'as aucune assurance que ce code s'exécute comme souhaité.
Tu dois utilisé l'attribut addOnLoad du contentpane.
D'autre part j'ai déjà remarqué que Dojo a du mal à importer (ou je ne sais pas encore parfaitement le gérer...) des composants à partir d'une url d'un contentPane.

Donc voilà ce que je te conseille de faire:

- déplace les dojo.require de modeles.htm vers index.htm.
- ajoute un addOnLoad dans le contentPane et mets y ta fonction dojo.addOnLoad actuellement présente dans modeles.htm
Code:

1 2 3 4 5 6 <div id="1114" dojoType="dojox.layout.ContentPane" title="Modèles" href="modeles.htm" onLoad="addOnLoad()">
Je te mets en pj une capture de ce que j'obtiens et un zip de l'ensemble. J'ai taillé à la serpe pour faire au plus simple. ;)

Enfin ta remarque concernant les styles est pertinente: si modeles.html contenait un ensemble de style (via un balise style par exemple), alors il faudrait ajouter renderStyles="true" dans le contentPane.

A+,

Emmanuel
16/04/2009, 11h20
*.Har(d)t

Merci beaucoup pour tes corrections.

Effectivement, ça fonctionne comme ça.

Mon problème, c'est que j'ai besoin que le Grid s'affiche en fonction d'un choix fait dans le Tree.

Donc, je ne peux pas vraiment sortir la génération de ce Grid vers l'extérieur du onClick du Tree, qui lui est forcément dans le dojo.addOnLoad puisqu'il doit être chargé en même temps que la page...

C'est le serpent qui se mord la queue quoi.

Je vais essayer de me débrouiller avec ça en tout cas. Merci.

EDIT
----

Je pensais avoir trouvé le problème dans le fait que l'appel se faisait dans le addCalBack du xhrGet (c'est la seule différence majeure que je vois entre le code que tu m'as renvoyé et le mien), mais même en chargeant un Grid avec des données statiques dès le début de la fonction addOnLoad, j'ai le même résultat...

En fait, en utilisant ton code qui marche, en triturant et en comparant, j'ai remonté le problème jusqu'à l'index.htm...

En revanche, je ne vois pas de franche différence expliquant tout ça entre nos deux version d'index...

RESOLUTION
------------

J'ai fini par utiliser ton fichier index.htm avec mon fichier modeles.htm, et là ça fonctionne.

Pourtant, les deux fichiers index sont quasiment identiques, et en modifiant le mien pour qu'il soit strictement identique, ça ne change rien.

La seule différence que j'ai noté, c'est que j'édite mes fichiers directement en UTF-8 (avec Aptana, PSPad et Komodo5), tandis que tes fichiers semblent être en ANSI quand je les ouvre... D'ailleurs les accents dans les onglets sont mal rendus.

Mais je ne sais pas si c'est suffisant pour expliquer le problème.

Je vais essayer de retaper un fichier d'index à partir de 0 pour voir quand j'aurai 5 minutes, mais j'ai déjà perdu tellement de temps avec ce problème que ça attendra.
Je marque RESOLU, mais je suis bien incapable d'expliquer comment ce bug a été résolu... :aie:

Encore merci Emmanuel.

Au fait c'est quoi ton éditeur magique ?
16/04/2009, 15h09
emmanuel.remy

En fait j'ai édité tes fichiers dans Eclipse, mais c'est vrai que je n'ai pas fait attention à l'encodage...

Ce problème que tu as rencontré je l'ai aussi eu - bien que un peu différent. C'est la que je me suis aperçu que le dijit.layout.contentPane est mauvais et qu'ils l'ont remplacé par dojox.layout.contentPane, que tu as utilisé. (je crois d'ailleurs qu'il a été promu et intégré en 1.3).

Néanmoins il faudrait passer un peu de temps pour éclaircir ces soucis (?) de dojo.require, style et scripts à partir du moment où ils sont téléchargés asynchrones dans un contentPane. Je prendrai le temps de regarder le comportement avec la 1.3. C'est super important car cela met en jeu le développement dynamique par onglet, l'ergonomie, le poids des pages, bref le style qu'on veut donner à l'appli et la performance associée.

Je te tiendrai au courant. :P

ERE