GridPanel & JsonData avec JsonReader ?

**nikko49** · 13/02/2014, 15h45

Bonjour,

J'essaye tout simplement d'alimenter un GridPanel à l'aide de données JSON, mais je n'y parviens pas.
Je m'explique :

Dans mon interface, j'ai un formulaire. Lorsque je le soumets, coté PHP, je construit un Json avec mes lignes résultats.
Je voudrais tout simplement, sur l'évènement "success", à la sortie de mon formulaire, créer dynamiquement un GridPanel et pouvoir me servir de mon objet Json retourné.

Voici un exemple du résultat attendu :

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
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
 
 
form.submit
    	({
    		url 	: 'index.php',
 
    		params 	: 
    		{
    			task		 : "contract.importExcelFile",
    			contract_id : jQuery("input[name=contract_id]").val()
    		},    	    		
    		waitMsg: 'Analyse en cours ...',
 
    		success: function (form, response) 
               {
    			var myData = [
    			              ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
    			              ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
    			              ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
    			              ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
    			              ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
    			              ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
    			              ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
    			              ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
    			              ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
    			              ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
    			              ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
    			              ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
    			              ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
    			              ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
    			              ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
    			              ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
    			              ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
    			              ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
    			              ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
    			              ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
    			              ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
    			              ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
    			              ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
    			              ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
    			              ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
    			              ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
    			              ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
    			              ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
    			              ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
    			          ];
 
    			var store = Ext.create('Ext.data.ArrayStore', 
    			{
    				fields: 
    				[
    				 {name: 'label'}
    			    ],
 
    			    data: myData
    			});
 
    			var grid = Ext.create('Ext.grid.Panel', 
    			{
    				store	 : store,
    			    columns: 
    			    [
						{
						    text     : 'LABEL',
						    flex     : 1,
						    dataIndex: 'label'
						}
					]  
    			});
 
    			var importPreviewPanel = Ext.getCmp("importContract");
    			importPreviewPanel.add(grid);
            },
 
            failure : function()
            {
            	console.debug("KO");
            }

Avec ce code là, ma grille est bien remplie avec le myData, déclaré "en dur".
Ce que je voudrais simplement faire, c'est au lieu d'utiliser "myData", j'aimerais utiliser mon objet Json "response.allRecords".

PS : Mon résultat Json :

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
 
{
    "total_records": 6,
    "allRecords": [
        {
            "action": "UPD",
            "contract_line_code": "LC 2 - DEC_INCIDENT",
            "contract_line_service": "DEC_INCIDENT",
            "contract_line_description": "Ouvrir une demande générique",
            "contract_line_category": "Non définie",
            "contract_line_subcategories": "AMA\\CONTROLE LAITIER\\OSMOS\\BO| AMA\\CONTROLE LAITIER\\OSMOS\\ELEVAGE| AMA\\CONTROLE LAITIER\\OSMOS\\ELEVEUR| AMA\\CONTROLE LAITIER\\OSMOS\\DMS",
            "contract_line_type": "standard",
            "contract_line_service_level": "DEMANDE-TRT-3 ",
            "contract_line_uo": 9999,
            "contract_line_groups": "GENERIQUE| \nCATALOGUE",
            "contract_line_indicators": "REP-FI-STD-IST4| REP-FI-STD-IST5"
        },
        {
            "action": "UPD",
            "contract_line_code": "LC 2 - DEC_INCIDENT",
            "contract_line_service": "DEC_INCIDENT",
            "contract_line_description": "Ouvrir une demande générique",
            "contract_line_category": "Non définie",
            "contract_line_subcategories": "AMA\\CONTROLE LAITIER\\OSMOS\\BO| AMA\\CONTROLE LAITIER\\OSMOS\\ELEVAGE| AMA\\CONTROLE LAITIER\\OSMOS\\ELEVEUR| AMA\\CONTROLE LAITIER\\OSMOS\\DMS",
            "contract_line_type": "standard",
            "contract_line_service_level": "DEMANDE-TRT-3 ",
            "contract_line_uo": 9999,
            "contract_line_groups": "GENERIQUE| \nCATALOGUE",
            "contract_line_indicators": "REP-FI-STD-IST4| REP-FI-STD-IST5"
        }
    ]
}

Il me semble que le problème cité est quelque chose de simple, mais je ne parviens pas à le résoudre.

J'ai cherché du coté de JsonReader, j'ai l'impression que c'est ce qu'il faut utiliser, mais cela ne fonctionne pas.

Code :

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

TypeError: n.fields is undefined

Code :

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

1
2
3
4
5
6
7
8
9
 
var myReader = new Ext.data.JsonReader
    			(
    				{ root: 'allRecords' },
    				Ext.data.Record.create([{name: 'action'},{name: 'contract_line_code'}])
    			);
 
    			var store = new Ext.data.Store({reader : myReader});
    		    store.loadData(response.result);