[ext-4.1.1a] Data d'un GridWindow chargées en Ajax

Version imprimable

Hello tout le monde,

J'ai installé extJS hier. Avec l'installation de base, je me suis fait un GridWindow.

Dans son paramètre items, il y a store qui est de type new Ext.data.ArrayStore
Le store contient les data de la grid (punaise, ça devient du franglais).
Les data sont chargées de cette façon : data: MyDesktop.GridWindow.getBots()

et la fonction est :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        getBots: function () {
			$.ajax({
				url : 'includes/botsStatus.php',
				dataType: "json",
				beforeSend: function(x) {
					if(x && x.overrideMimeType) {
						x.overrideMimeType("application/json;charset=UTF-8");
					}
				},
				success :
				function(data) {
					return data;
				},
				error :
				function (data) {
					alert('erreur ' + data);
				}
			});
        }

Le fichier PHP est super simple, j'ai tenté avec quelque chose de basique :

Code:

1
2
3
4
5
6
7
<?php 
$data = "[
        ['testuser','testpwd','0'],
        ['user2','pwd2','1']
]";
echo json_encode($data);
?>

L'erreur n'est pas levée. Donc la requête est correcte. Si je fais un alerte, ça passe aussi. Or le store ne trouve aucun élément :

Citation:

Uncaught TypeError: Cannot read property 'length' of undefined - Store.js:2278

Normalement, ça devrait être un object ( http://docs.sencha.com/ext-js/4-1/#!...ata.ArrayStore ). Si je fais un simple

Code:

1
2
3
4
return [
	['testuser','testpwd','0'],
	['user2','pwd2','1']
];

au lieu de faire l'appel en ajax dans la fonction, ça passe nickel, mais du coup ce n'est plus dynamique.
Savez-vous d'où provient mon problème ?

Merci

PS : Le fichier GridView.js en entier est :

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
/*!
 * Ext JS Library 4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
 
Ext.define('MyDesktop.GridWindow', {
    extend: 'Ext.ux.desktop.Module',
 
    requires: [
        'Ext.data.ArrayStore',
        'Ext.util.Format',
        'Ext.grid.Panel',
        'Ext.grid.RowNumberer'
    ],
 
    id:'grid-win',
 
    init : function(){
        this.launcher = {
            text: 'Bots Status',
            iconCls:'icon-grid'
        };
    },
 
    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('grid-win');
        if(!win){
            win = desktop.createWindow({
                id: 'grid-win',
                title:'Bots Status',
                width:740,
                height:480,
                iconCls: 'icon-grid',
                animCollapse:false,
                constrainHeader:true,
                layout: 'fit',
                items: [
                    {
                        border: false,
                        xtype: 'grid',
						selModel: Ext.create('Ext.selection.CheckboxModel'),
                        store: new Ext.data.ArrayStore({
                            fields: [
                               { name: 'username' },
                               { name: 'password' },
                               { name: 'status', type: 'float' }
                            ],
                            data: MyDesktop.GridWindow.getBots()
                        }),
                        columns: [
                            new Ext.grid.RowNumberer(),
                            {
                                text: "Username",
                                flex: 1,
                                sortable: true,
                                dataIndex: 'username'
                            },
                            {
                                text: "Password",
                                width: 70,
                                dataIndex: 'password'
                            },
                            {
                                text: "Status",
                                width: 70,
                                sortable: true,
                                dataIndex: 'status'
                            }
                        ]
                    }
                ],
                tbar:[{
                    text:'Add',
                    tooltip:'Add a new bot',
                    iconCls:'add'
                }, '-', {
                    text:'Check',
                    tooltip:'Modify options',
                    iconCls:'option',
					handler: function() {
						alert('ok');
					}
                },'-',{
                    text:'Remove',
                    tooltip:'Remove the selected bots',
                    iconCls:'remove'
                }]
            });
        }
        return win;
    },
 
    statics: {
        getBots: function () {
			$.ajax({
				url : 'includes/botsStatus.php',
				dataType: "json",
				beforeSend: function(x) {
					if(x && x.overrideMimeType) {
						x.overrideMimeType("application/json;charset=UTF-8");
					}
				},
				success :
				function(data) {
					return data;
				},
				error :
				function (data) {
					alert('erreur ' + data);
				}
			});
        }
    }
});

pour lire tes données avec ajax il y a plus simple
utilise un JsonStore

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    var store = Ext.create('Ext.data.JsonStore', {
        // store configs
        autoDestroy: true,
        model: 'Product',
        proxy: {
            type: 'ajax',
            url: '/path/to/my/json.php',
            reader: {
                type: 'json',
                root: 'data',
                idProperty: 'id',
                totalProperty: 'total'
            }
        }],
        pageSize: 50
    });

ainsi Extj va appeler l'url dès qe necessaire pour récupérer les donnes. tu pourras aussi utiliser les méthode du dataStore pour les charger à la demande.

ton problème ne vient pas de javascript mais de php.

Code:

1
2
3
4
5
6
7
<?php 
$data = "[
	['testuser','testpwd','0'],
	['user2','pwd2','1']
]";
echo json_encode($data);
?>

ce code ne produit pas dut tout un JSON conforme. la variable php data est une string json_encode va générer une chaine entouré de " ainsi

Code:

1
2
3
4
"[
	['testuser','testpwd','0'],
	['user2','pwd2','1']
]"

or un code JSON devrait être

Code:

1
2
3
4
[
	['testuser','testpwd','0'],
	['user2','pwd2','1']
]

pour produire un tel JSON avec json_encore il faut lui passer une varaible de type array contenant deux entrées de type array.

Mais dans ton cas ce n'est pas sufisant car le JSON attendu par ExtJS n'est pas celui là. c'est

Code:

1
2
3
4
5
6
7
{
  "data":[
    {"id":1, "username":"testuser", "password":"testpwd", "status":0},
    {"id":2, "username":"user2", "password":"pwd2", "status":1},
  ],
  'total': 2
}

tu défini ton modèle ainsi

Code:

1
2
3
4
5
6
7
fields: [
  // tu doit mettre un id unique
  { id: 'id' },
  { name: 'username' },
  { name: 'password' },
  { name: 'status', type: 'float' }
]

et dans le JsonStore le reader

Code:

1
2
3
4
5
6
reader: {
  type: 'json',
  root: 'data',
  idProperty: 'id',
  totalProperty: 'total'
}

il faut donc produire un php correspondant.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php 
//datas conforme à définition du model
$data = array(
	array('id' => 1, 'username' => 'testuser', 'password' => 'testpwd', 'status'=> 0),
	array('id' => 2, 'username' => 'user2',    'password' => 'pwd2',    'status'=> 1)
);
//réponse attendu par le reader
$response = array(
  //perso je mets toujour un attribut success (il n'est pa obligatoire dans ce cas)
  'success' => true,
  'data' => $data,
  'total' => count($data)
);
echo utf8_encode(json_encode($response));
?>

A+JYT

Merci à toi.
Je remarque c'est une question qui est plus ou moins revenue plusieurs fois.

J'ai tenté plusieurs choses avec ton code.
Je me disais bien que l'object (ou la string dans mon cas) retournée par le fichier php n'était pas bon.

Je remarque que tu n'utilises pas la fonction load pour charger le store. En fait, comme tu l'as dit, c'est la gridWindow qui se charge de l'appeler au besoin ?

Il y avait une petite coquille dans ton code avec un ] en trop mais sinon dans mon cas, la grid s'ouvre, aucune erreur n'est levée et elle reste vide.

PS : je ne vois rien de chargé dans le débogeur de Chrome.

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
/*!
 * Ext JS Library 4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
 
Ext.define('MyDesktop.GridWindow', {
    extend: 'Ext.ux.desktop.Module',
 
    requires: [
        'Ext.data.ArrayStore',
        'Ext.util.Format',
        'Ext.grid.Panel',
        'Ext.grid.RowNumberer'
    ],
 
    id:'grid-win',
 
    init : function(){
        this.launcher = {
            text: 'Bots Status',
            iconCls:'icon-grid'
        };
    },
 
    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('grid-win');	
        if(!win){
            win = desktop.createWindow({
                id: 'grid-win',
                title:'Bots Status',
                width:740,
                height:480,
                iconCls: 'icon-grid',
                animCollapse:false,
                constrainHeader:true,
                layout: 'fit',
                items: [
                    {
                        border: false,
                        xtype: 'grid',
						selModel: Ext.create('Ext.selection.CheckboxModel'),
                        store: new Ext.create('Ext.data.JsonStore', {
							autoDestroy: true,
							model: 'column',
							proxy: {
								type: 'ajax',
								url: 'http://direct_url/fichier.php',
								reader: {
									type: 'json',
									root: 'data',
									idProperty: 'id',
									totalProperty: 'total'
								}
							},
							pageSize: 50
						}),
                        columns: [
                            new Ext.grid.RowNumberer(),
                            {
                                text: "Username",
                                flex: 1,
                                sortable: true,
                                dataIndex: 'username'
                            },
                            {
                                text: "Password",
                                width: 70,
                                dataIndex: 'password'
                            },
                            {
                                text: "Status",
                                width: 70,
                                sortable: true,
                                dataIndex: 'status'
                            }
                        ]
                    }
                ],
                tbar:[{
                    text:'Add',
                    tooltip:'Add a new bot',
                    iconCls:'add'
                }, '-', {
                    text:'Check',
                    tooltip:'Modify options',
                    iconCls:'option',
					handler: function() {
						alert('ok');
					}
                },'-',{
                    text:'Remove',
                    tooltip:'Remove the selected bots',
                    iconCls:'remove'
                }]
            });
        }	
        return win;
    }
});

Une idée pourquoi la grid est vide ?

PS : si je met un autoload à la place du autodestroy, j'ai une erreur :

Citation:

Uncaught TypeError: Object #<Object> has no method 'read' - Server.js

17/02/2013, 13h50
sekaijin

je n'ai pas ExtJS sous la main pour analyser plus pércisément ton pb
je te conseille de regarder cet exemple, et le source.

il y a la partie sort et grouping qui ne te concerne pas directement mais l'exemple est complet.

une exercice intéréssant est de faire c'est le tutorial MVC
il permet de mettre en oeuvre une organisation de l'application et donc de bien structurer son code.
par exemple contraiement à ton exemple de bien séparer le modèle (définition des data, Model Store et proxy) et la vue affichage des données. et ce qu'il faut pour les manipuler.

A+JYT