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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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:

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,

27/03/2012, 21h33
chaya

Hello,

Dans un premier temps essaye avec la valeur 'result' à la place de 'msg' pour le root du reader de ton store.
28/03/2012, 00h31
owenho

probleme store

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:

Uncaught ReferenceError: col is not defined

col est le nom du store!!!!

ou je devrai créer mon store !!
28/03/2012, 09h38
abraxis

Bonjour,

Pourrais tu mettre le code de ta combobox stp ?
"col" est le nom du store de la combobox ? Si oui, essais avec "st"
28/03/2012, 09h44
chaya

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

probléme sur le load su store

Bonjour,

Bon je declare le model du store:

Code:

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:

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:

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:

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

et voila mon fichier php:

Code:

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

code combobox

Code:

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

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:

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:

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

Un détail

Code:

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

A+JYT

28/03/2012, 18h28
owenho

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:

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 !!!
28/03/2012, 18h34
abraxis
Pour récupérer la réponse d'un

Code:

ajax.request

moi je fais comme ci-dessous :
Code:

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.

Remplace ds mon exemple la ligne :

Code:

cmp.store.load();

par
Code:

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

Bonsoir,

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

Code:

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

ou bien

Code:

store: 'app.store.column',

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

Code:

console.info(jsonData);

me donne ça:
Code:

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

28/03/2012, 19h51
chaya
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:

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

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

Code:

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:

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

Ok Merci , il me fallait changé result :

Code:

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

par succes:

Code:

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:

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

28/03/2012, 20h47
chaya

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.

;)

recuperation du donnée

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:

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.

29/03/2012, 08h59
chaya

Avec la fonction loadData de l'objet store

Code:

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)
29/03/2012, 09h21
abraxis

Petite question, pourquoi tu n'utilise pas un jsonStore pour ta combobox ?

Sinon une fois que tu as la réponse de l'ajax.request tu peux utiliser

Code:

store.loadData(mes_data);

pour remplir ton store.

Voir 40 message(s) de cette discussion en une page