Récuperation de store en envoyant un parametre avec ext.ajax.request

**owenho** · 27/03/2012, 20h53

Bonjour,
j'ai un problème au moment de récupération d'un store

j'ai un bouton dont le handler exécute un envoie de paramètre au fichier php avec ext.ajax.request,

Code :

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

1
2
3
4
5
6
7
8
9
 
$nom=$_POST['nom'];
$str[] = array(
	            'nom'=>$nom,
);
 
 
 
echo '{"result": ' . json_encode($str) . "}";

le $nom je l'ai envoyé depuis extjs et il est reçu très bien:

Code :

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

1
2
3
4
5
6
7
8
 
Ext.Ajax.request({
						url: '../fichier.php', 
						method: 'POST',
						params: {
								 nom: 'badr'   
								},
								queryMode : 'local',

mon probléme je veux recuperer la ligne d'echo et la mets dans une store pour que je puisse la mettre dans un combobox.
j'au crée un store dans le handler du boutton :

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 st = Ext.data.Store({
					model: 'column',
					proxy: new Ext.data.HttpProxy({
                    url: '../fichier.php', 
					queryMode : 'local',					
                    method: 'POST',
					type: 'ajax',
					reader: {
					type: 'json',
					root: 'msg'
					},
						})
 
					,autoLoad: true,autoSave:true,
 
					}).load();

et rien ne s'affiche dans la combobox.
merci d'avance,

**chaya** · 27/03/2012, 22h33

Hello,

Dans un premier temps essaye avec la valeur 'result' à la place de 'msg' pour le root du reader de ton store.

**owenho** · 28/03/2012, 01h31

Bonsoir ,

merci pour la reponse,
bon pour le fichier de php ca marche il return un format json,mais je veux creer un store data aprés l'execution de code php et lui attribuer à un autre combobox.

lorsque je creer le store dans le handler du boutton et je l'attribue au combobox,
l'erreur suivant s'affiche

Code :

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

Uncaught ReferenceError: col is not defined

col est le nom du store!!!!

ou je devrai créer mon store !!

**abraxis** · 28/03/2012, 10h38

Bonjour,

Pourrais tu mettre le code de ta combobox stp ?
"col" est le nom du store de la combobox ? Si oui, essais avec "st"

**chaya** · 28/03/2012, 10h44

Si l'on avait ton code entier cela serait plus facile de t'aider.

**owenho** · 28/03/2012, 13h15

Bonjour,

Bon je declare le model du store:

Code :

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

1
2
3
4
Ext.regModel('column', 
					{
					fields: ['nom']
					});

aprés j'envoie un parametre 'nom' dont la valeur est 'badr' au fichier php avec ajax.request , et ensuite je crée un store .

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
handler : function() 
				{
				Ext.Ajax.request({
						url: 'ListeColumn.php', 
						method: 'POST',
						params: {
								 nom: 'badr'   
								},
								queryMode : 'local',
 
						success: function(response)
								{
			 	var text = response.responseText;
				 	// process server response here
				 	console.log();
 
			 	col = Ext.data.JsonStore({
			               model: 'column',
			 	proxy:{
 
		 		url: 'ListeColumn.php', 
			 	queryMode : 'local',					
			         method: 'POST',
				type: 'ajax',
					reader: {
					type: 'json',
					root: 'result'
				       },
				 },
				});
				Ext.Msg.alert('!!!!!',''+col);
			  col.load({
		                  callback: function(operation) {
					console.log(operation);                     }
								});
 
								},
						failure: function()
								{
			 Ext.Msg.alert('not ok');
								},	
				});
 
 
 
				},

et lorsque je fais col.load(); je reçois l'erreur suivant:

Code :

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

Uncaught TypeError: Object #<Object> has no method 'load'

et lorsque je fait shift+ctr+j pour voir le network : je vois clairement mon fichier php bien executé avec sortie comme ça :

Code :

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

{"result": [{"nom":"badr"}]}

et voila mon fichier php:

Code :

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

1
2
3
4
5
6
7
8
<?php 
$nom=$_POST['nom'];
$str[] = array(
                    'nom'=>$nom,
);
// echo'{"success":true}';
echo '{"result": ' . json_encode($str) . "}";
?>

je pense le probléme de chargement du store;
merci

**owenho** · 28/03/2012, 13h19

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
Ext.create('Ext.form.field.ComboBox', {
                    name: 'champs',
                    fieldLabel: 'Column ',
					queryMode: 'local',
					editable: false,
					store: col,
					id: 'nom',
					// typeAhead: true,
					// triggerAction: 'all',
					// selectOnFocus:true,
					emptyText : 'choisissez',
					renderTo: document.body,
					displayField: 'nom',
					valueField: 'nom',
                    x: 295,
                   y: 10
                });

**chaya** · 28/03/2012, 14h16

Je suspecte la visibilité de ta variable col trop limitée. (il faudrait la déclarer en début de script)

Penche tout de même pour cette solution ci-dessous, elle s'approche beaucoup plus du modèle MVC sencha qui offre une plus grande facilité de maintenance et d'évolution pour une application web.

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
 
//Modèle app/model/column.js
Ext.define('app.model.column', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'nom', type:'string'}
    ]
});
 
//Magasin app/store/column.js
Ext.define('app.store.column', {
    extend: 'Ext.data.Store',
    model: 'app.model.column',
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: 'test.json',
        reader: {
            type: 'json',
            model: 'app.model.column',
            root: 'result'
        }
    }
});
 
//Controlleur app/controller/column.js
Ext.define('app.controller.column', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.control({
            '.comboperso': {
                render: this.load, 
                added: this.load 
            }
        });
    }, 
 
    load: function(cmp, opts) {
    	cmp.store.load();
    }
});
 
//Vue app/view/column.js
Ext.define('app.view.column', {
	extend: 'Ext.form.field.ComboBox',
    alias : 'widget.comboperso',
    name: 'champs',
    fieldLabel: 'Column',
    queryMode: 'local',
    editable: false,
    store: Ext.create('app.store.column'),
    id: 'nom',
    // typeAhead: true,
    // triggerAction: 'all',
    // selectOnFocus:true,
    emptyText : 'choisissez',
    renderTo: document.body,
    displayField: 'nom',
    valueField: 'nom',
    x: 295,
    y: 10
});
 
//point d'entrée de l'appli app.js
Ext.application({
    name: 'app',
    autoCreateViewport: false,
    controllers: ['app.controller.column'],
    models: ['app.model.column'],
    stores: ['app.store.column'],
    views: ['app.view.column'],
    launch: function() {
    	Ext.create('app.view.column');
    }
});

test.json

Code :

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

1
2
3
4
5
6
7
8
9
10
11
{
    "result": [
        {
            "nom":"opt1"
        }, {
            "nom":"opt2"
        }, {
            "nom":"opt3"
        }
    ]
}

**sekaijin** · 28/03/2012, 17h41

Un détail

Code php :

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

1
2
3
4
5
6
$nom=$_POST['nom'];
$results[] = array('nom'=>$nom);
//...
$response = array('result' => $results);
 
echo json_encode($response);

A+JYT

**owenho** · 28/03/2012, 19h28

merci pour l'exemple ça marche bien,

ce que je veux c'est d'envoyer un variable avec ajax.request (je l'ai envoyé et il est bien reçu par le fichier php).apres le fichier php va returné un format json.
lorsque je fais alt+shit+j je le vois bien :appelation de fichier php et execution avec le parametre que j'ai envoyé.
comment récupérer le resultat retourné par le fichier php??
pour le store je la crée comme ça au debut de fichier js:

Code :

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

var col;

et dans le succes handler du boutton j'envoie le paramètre, et au même temps je veux récupérer la sortie du fichier php dans un store pour que je puisse la donner au comme store du combobox.
des iddées !!!

**abraxis** · 28/03/2012, 19h34

Pour récupérer la réponse d'un

Code :

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

ajax.request

moi je fais comme ci-dessous :

Code :

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

1
2
3
4
5
	success: function(result, request)
		{
			var jsonData = Ext.util.JSON.decode(result.responseText); 
			console.info(jsonData);
		}

Après il y a peut être mieux mais moi ça fonctionne très bien.

**chaya** · 28/03/2012, 19h54

Remplace ds mon exemple la ligne :

Code :

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

cmp.store.load();

par

Code :

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

1
2
3
4
5
6
cmp.store.load({
    params: {
        nom: 'badr', 
        monParam2: 'maValeur2'
    }
});

**owenho** · 28/03/2012, 20h31

Bonsoir,

@ Chaya :
le fichier s'execute bien mais le resultat n'apparait pas dans le combobox,méme si jai fait

Code :

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

store: Ext.create('app.store.column'),

ou bien

Code :

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

store: 'app.store.column',

@abraxis:
le fichier php s'execute aussi sans probléme et

Code :

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

console.info(jsonData);

me donne ça:

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
Object
success: Array[1]
0: Object
nom: "badr"
__proto__: Object
length: 1
__proto__: Array[0]
__proto__: Object
__defineGetter__: function __defineGetter__() { [native code] }
__defineSetter__: function __defineSetter__() { [native code] }
__lookupGetter__: function __lookupGetter__() { [native code] }
__lookupSetter__: function __lookupSetter__() { [native code] }
constructor: function Object() { [native code] }
hasOwnProperty: function hasOwnProperty() { [native code] }
isPrototypeOf: function isPrototypeOf() { [native code] }
propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }

