Sujet Précédent Sujet Suivant

Ext JS - Exploitation de la réponse du serveur

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

Réponse 1 / 1
cs_47 Messages postés 197 Date d'inscription mardi 20 janvier 2004 Statut Membre Dernière intervention 20 février 2013 1
16 mars 2010 à 17:57
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
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
sweetAlert
ckrisL -
ckrisL -

15 réponses
Récupérer toutes les class d'un élément
cs_flexx -
flexx -

2 réponses
Incrémentation d'une variable globale en javascript
forcels -
forcels -

4 réponses
condition PHP => fonction JS
xactise -
pcgpegase -

1 réponse
Rejoignez-nous