dojox.grid.DataGrid : prise de tete

**linotte91** · 19/06/2009, 12h22

Bonjour,
J'ai beau torturer mon code d'après les exemples trouvés ça et là, et je n'arrive pas à afficher correctement un DataGrid avec un petit exemple de test !!

Je ne sais pas ce qui coince, j'ai l'impression de faire comme les autres gens, et pourtant.
Voici ma page de test , version 'html' :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
    @import "../js/dojo-release-1.3.1/dojox/grid/_grid/Grid.css";
    @import "../js/dojo-release-1.3.1/dojox/grid/_grid/tundraGrid.css";
    @import "../js/dojo-release-1.3.1/dijit/themes/tundra/tundra.css";
    @import "../js/dojo-release-1.3.1/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="../js/dojo-release-1.3.1/dojo/dojo.js"
      djConfig="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript">
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.parser");
 
  var data = {identifier: 'name', labe: 'name', items: [
    {name: 'France', capital: 'Paris'},
    {name: 'Espagne', capital: 'Madrid'},
    {name: 'Portugal', capital: 'Lisbonne'},
    {name: 'Autriche', capital: 'Vienne'},
    {name: 'Allemagne', capital: 'Berlin'},
    {name: 'Belgique', capital: 'Bruxelles'},
    {name: 'Italie', capital: 'Rome'},
  ]};
  var jsonStore;
  jsonStore = new dojo.data.ItemFileWriteStore({data: data});  
</script>	  
<title>Test page for dojox.grid.DataGrid</title>
</head>
<body class="tundra">
      <table dojoType="dojox.grid.DataGrid"
             jsId="grid" id="grid"
             store="jsonStore" query="{ name: '*' }"
             rowsPerPage="20">
        <thead>
          <tr>
            <th width="50%" field="name">Pays</th>
            <th width="50%" field="capital">Capitale</th>
          </tr>
        </thead>
      </table> 
</body>
</html>

et la verion 'programmatic' :

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
 
...
<script type="text/javascript">
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojo.data.ItemFileWriteStore");
    dojo.require("dojo.parser");
 
  var data = {identifier: 'name', labe: 'name', items: [
    {name: 'France', capital: 'Paris'},
    {name: 'Espagne', capital: 'Madrid'},
    {name: 'Portugal', capital: 'Lisbonne'},
    {name: 'Autriche', capital: 'Vienne'},
    {name: 'Allemagne', capital: 'Berlin'},
    {name: 'Belgique', capital: 'Bruxelles'},
    {name: 'Italie', capital: 'Rome'},
  ]};
  var jsonStore;
  jsonStore = new dojo.data.ItemFileWriteStore({data: data});
  function initGrid() {
      jsonStore = new dojo.data.ItemFileWriteStore({data: data});
      var grid = new dojox.grid.DataGrid({
         query: { name: '*' },
         store: jsonStore,
         structure: [
           {field: "name", name: "name", width:"50%"},
           {field: "capital", name: "capital", width:"50%"}
         ],
         rowsPerPage: 20
      }, document.createElement('div'));
      dojo.byId('mylist').appendChild(grid.domNode);
      grid.startup();
  }
  dojo.addOnLoad(initGrid());
</script>	  
<title>Test page for dojox.grid.DataGrid</title>
</head>
<body class="tundra">
<div id="mylist"></div>
</body>
</html>

Dans le 1er cas les données s'affichent en vrac, je peux rien trier .c'est n'importe quoi.
Dans le second, rien dans ma page.

**emmanuel.remy** · 19/06/2009, 13h27

Pas mal, ça, une prise de tête de Linotte

Ce sont tes CSS qui ne pointent pas vers les bons directory:

Code :

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

1
2
3
4
5
<style>
    @import "../js/dojo-release-1.3.1/dojox/grid/resources/Grid.css";
    @import "../js/dojo-release-1.3.1/dojox/grid/resources/tundraGrid.css";
    @import "../js/dojo-release-1.3.1/dojo/resources/dojo.css";
</style>

ERE

**emmanuel.remy** · 19/06/2009, 13h36

Concernant la version programmation.
Pense à modifier les CSS comme précédemment et alors (les commentaires sont en rouge):

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
  
...
var jsonStore;
  jsonStore = new dojo.data.ItemFileWriteStore({data: data});
  function initGrid() {
      //Doublon: ne charger le store qu'une seule fois
      //jsonStore = new dojo.data.ItemFileWriteStore({data: data});
      var grid = new dojox.grid.DataGrid({
         query: { name: '*' },
         store: jsonStore,
         structure: [
           {field: "name", name: "name", width:"50%"},
           {field: "capital", name: "capital", width:"50%"}
         ],
         rowsPerPage: 20
      }, 'mylist' /* ON PASSE ICI DIRECTEMENT L'ID QUI T'INTERESSE */);
      
      
      grid.startup();
  }
...
  //attention, si tu passes initGrid(), tu exécutes ta fonction, ce qui n'est pas ici
  //attendu: on passe juste un lien (une référence) vers la fonction) 
  dojo.addOnLoad(initGrid);

Bon dev,

ERE

**linotte91** · 19/06/2009, 15h22

yahouu ! (grand cri de joie) : ça marche dans les deux versions

Le coup du css j'aurais jamais trouvé !!

dojox.grid.DataGrid : prise de tete [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager