DataGrid et JsonStore : ajout de données et rafraichissement du dataGrid [Résolu]

[andlio]

Bonjour tout le monde,

Je possède un dataGrid connecté à un JSonRestStore.
Je voudrais ajouter une ligne à mon tableau. D'après ce que j'ai pu lire dans la doc il suffit d'ajouter un élément dans le store et le dataGrid se met à jour automatiquement.

C'est ce que j'ai essayé de faire en suivant ce tuto.
L'ajout dans le store semble se dérouler correctement mais mon dataGrid ne se met pas à jour.

Voici mon store:

Code :

1
2
3
store : new dojo.store.JsonRest({
	target:lib.utils.appBaseUrl + "admin/projects"
}),

Voici ma dataGrid:

Code :

1
2
3
4
5
6
grid = new dojox.grid.DataGrid({
	store: dataStore = dojo.data.ObjectStore({objectStore: this.store}),
	        structure: [...]
}, "projects-table");
 
grid.startup();

Et enfin voici comment j'ajoute mon item :

Code :

1
2
3
4
5
6
7
8
9
10
11
var newProj = {
	"reference": "new !!!",
	"contractReference": "",
	"createdOn": 1322470989000,
	"updated_on": null,
	"name": "Project de test",
	"state": "INIT_PHASE1",
	"description": ""
};
 
this.store.add(newProj);

Où est-ce que ça cloche ?

[ernestrenan]

Voir ici : http://www.developpez.net/forums/d11...e-quen-script/. Il n'y a pas besoin d'utiliser d'utiliser d'object store. En plus il faut mettre un egal entre store new et j'eviterais d'avoir deux variables qui s'appelle store et les referencess au this me paraissent un peu bizarre et c'est avec put que l'on ajoute un enregistrement.

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var store = new dojo.store.JsonRest({target:lib.utils.appBaseUrl + "admin/projects"});
var grid = new dojox.grid.DataGrid({store: store, structure: ...}, "projects-table");
grid.startup();
 
var newProj = {
	"reference": "new !!!",
	"isQualifProject": true,
	"isCertifProject": false,
	"contractReference": "",
	"createdOn": 1322470989000,
	"updated_on": null,
	"name": "Project de test",
	"state": "INIT_PHASE1",
	"description": ""
};
 
store.put(newProj);

[andlio]

Bonjour ernestrenan,

Ton code ne fonctionne pas chez moi. J'ai l'erreur suivante :

this.store.getFeatures is not a function

J'avais déjà essayé sans le "objectStore" mais j'avais eu le même problème.
De plus je n'ai qu'une seule variable nommée "store", il s'agit d'une propriété de mon objet.

Ça a marché pour toi ?

Je précise que le premier chargement se déroule correctement et ma dataGrid est bien remplie. C'est lors de l'ajout d'un item que celui-ci n'est pas affiché dans la dataGrid.

[ernestrenan]

Oui ça marche de mon côté. Je ne comprend pas pourquoi il t'affiche un this tu declares tes variables dans un objet ?

[andlio]

Oui tout est encapsulé dans un objet.
Tu utilise quelle version de dojo ? Moi j'utilise dojo 1.7.

[emmanuel.remy]

Salut,

Observations: n'investissez pas de temps sur le Datagrid, il va disparaitre à court terme. Préférez lui le dgrid qui est le composant qui le remplace. Consommant nativement les nouveaux stores, rapide, il est bien meilleur et est (presque déjà) adapté au mobile...

Decouverte ici (article aussi ici)

Enfin le code du DataGrid est le suivant lors de l'affectation du store:

Code :

1
2
3
4
5
6
7
8
9
10
	_setStore: function(store){
		if(this.store && this._store_connects){
			dojo.forEach(this._store_connects, this.disconnect, this);
		}
		this.store = store;

		if(this.store){
			var f = this.store.getFeatures();
			var h = [];

D'où le message d'erreur de andlio quand il passe un dojo.store.XXX
D'ailleurs je ne comprends pas comment ernestrenan arrive à faire fonctionner ce code J'ai regardé en 1.6 et 1.7, le code est identique.

ERE

[ernestrenan]

J'utilise aussi dojo 1.7 avec la nouvelle version il n'y a plus besoin d'encapsuler dans un objet:

Code :

1
2
3
4
5
6
7
8
require(["dojo/ready"], function(ready){
    ready(function(){
        require(["dojo/store/JsonRest", "dojox/grid/Datagrid"], function(store, grid){
            var myStore = new store({....});
            var myGrid = new grid({....});
        });
    });
});

[emmanuel.remy]

Dojo 1.7 ou pas je ne comprends pas comment ton code peut fonctionner avec un dojo.store... Peux tu passer le code exact que tu testes sur ton poste qu'on fasse de même ?

ERE

[andlio]

C'est vrai que ça pourrait être utile, comme ça j'aurais un exemple concret sur lequel m'appuyer

De mon côté je vais voir le dgrid. Mais il s'agit toujours d'une version de développement ? Il n'est pas inclus dans le framework de base dojo ?
Ça m'embête quand même de devoir tout (re)modifier...

[emmanuel.remy]

Historiquement le DataGrid s'appelait TurboGrid (voir TurboAjax.com) et n'appartenait pas non plus au framework de base.

Ceci dit, Dojo a décidé d'arrêter de développer des composants dans dojox, car cela devient ingérable étant donné le nombre qui y prend place. Ils vont donc maintenant favoriser une externalisation des composants dojox (ils deviendront un peu l'équivalent des "plugins" jQuery). Pour ce faire, les composants "de base" du framework et les autres proposés par la communauté, dont la nouvelle grille, seront hébergés par la fondation Dojo (http://packages.dojofoundation.org/list.html).
Sincèrement c'est tant mieux ainsi, et avec les bons outils d'installation automatique d'un composant (une sorte de maven dédié à ça) ce sera extra.

En bref, dgrid est ni plus ni moins que la future nouvelle grid officielle de Dojo, même si elle n'apparait pas dans dojox. Et elle est déjà fonctionnelle, donc pourquoi s'en priver. Avec tout le respect que je porte à Datagrid et en connaissance de tous les services qu'elle nous a rendu, elle a fait son temps et son code est indigeste...

"Datagrid est morte, vide dgrid !" Ca fait pas un peu galette des rois, non ?

ERE

[andlio]

Salut,

Le dgrid à l'air vraiment intéressant, mais malheureusement j'ai des impératifs de délais et je ne peux pas perdre plus de temps à le maîtriser et à modifier mon code. D'autant plus que la doc est encore mince à ce sujet...

Ceci dit j'ai résolu mon problème en agissant directement sur l'objectStore et non sur le store :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var newProj = {
	"reference": "new !!!",
	"contractReference": "",
	"createdOn": 1322470989000,
	"updated_on": null,
	"name": "Project de test",
	"state": "INIT_PHASE1",
	"description": ""
};
 
// Ajout de l'item, la datagrid est rafraichit
this.objectStore.newItem(newProj, null);
 
// Les nouveaux items sont sauvegardés (--> requête PUT)
this.objectStore.save();