Ext JS - Exploitation de la réponse du serveur

Signaler
Messages postés
5
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
6 juillet 2010
-
Messages postés
197
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
20 février 2013
-
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 :

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 :

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

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 :

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 !

1 réponse

Messages postés
197
Date d'inscription
mardi 20 janvier 2004
Statut
Membre
Dernière intervention
20 février 2013
1
Bonsoir,

dans un premier temps il faut définir quels sont les enregistrements qui sont dans ton fichier xml
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)

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