begin process at 2012 05 29 05:50:40
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

Framework

 > 

Autre Framework

 > 

Ext JS - Exploitation de la réponse du serveur


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,312 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales