dojox.data.dataGrid: souci de store

Version imprimable

salut a tous
je developpe actuellement dans le cadre un projet perso, une videotheque web.

j'utilise dojo 1.6 et je souhaite utiliser une grid pour afficher l'integralité de mes films.
j'ai consulté la doc et récupéré des éléments qui correspondent a ce que je cherche mais impossible de les mettre en interaction.
voila le code utilisé. c'est pompé depuis la doc du dojo.data.xmlstore que j'essaie d'adapter a mes besoins pour ensuite reprendre uniquement certains éléments et l'adapter a ce que je veux au final.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
 
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
        </script>
        <script>
            dojo.require("dojox.grid.DataGrid");
            dojo.require("dojox.data.XmlStore");
 
            var layoutBooks = [
                [{
                    field: "titre",
                    name: "Titre du Film",
                    width: 10,
                    formatter: function(item) {
                        return item.toString();
                    }
                },
                {
                    field: "style",
                    name: "Style",
                    width: 10,
                    formatter: function(item) {
                        return item.toString();
                    }
                },
                {
                    field: "resume",
                    name: "Resume",
                    width: 'auto',
                    formatter: function(item) {
                        return item.toString();
                    }
                },
                {
                    field: "annee",
                    name: "Annee",
                    width: 10,
                    formatter: function(item) {
                        return item.toString();
                    }
                },
                {
                    field: "langue",
                    name: "Langue",
                    width: 10,
                    formatter: function(item) {
                        return item.toString();
                    }
                }]];
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
        />
        <style type="text/css">
            @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
            @import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/nihiloGrid.css";
            .dojoxGrid table { margin: 0; }
        </style>
    </head>
 
    <body class=" claro ">
        <div dojoType="dojox.data.XmlStore" url="carnetMysqlToXml.xml"
        jsId="bookStore3" label="repertoire">
        </div>
        <div id="grid" style="width: 400px; height: 300px;" dojoType="dojox.grid.DataGrid"
        store="bookStore3" structure="layoutBooks" query="{}" rowsPerPage="40">
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>
 
</html>

le fichier xml

Code:

