Accueil > Forum > > > > Ext JS - Exploitation de la réponse du serveur
Ext JS - Exploitation de la réponse du serveur
mardi 16 mars 2010 à 12:20:58 |
Ext JS - Exploitation de la réponse du serveur

malemdev
|
Bonjour à tous,
Je développe une application web basée sur le framework Ext JS. Mais je débute sur le modèle AJAX et je rencontre mes premiers problèmes d'exploitation du résultat renvoyé par le serveur.
Je cherche en premier lieu faire fonctionner les exemples afin de comprendre comment cela fonctionne.
Par exemple, une data grid, mais renseignée par une requête SQL et non par une déclaration statique de données comme ici :
Code Javascript :
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myData = [['Harold','Pinter'],['Randy','Pauch'],['Orhan','Pamuk'],['Toni','Morrison'],['Dorris','Lessing'],['Florence','Justina'],['Frank','Jennings'],['Dario','Fo'],['Ivan','Bunin'],['Henri','Bergson'],]
var store = new Ext.data.ArrayStore({
fields: [
{name: 'FirstName'},
{name: 'LastName'},
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'FirstName',header: 'FirstName', width: 160, sortable: true, dataIndex: 'FirstName'},
{header: 'LastName', width: 75, sortable: true, dataIndex: 'LastName'},
],
stripeRows: true,
height: 200,
width: 600,
title: 'Membres de la compagnie',
stateful: true,
stateId: 'grid'
});
grid.render('exemple-table');
});
Ce code marche bien sûr, mais mon but est de remplacer la déclaration statique par le résultat d'une requête SQL dans un script PHP. Celui-ci :
Code PHP :
<?php
$link=mysql_connect("127.0.0.1","root","") or die(mysql_error());
mysql_select_db("airalliance") or die(mysql_error());
$query="select * from guest order by LastName desc";
$res=mysql_query($query);
$reponse ="<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r";
$reponse.="<dataset>\r";
while ($data=mysql_fetch_array($res))
{
$reponse.="\t<row>\r";
$reponse.="\t\t<FirstName>".$data['FirstName']."</FirstName>\r";
$reponse.="\t\t<LastName>".$data['LastName']."</LastName>\r";
$reponse.="\t</row>\r";
}
$reponse.="</dataset>\r";
echo $reponse;
mysql_close($link);
?>
Ainsi j'instancie un objet XMLHttpRequest, je lui fait exécuter ce script PHP et je récupère le résultat côté Javascript :
Code Javascript :
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var xmlhttpX
xmlhttpX=GetXmlHttpObject();
if (xmlhttpX==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
xmlhttpX.open("GET","requete_table.php",false);
xmlhttpX.send(null);
var myData = xmlhttpX.responseXML
var store = new Ext.data.XMLStore({
fields: [
{name: 'FirstName'},
{name: 'LastName'},
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'FirstName',header: 'FirstName', width: 160, sortable: true, dataIndex: 'FirstName'},
{header: 'LastName', width: 75, sortable: true, dataIndex: 'LastName'},
],
stripeRows: true,
height: 200,
width: 600,
title: 'Membres de la compagnie',
stateful: true,
stateId: 'grid'
});
grid.render('exemple-table');
});
Or cela ne fonctionne pas. Ici, je fais écrire du XML à mon script PHP, mais je ne sais pas comment le récupèrer correctement dans Javascript car dans la documentation Ext JS, le XML est toujours contenu dans une URL statique et non un résultat de script, comme ici :
Code Javascript :
Ext.onReady(function(){
var store = new Ext.data.Store({
url: 'sheldon.xml,
reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ASIN',
totalRecords: '@total'
}, [
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
])
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
{header: "Title", width: 180, dataIndex: 'Title', sortable: true},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
renderTo:'example-grid',
width:540,
height:200
});
store.load();
});
Bref, j'ai besoin d'un coup de pouce.
Merci d'avance !
|
|
mardi 16 mars 2010 à 17:57:19 |
Re : Ext JS - Exploitation de la réponse du serveur

47
|
Bonsoir,
dans un premier temps il faut définir quels sont les enregistrements qui sont dans ton fichier xml
Code Javascript :
var test = Ext.data.Record.create([
{name:'nom', type:'string'},
{name:'prenom', type:'string')
]);
ceci va permettre à XmlReader de pouvoir lire ton résultat
après tu peux l'utiliser dans le store (il doit être possible de passer des variables en GET et en POST)
Code Javascript :
var store = new Ext.data.Store({
url: 'toto.php', //
reader: new Ext.data.XmlReader({
record:'untest',
}, test),
sortInfo:{field:'nom', direction:'ASC'}
});
après le store s'utilise comme d'habitude
ca doit fonctionner en version 2 d'ExtJs par contre en 3, je ne sais pas ...
en espérant t'avoir aiguillé
bonne soirée
|
|
Cette discussion est classée dans : true, grid, width, store, ext
Répondre à ce message
Sujets en rapport avec ce message
[Ext js] Afficher un grid [ par Trinou ]
Bonjour à tous, Je débute en JS, et je voudrais afficher un array grid. J'ai essayé et cherché mais je n'arrive pas à comprendre ce qui ne va pas dan
ExtJS -> Tab + grid [ par yannickiwi ]
Bonjour,Je cherche a mettre une grid dans mon tab extJs. pour ce faire voici le code que j'ai développer:fichier html:TabPanel Tutorial<!-- Ext CSS an
Faire un drag and drop dans une grid (EXTJS) [ par tsunami77 ]
Bonjour, J'ai créé 2 grids, une ou je glisse les donner pour remplir la seconde. Je désirerais ordonner les ligne de la seconde a ma donne volonter,
extjs [ par yosrounaw ]
salut, j'ai utilisé EXTjs: j'ai créer une fenêtre composée de grid de nom des utilisateurs et des textfield pour les détails des utilisateurs, je veu
comment remplir une Ext grid à partir d'une DB à l'aide du JAVA ?? [ par 3askou ]
SVP je me galere .. j'ai une Ext grid et je sais pas comment la remplir depuis ma base MySql ?? en fete je travaille sur un projet web dynamique du ja
Taille d'ecran sur code css [ par badvirus ]
Bonjour, mon probleme avec ce code est que je voudrais l'adapter a n'importe quelle taille d'ecran et je n'y arrive pas. voici le code CSS : body {
Problème css sous mozilla [ par boninou ]
Bonjour à tous, J'ai un petit souci de mise en page sous Mozilla que je n'ai pas sous IE et Chrome. Mon code est le suivant : [code=html]#profil d
valeur inserer dynamiquement dans javascript [ par mdh12 ]
salut, j'espère que je suis dans le bon espace de forum pour traiter mon problème le code suivant sert a afficher le statistique sous forme de comenb
Insertion d'un élement dans un fieldset [ par asmagh ]
Bonjour, s'il vous plait j'aimerai savoir comment je peux inserer un élément dans un fieldset existant de la bibliotheque ext Js. sachant que mon e
Utilisation d'un fieldset de ExtJs [ par asmagh ]
Bonjour, Je suis débutante en JavaScript et j'ai besoin de votre aide. Je veux utiliser un fieldset de la bibliothèque ExtJs pour le placer dans une z
Livres en rapport
|
Derniers Blogs
JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|