comment puis je faire pour afficher au combobox "badr" : retourné par jsonData ??

mercii beaucoup de vos aides

**chaya** · 28/03/2012, 20h51

remplace le $_POST['nom']; par $_GET['nom']; dans ton fichier php

ou bien dans le javascript mets plutôt ceci à la place du cmp.store.load() :

Code :

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

1
2
3
4
5
6
7
cmp.store.load({
    method: 'POST',
    params: {
        nom: 'badr', 
        monParam2: 'maValeur2'
    }
});

**owenho** · 28/03/2012, 21h01

il est $_GET['nom'] et rien n'est afficher dans combobox
code combobox:

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
Ext.define('app.view.column', {
	extend: 'Ext.form.field.ComboBox',
    alias : 'widget.comboperso',
    name: 'champs',
    fieldLabel: 'Column',
    queryMode: 'local',
    editable: false,
    store: Ext.create('app.store.column'),
    id: 'nom',
    // typeAhead: true,
    // triggerAction: 'all',
    // selectOnFocus:true,
    emptyText : 'choisissez',
    renderTo: document.body,
    displayField: 'nom',
    valueField: 'nom',
    x: 295,
    y: 10
});

le controller et le store:

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
Ext.define('app.store.column', {
    extend: 'Ext.data.Store',
    model: 'app.model.column',
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: 'ListeColumn.php',
        reader: {
            type: 'json',
            model: 'app.model.column',
            root: 'result'
        }
    }
});
 
//Controlleur app/controller/column.js
Ext.define('app.controller.column', {
    extend: 'Ext.app.Controller',
    init: function() {
        this.control({
            '.comboperso': {
                render: this.load, 
                added: this.load 
            }
        });
    }, 
 
    load: function(cmp, opts) {
    	cmp.store.load({
    params: {
        nom: 'badr', 
    }
});

**owenho** · 28/03/2012, 21h09

Ok Merci , il me fallait changé result :

Code :

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

1
2
3
4
5
reader: {
            type: 'json',
            model: 'app.model.column',
            root: 'result'
        }

par succes:

Code :

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

1
2
3
4
5
reader: {
            type: 'json',
            model: 'app.model.column',
            root: 'success'
        }

il apparit clairement maintenant dans le combobox avec la methode Get .
Mercii infiniment chaya

j'attends aussi la réponse de abraxis. pour afficher le resultat de dans le combobox :

Code :

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

1
2
3
4
5
success: function(result, request)
		{
			var jsonData = Ext.util.JSON.decode(result.responseText); 
			console.info(jsonData);
		}

**chaya** · 28/03/2012, 21h47

Le root doit être égal au nom de l'attribut contenant le tableau de donnée de ton objet renvoyé par PHP.

n'oublis pas de cliquer sur résolu.

**owenho** · 29/03/2012, 01h30

il me reste une chose : avec la methode de ajax.request , j'ai un boutton et lorsque je clique dans la fonction handler j'envoie un parametre au fichier php,
si je faits alt+shift+j je vois bien le fichier s'execute et renvoie la forme json valide, donc je voudrais afficher le resultat du fichier retourné dans un combobox

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
 handler : function() 
				{
			Ext.Ajax.request({
					url: 'ListeColumn.php', 
					method: 'POST',
					params: {
						 nom: 'badr'   
						},
					queryMode : 'local',
 
			success: function(result, request)
						{
			//var text = response.responseText;
					// process server response here
			//	console.log();
			var jsonData = Ext.decode(result.responseText); 
			console.info(jsonData);
	 	Ext.Msg.alert('!!!!!',''+jsonData);	
 
					},
			failure: function()
					{
						Ext.Msg.alert('not ok');
					},	
				});

comment associer jsonData à un store et l'afficher dans un combobox .
j'ai crée une store dans le handler mais il accepte pas la methode load();
et lorsque je l'attribue au combobox , soit il la connait pas soit il affiche rien .
merci d'avance.

**chaya** · 29/03/2012, 09h59

Avec la fonction loadData de l'objet store

Code :

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

myStore.loadData(jsonData.sucess)

Mais je pense qu'il est comme préférable de retenir la solution que je t'ai proposé avec le proxy sur le store. (tu pourras toujours manipuler les données avant et après chargement en y ajoutant des events si c'est ce que tu recherches)