1
2
3
4
5
6
7
8
9
repertoire><film><titre>Star Wars: Episode IV - A New Hope</titre><style>SCIENCEFICTION</style><resume>Luke Skywalker leaves his home planet, teams up with other rebels, and tries to save Princess Leia from the evil clutches of Darth Vader.</resume><sortie>1977</sortie><langue>ANGLAIS</langue></film><film><titre>Oui, mais...</titre><style>FICTION</style><resume>Attracted but also frightened by her sexuality, a teenage girl undergoes a brief therapy with a warm, humorous and competent psychotherapist.</resume><sortie>2001</sortie><langue>FRANCAIS</langue></film><film><titre>Placard, Le</titre><style>COMEDIE</style><resume>François Pignon, un homme au costume sombre et à l'allure discrète, est comptable dans une usine de caoutchouc, dont le secteur privilégié est le préservatif.
Il est sur le point d'être licencié, lorsque sur les conseils de Belon, son voisin d'immeuble, il propage la rumeur selon laquelle il est homosexuel. 
Suite à ce faux coming out, les cadres de la direction décident de garder Pignon pour des raisons "politiquement correctes".
Celui-ci passe brusquement pour un marginal, bien qu'il n'ait rien changé à son comportement. C'est le regard des autres qui va s'en trouvé modifié.</resume><sortie>2001</sortie><langue>FRANCAIS</langue></film><film><titre>Star Wars: Episode V - The Empire Strikes Back</titre><style>SCIENCEFICTION</style><resume>While Luke takes advanced Jedi training from Yoda, his friends are relentlessly pursued by Darth Vader as part of his plan to capture Luke.</resume><sortie>1980</sortie><langue>ANGLAIS</langue></film><film><titre>Choristes, Les</titre><style>DRAME</style><resume>The new teacher at a severely administered boys' boarding school works to positively effect the students' lives through music.</resume><sortie>2004</sortie><langue>FRANCAIS</langue></film><film><titre>Dans la peau de John Malkovich</titre><style>FICTION</style><resume>Craig, a puppeteer, takes a filing job in a low-ceilinged office in Manhattan. Although married to the slightly askew Lotte, he hits on a colleague, the sexually frank Maxine. She's bored but snaps awake when he finds a portal leading inside John Malkovich: for 15 minutes you see, hear, and feel whatever JM is doing, then you fall out by the New Jersey Turnpike. Maxine makes it commercial, selling trips for $200; also, she's more interested in Lotte than in Craig, but only when Lotte is inside JM. JM finds out what's going on and tries to stop it, but Craig sees the portal as his road to Maxine and to success as a puppeteer. Meanwhile, Lotte discovers others interested in the portal.  </resume><sortie>1999</sortie><langue>ANGLAIS</langue></film><film><titre>How to Lose a Guy in 10 Days</titre><style>COMEDIE</style><resume>Benjamin Barry is an advertising executive and ladies' man who, 
to win a big campaign, bets that he can make a woman fall in love 
with him in 10 days. Andie Anderson covers the 
'How To' beat for 'Composure' magazine and is assigned to 
write an article on 'How to Lose a Guy in 10 days.' They meet in a 
bar shortly after the bet is made.</resume><sortie>2003</sortie><langue>ANGLAIS</langue></film><film><titre>Bladerunner</titre><style>SCIENCEFICTION</style><resume>Deckard, a blade runner, has to track down and terminate 4 replicants who hijacked a ship in space and have returned to earth seeking their maker.</resume><sortie>1982</sortie><langue>ANGLAIS</langue></film><film><titre>Alien</titre><style>SCIENCEFICTION</style><resume>A mining ship, investigating a suspected SOS, lands on a distant planet. The crew discovers some strange creatures and investigates.</resume><sortie>1979</sortie><langue>ANGLAIS</langue></film><film><titre>mon film </titre><style>FICTION</style><resume>le meilleur</resume><sortie>2011</sortie><langue>FRANCAIS</langue></film><film><titre>Black Swan</titre><style>DRAME</style><resume>A ballet dancer wins the lead in 'Swan Lake' and is perfect for the role of the delicate White Swan - Princess Odette - but slowly loses her mind as she becomes more and more like Odile, the Black Swan. </resume><sortie>2010</sortie><langue>ANGLAIS</langue></film><film><titre>Star Wars: Episode VI - Return of the Jedi</titre><style>SCIENCEFICTION</style><resume>After rescuing Han Solo from the palace of Jabba the Hutt, the Rebels attempt to destroy the Second Death Star, while Luke Skywalker tries to bring his father back to the Light Side of the Force. </resume><sortie>1983</sortie><langue>ANGLAIS</langue></film></repertoire>

au résultat, je n'ai aucun affichage. je pense que le probleme vient soit du store que j'utilise soit du layout , voire des 2.

si quelqu'un pouvait m'aiguiller, ca serait vraiment super.

merci a tous ;)

14/04/2011, 14h52
cfried

Bonjour,

Avez vous des erreurs avec firebug ou autre outil de développement ?

Charlie.

apres quelques modifications, et la suppression du cache de firefox qui faisait buguer le tout, le code suivant 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
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
 
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="dojoroot_1.6/dojo/dojo.js"
        djConfig="parseOnLoad: true">
        </script>
        <script>
            dojo.require("dojox.grid.DataGrid");
            dojo.require("dojox.data.XmlStore");
 
            var layoutBooks = [
                [{
                    field: "titre",
                    name: "Titre du Film",
                    width: 'auto'
 
                },
                {
                    field: "style",
                    name: "Style",
                    width: 'auto'
 
                },
                {
                    field: "resume",
                    name: "Resume",
                    width: 'auto'
 
                },
                {
                    field: "sortie",
                    name: "Annee",
                    width: 'auto'
 
                },
                {
                    field: "langue",
                    name: "Langue",
                    width: 'auto'
 
                }]];
        </script>
        <link rel="stylesheet" type="text/css" href="dojoroot_1.6/dijit/themes/claro/claro.css"
        />
        <style type="text/css">
            @import "dojoroot_1.6/dojox/grid/resources/Grid.css";
            @import "dojoroot_1.6/dojox/grid/resources/nihiloGrid.css";
            .dojoxGrid table { margin: 0; }
        </style>
    </head>
 
    <body class=" claro ">
        <div dojoType="dojox.data.XmlStore" url="carnetMysqlToXml.xml"
        jsId="bookStore3" label="repertoire">
        </div>
        <div id="grid" style="min-height:800px;width: 100%; height: 100%;" dojoType="dojox.grid.DataGrid"
        store="bookStore3" structure="layoutBooks" query="{}" rowsPerPage="40">
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>
 
</html>

maintenant, la seconde passe consiste a changer le type de store utilisé, a savoir le dojox.data.xmlstore pour passer une une évolution trouvable ici http://dojotoolkit.org/reference-gui...store-examples qui consiste a fournir directement une string XML a la place de l'URL d'un fichier, utile si on récupère les données a mettre dans la grid par requete SQL.
voici le code utilisé:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
 
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="dojoroot_1.6/dojo/dojo.js" djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
        	dojo.require("dojox.grid.DataGrid");
            dojo.require("dojox.data.XmlStore");
            dojo.require("dojox.xml.parser");
 
            dojo.ready
            (
            	function()
            	{
                	hookXmlStore();
                	var myxml ="";
                	var args=
                	{
                		url:"sql.php",
                		handleAs:"json",
                		sync:true,
                		handle:function(data)
                		{
                			//alert(data);
                			myxml=data;
                		},
                		error:function(error)
                		{
                			alert(error);
                		},
                		content:
                		{
                			"action":"xml",
                			"request":"select * from film"
                		}
                	};
                	dojo.xhrGet(args);
                	var store = new my.data.XmlStringStore
                	(
                		{
                    		xmlstring: myxml,
                    		label: "description"
                		}
                	);
	                var layoutBooks=
	                [
		                [
		                 	{
			                    field: "titre",
			                    name: "Titre du Film",
			                    width: 'auto'
			                },
			                {
			                    field: "style",
			                    name: "Style",
			                    width: 'auto'
 
			                },
			                {
			                    field: "resume",
			                    name: "Resume",
			                    width: 'auto'
 
			                },
			                {
			                    field: "sortie",
			                    name: "Annee",
			                    width: 'auto'
 
			                },
			                {
			                    field: "langue",
			                    name: "Langue",
			                    width: 'auto'
 
		                	}
			           	]
		          	];
		            var grid4=new dojox.grid.DataGrid
		            (
		           		{
		               		store:"store",
		               		structure:"layoutBooks",
		               		query:"{}",
		               		rowsPerPage:"40"
		               	},
		                document.createElement('div')
		         	);
		            // append the new grid to the div "gridContainer4":
		            dojo.byId("gridContainer4").appendChild(grid4.domNode);
		            // Call startup, in order to render the grid:
		            grid4.startup();
            	}
            );
            hookXmlStore = function() 
            {
                dojo.declare
                (
                	"my.data.XmlStringStore",
                	[dojox.data.XmlStore], 
                	{
                    	constructor: function(args)
                    	{
                        	this.inherited("constructor", arguments);
                        	this.xmlstring = args.xmlstring;
                        	this.url = "dummy.xml";
                    	},
                    	_fetchItems: function(request, fetchHandler, errorHandler)
                    	{
                        	var url = this._getFetchUrl(request);
                        	if (!url)
                        	{
                            	errorHandler(new Error("No URL specified."));
                            	return;
                        	}
                       		var localRequest = (!this.sendQuery ? request : {});
                        	var data = dojox.xml.parser.parse(this.xmlstring);
                        	var items = this._getItems(data, localRequest);
                        	if (items && items.length > 0)
                        	{
                            	fetchHandler(items, request);
                        	}
                        	else
                        	{
                            	fetchHandler([], request);
                        	}
                    	}
                	}
                );
 
            };
        </script>
 
       	<style type="text/css">
            @import "dojoroot_1.6/dojox/grid/resources/Grid.css";
            @import "dojoroot_1.6/dojox/grid/resources/nihiloGrid.css";
            @import "dojoroot_1.6/dijit/themes/claro/claro.css"
            .dojoxGrid table { margin: 0; }
        </style>
    </head>
 
    <body class=" claro ">
        <div id="gridContainer4">
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>
 
</html>

encore une fois, la majorité du code est pompé de la référence dojo.
le script plante à la construction de la grid avec l'erreur suivante de firebug
:

Citation:

