Insertion de données dans un grid depuis une bdd

Bonjour,
Je rencontre un soucis dans l'utilisation d'un grid sous extjs, en effet mon soucis viens de la l'insertion de mes données dans le data 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
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
 
 
Ext.onReady(function(){
 
	    Ext.QuickTips.init();
 
	    var xg = Ext.grid;
 
	    // shared reader
	    var reader = new Ext.data.ArrayReader({}, [
	       {name: 'Produit'},
	       {name: 'Commandé', type: 'float'},
	       {name: 'Livré', type: 'float'},
	       //{name: 'pctChange', type: 'float'},
	       //{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
	       {name: 'Solde'},
	       {name: 'Famille'},
	       {name: 'desc'}
	    ]);
 
	    var grid = new xg.GridPanel({
	        store: new Ext.data.GroupingStore({
	            reader: reader,
	            data: xg.dummyData,
	            sortInfo:{field: 'Produit', direction: "ASC"},
	            groupField:'Famille'
	        }),
 
	        columns: [
	            {id:'Produit',header: "Produit", width: 60, sortable: true, dataIndex: 'Produit'},
	            {header: "Commandé", width: 20, sortable: true, dataIndex: 'Commandé'},
	            {header: "Livré", width: 20, sortable: true, dataIndex: 'Livré'},
	            {header: "Solde", width: 20, sortable: true, dataIndex: 'Solde'},
	            {header: "Famille", width: 20, sortable: false, dataIndex: 'Famille' },
	            //{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
	        ],
 
	        view: new Ext.grid.GroupingView({
	            forceFit:true,
	            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
	        }),
 
	        frame: true,
	        width: 800,
	        height: 450,
	        collapsible: true,
	        animCollapse: false,
	        title: 'Mes Commandes',
	        iconCls: 'icon-grid',
	        renderTo: 'test_grid'
	    });
	});
 
 
 
 
	Ext.grid.dummyData = [val];
}

La variable val provient d'un appel ajax le code php jouer est le suivant :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
$famille = $Tab["WCFLFA"];
$lib_produit = $Tab["WCPLPR"];
$Qte_cmd = $Tab["WCPQCD"];
$Unite_cmd = $Tab["WCPUQC"];
$Qte_lv = $Tab["WCPQLV"];
$Unite_lv = $Tab["WCPUQT"];
$Solde = $Tab["WCPSLD"];
 
$var = array($lib_produit,$Qte_cmd.$Unite_cmd,$Qte_lv.$Unite_lv,$Solde,$famille) ;
$data .= json_encode($var).",";

et en gros ce que je récupère depuis cette page ce trouve sous cette forme :

["Solution azot","20.000T.","10.000T.","10.000","Engrais"],["Solution azot","23.456T.","12.543T.","9.087","Engrais"],["Buggy","12.000L.","0L.","12.000","Phytosanitaire"],["Graines de colza","2.000D.","1.000D.","1.000","Semences & plans"],

Je passe donc cette chaîne à "Ext.grid.dummyData" je me suis dis que les " était gênant alors j'ai remplacer avec un regexp les " par des ' mais idem mon tableau s'affiche mais vide.

J'ai également essayé
var reponse = Ext.decode(val);
var store = new Ext.data.ArrayStore(val);

mais idem dans tous les cas je me retrouve avec un "this.data is undefined"
dans la console d'erreur.

quelqu'un aurais un solution pour récupérer proprement les données d'une bdd ou éventuellement ce qui cloche dans mon code?

Merci.