Récupération et affichage de données AJAX

ce n'est pas du tout la bonne approche

il faut définir un datastore avec un proxy http configuré avec l'url de ta servlet
ensuite dans la vue il faut associer le datastore avec ton grid
les données sont alors automatiquement placé dans la grid

tu n'a pas à faire d'appel ajax, le proxy le fait pour toi
tu as un exemple ici http://docs.sencha.com/extjs/4.2.1/e...?theme=classic

le code est sur le lien grid-filter-local.js.

il y a quelques erreurs dans ton code (déjà je conseille de séparer html de js comme dans l'exemple)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    <!-- ICI IL MANQUE : l'inclusion de la librairie ExtJS voir la doc -->
    <!-- utiliser un lien vers un fichier js -->
    <script type="text/javascript" src="monScript.js"></script>
  </head>
  <body>
    <h2>Ajax Demo</h2>
    <!-- ICI IL MANQUE : un div avec l'id utilisé pour placer le grid (paramètre du renderTo ) -->
    <div id="'db-grid' />
  </body>
</html>

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
Ext.onReady(function(){
    var myData=null;
 
   // SUPPRIMER cet appel ajax et voir l'exemple
    Ext.Ajax.request({
        url: 'AccessServlet',
        method:'POST',
        success: function ( result, request ) { 
 
        // ATTENTION c'est comme en java on ne peux pas passer en paramètre un objet qu'on n'a pas initialisé
        store.loadData(myData);
        // Lire les données après avoir essyé de les mettre dans un store ne sert à rien (les lignes ont été inversées.)
        myData =Ext.decode(result.responseText);
        // pais tout ça ne sert à rien et est à supprimé
 
        },
        failure: function ( result, request) { 
                Ext.MessageBox.alert('Failed', result.responseText); 
        } 
    });
 
 
     // remplacer l'ArrayStore par un JsonStore voir l'exemple et la doc http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.JsonStore
     var store = new Ext.data.ArrayStore({
            fields: [
               {name: 'name'},
               {name: 'profession'},
 
            ]
        });
 
     //store.loadData(myData);
 
        // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {
 
                 header   : 'Name', 
                    width    : 160
 
                },
                {
                    header   : 'Profession', 
                    width    : 75 
 
                },
 
 
            ],
 
            height: 350
 
        });
 
        grid.render('db-grid'); //ICI tu utilise l'id du div définit dans le HTML or tu n'avais pas d'élément HTML dans ta page avec cet id
 
});

enfin ton code JAVA n'est pas bon non plus

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
     // Output stream to STDOUT
     PrintWriter out = response.getWriter();
 
 
    JSONObject myObject = new JSONObject();
 
 
 
    myObject.put("name","Jennifer");
    myObject.put("profession","teacher");
 
out.println(myObject); //ici tu écrit sur la sortie {"name":"Jennifer", "profession":"teacher"}
 
 
JSONObject myRecord = new JSONObject();
myRecord.put("name","Jacques");
myRecord.put("profession","Doctor");
//puis tu ne mets plus rien

JsonStore store attend une réponse du serveur de la forme

Code:

1
2
3
4
5
6
7
{
   "collaborators": //<= le nom de l'élément root est celui que tu mets dans la définition de ton JsonStore root: 'collaborators',
   [
        {"name":"Jennifer", "profession":"teacher"},
        {"name":"Jacques", "profession":"Doctor"}
    ]
}

pour produire ça en java il te faut faire quelque chose comme

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
 
     // Output stream to STDOUT
     PrintWriter out = response.getWriter();
 
    JSONObject persons= new JSONObject(); // la réponse à envoyer
 
    JSONObject myObject = new JSONObject();//jenifer
    myObject.put("name","Jennifer");
    myObject.put("profession","teacher");
 
 
   JSONObject myRecord = new JSONObject();//jacques
   myRecord.put("name","Jacques");
   myRecord.put("profession","Doctor");
 
   persons.put("collaborators", new JSONArray(new Array(2) {myObject, myRecord})); // ajout des deux personnes dans un tableau JSON référencé par la clef ""
 
 
   out.println(persons); //ici tu écrit sur la sortie

A+JYT