this.store.getFeatures is not a function
http://localhost/dojoroot_1.6/dojo/_...r/bootstrap.js
Line 688
(688 out of range 568)

perso, je reconnais ne jamais avoir compris quoi que ce soit à ce type d'erreur la 8O.
si j'ai bien suivi le debugger, ca a l'air de planter quand il veux relier grid4 à sa div html mais pas sur...

edit:
le code suivant ne bugue plus, l'erreur se situait sur les propriétés d'initialisation de la grid. desormais, le tableau s'affiche mais sans element malgré la présence de la meme chaine XML que pour la premiere partie.
aucune erreur de la part de firebug.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
 
    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="dojoroot_1.6/dojo/dojo.js" djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
        	dojo.require("dojox.grid.DataGrid");
            dojo.require("dojox.data.XmlStore");
            dojo.require("dojox.xml.parser");
 
            dojo.ready
            (
            	function()
            	{
                	hookXmlStore();
                	var myxml ="";
                	var args=
                	{
                		url:"sql.php",
                		handleAs:"json",
                		sync:true,
                		handle:function(data)
                		{
                			//alert(data);
                			myxml=data;
                		},
                		error:function(error)
                		{
                			alert(error);
                		},
                		content:
                		{
                			"action":"xml",
                			"request":"select * from film"
                		}
                	};
                	dojo.xhrGet(args);
                	var store = new my.data.XmlStringStore
                	(
                		{
                    		xmlstring: myxml,
                    		label: "description"
                		}
                	);
	                var layoutBooks=
	                [
		                [
		                 	{
			                    field: "titre",
			                    name: "Titre du Film",
			                    width: 'auto'
			                },
			                {
			                    field: "style",
			                    name: "Style",
			                    width: 'auto'
 
			                },
			                {
			                    field: "resume",
			                    name: "Resume",
			                    width: 'auto'
 
			                },
			                {
			                    field: "sortie",
			                    name: "Annee",
			                    width: 'auto'
 
			                },
			                {
			                    field: "langue",
			                    name: "Langue",
			                    width: 'auto'
 
		                	}
			           	]
		          	];
		            var grid4=new dojox.grid.DataGrid
		            (
		           		{
		               		store:store,
		               		structure:layoutBooks,
		               		query:
		               		{
				           		Title: '*'
				           	},
		                    clientSort: true,
		                    rowSelector: '20px',
		               	},
		                dojo.byId("gridContainer4")
		         	);
		            // append the new grid to the div "gridContainer4":
		            //dojo.byId("gridContainer4").appendChild(grid4.domNode);
		            // Call startup, in order to render the grid:
		            grid4.startup();
            	}
            );
            hookXmlStore = function() 
            {
                dojo.declare
                (
                	"my.data.XmlStringStore",
                	[dojox.data.XmlStore], 
                	{
                    	constructor: function(args)
                    	{
                        	this.inherited("constructor", arguments);
                        	this.xmlstring = args.xmlstring;
                        	this.url = "dummy.xml";
                    	},
                    	_fetchItems: function(request, fetchHandler, errorHandler)
                    	{
                        	var url = this._getFetchUrl(request);
                        	if (!url)
                        	{
                            	errorHandler(new Error("No URL specified."));
                            	return;
                        	}
                       		var localRequest = (!this.sendQuery ? request : {});
                        	var data = dojox.xml.parser.parse(this.xmlstring);
                        	var items = this._getItems(data, localRequest);
                        	if (items && items.length > 0)
                        	{
                            	fetchHandler(items, request);
                        	}
                        	else
                        	{
                            	fetchHandler([], request);
                        	}
                    	}
                	}
                );
 
            };
        </script>
 
       	<style type="text/css">
            @import "dojoroot_1.6/dojox/grid/resources/Grid.css";
            @import "dojoroot_1.6/dojox/grid/resources/nihiloGrid.css";
            @import "dojoroot_1.6/dijit/themes/claro/claro.css"
            .dojoxGrid table { margin: 0; }
        </style>
    </head>
 
    <body class=" claro ">
        <div id="gridContainer4">
        </div>
        <!-- NOTE: the following script tag is not intended for usage in real
        world!! it is part of the CodeGlass and you should just remove it when
        you use the code -->
        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }
            });
        </script>
    </body>
 
</html>