IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Grid tout tassé [Dojo]


Sujet :

Bibliothèques & Frameworks

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 320
    Par défaut 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 : 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
     
    [...]
    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 : 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
    <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>
     
    [....]
    Images attachées Images attachées  

  2. #2
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    De mémoire,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  3. #3
    Membre éclairé
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 320
    Par défaut
    Citation Envoyé par emmanuel.remy Voir le message
    De mémoire,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.
    Images attachées Images attachées  

  4. #4
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    Encore un petit effort, hein ?

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

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

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 320
    Par défaut
    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é )

  6. #6
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    *.Har(d)t, fais attention dans mon précédent message j'ai recopié bêtement ton
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    dojo.byId('paneGrid').appendChild(gridModeles.domNode);
    Le code que je voulais te donner est celui-ci:

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

  7. #7
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    Re,

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

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

  8. #8
    Membre éclairé
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 320
    Par défaut
    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.

  9. #9
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    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

  10. #10
    Membre éclairé
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 320
    Par défaut
    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 : 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
    <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.
    Images attachées Images attachées  

  11. #11
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    Citation Envoyé par *.Har(d)t Voir le message
    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

  12. #12
    Membre éclairé
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 320
    Par défaut
    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.
    Fichiers attachés Fichiers attachés

  13. #13
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    Images attachées Images attachées  
    Fichiers attachés Fichiers attachés

  14. #14
    Membre éclairé
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    320
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 320
    Par défaut
    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...

    Encore merci Emmanuel.

    Au fait c'est quoi ton éditeur magique ?

  15. #15
    Membre Expert
    Avatar de emmanuel.remy
    Inscrit en
    Novembre 2005
    Messages
    2 855
    Détails du profil
    Informations personnelles :
    Âge : 57

    Informations forums :
    Inscription : Novembre 2005
    Messages : 2 855
    Par défaut
    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.

    ERE

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [EXTJS 4.2.5] Grid qui ne se rafraîchit pas tout le temps?
    Par Bruno13 dans le forum Ext JS / Sencha
    Réponses: 4
    Dernier message: 25/11/2016, 14h02
  2. [Python 3.X] Grid Afficher une variable et la mettre à jour tout les secondes
    Par lolight dans le forum Tkinter
    Réponses: 2
    Dernier message: 24/10/2016, 01h00
  3. Imprimer en silverlight ( Grid ou Canvas, ou tout conteneur )
    Par GilardeauG dans le forum Silverlight
    Réponses: 7
    Dernier message: 23/05/2014, 15h29
  4. [Débutant] Grid border toutes les 5 colonnes
    Par maxmax39 dans le forum C#
    Réponses: 2
    Dernier message: 25/03/2014, 08h04
  5. Le grand mode d'emploi du forum, à lire si vous souhaitez tout savoir !
    Par Anomaly dans le forum Mode d'emploi & aide aux nouveaux
    Réponses: 2
    Dernier message: 03/06/2013, 17h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo