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

**lije67** · 16/02/2013, 11h56

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 :

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
        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 :

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

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 :

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 :

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

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 :

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
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);
				}
			});
        }
    }
});

**sekaijin** · 16/02/2013, 13h40

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

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
    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 php :

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

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 javascript :

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

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

or un code JSON devrait être

Code javascript :

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

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 javascript :

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

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 :

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

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 :

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

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

il faut donc produire un php correspondant.

Code php :

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

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

**lije67** · 16/02/2013, 23h21

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 :

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
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 :

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

**sekaijin** · 17/02/2013, 13h50

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

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

Ext JS / Sencha

Vue hybride

Discussions similaires

Partager

Partager