Discussion :

[renardchan]

Bonjour,

Je débute extjs et je ne n'arrive pas à comprendre comment alimenter mon GRID depuis un tableau JSON. Je suis parti de l'exemple basic que l'on trouve sur sencha .http://dev.sencha.com/deploy/ext-4.0...rray-grid.html

SI je modifie les données à la main ou en formant une chaine comme dans l'exemple je parviens à intégrer mes données.

En revanche je souhaiterais alimenter mon GRID directement depuis mon tableau au format JSON.

J'ai vu dans la doc qu'il existait la commande Ext.data.reader.Json.
Me permet-elle de lire directement mon tableau au format JSON (issu d'une requete SQL php puis d'un json_encode()) en vue d'alimenter le data store du grid?

Si oui avez vous un exemple de cela?

Par avance merci,

[JulienFio]

Bonjour,

Cela se fait en 3 étapes:

en prenant comme exemple ce JSON ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
JSON={"records":      [
                    {
               "CHAMP1": "rouge",
                "CHAMP2": "long",
                "CHAMP3": "droit",
          },
                    {
               "CHAMP1": "vert",
                "CHAMP2": "court",
                "CHAMP3": "gauche",
          },
                    {
               "CHAMP1": "jaune",
                "CHAMP2": "moyen",
                "CHAMP3": "centre",
          }
     ],
     "totalProperties": 3,
     "success": true,
}

1) Définition de ton model
Le model est là pour définir la stucture de ton store (tes données). Bien qu'il existe un standard à respecter quand au format du JSON le model va définir quelles seront les champs à traiter.
exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
Ext.define('MyApp.model.monModel', {    
    extend: 'Ext.data.Model',
    fields: [{
        name: 'CHAMP1'
    },{
        name: 'CHAMP2'
    },{
        name: 'CHAMP3'
    }]
});

2) Définition du Store
Le Store est tout simplement le JSON qui tu vas recevoir et qui va 'alimenter' ton gridPanel. Tu définis l'url vers ta classer qui va générer ton JSON

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
Ext.define('MyApp.store.monStore', {
    extend: 'Ext.data.Store',  
    model: 'MyApp.model.monModel',
    pageSize: 5,
    proxy: {
        type: 'ajax',
        simpleSortMode: true,
        url: ' l'url vers ta servlet ou ton code php qui va te construite je JSON',
        reader:{
            type: 'json',
            root: 'records',
            totalProperty: 'totalProperties',
            successProperty: 'success'
        }
    }
});

3) Définition de ton grid
A ce grid tu lui spécifie le Store configuré plus tôt.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
Ext.define('MyApp.view.monGrid',{
    extend      : 'Ext.grid.Panel',
    id          : 'monGrid',
    store       : 'monStore',
    columns:[{
        dataIndex: 'CHAMP1',
        align: 'left',
        flex: 0.33
    },{
dataIndex: 'CHAMP2',
        align: 'left',
        flex: 0.33
},{
        dataIndex: 'CHAMP3',
        align: 'left',
        flex: 0.33
    }],
...

[renardchan]

Merci pour toutes ces informations. J'ai pas encore eu le temps de me pencher dessus (pont oblige).

lorsque tu dis

url: ' l'url vers ta servlet ou ton code php qui va te construite je JSON',

le fichier php doit-il retourner le contenu comme ton premier code? à savoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
JSON={"records":      [
                    {
               "CHAMP1": "rouge",
                "CHAMP2": "long",
                "CHAMP3": "droit",
          },
                    {
               "CHAMP1": "vert",
                "CHAMP2": "court",
                "CHAMP3": "gauche",
          },
                    {
               "CHAMP1": "jaune",
                "CHAMP2": "moyen",
                "CHAMP3": "centre",
          }
     ],
     "totalProperties": 3,
     "success": true,
}

Si oui, alors j'aurai besoin d'un petit éclaircissement. Lorsque je change le format du résultat de ma requête j'utilise " json_encode() ". Alors il me renverrait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 [
                    {
               "CHAMP1": "rouge",
                "CHAMP2": "long",
                "CHAMP3": "droit",
          },
                    {
               "CHAMP1": "vert",
                "CHAMP2": "court",
                "CHAMP3": "gauche",
          },
                    {
               "CHAMP1": "jaune",
                "CHAMP2": "moyen",
                "CHAMP3": "centre",
          }
     ]

Pour que le php me renvoie ce qui est nécessaire, dois-je utiliser une concaténation de chaine. Ainsi mon code php qui va fabriquer le Json doit ressembler à un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$chaine1= 'JSON={"records":';
$chaine2=json_encode ($resultatrequete);
$chaine3=', "totalProperties": 3,  "success": true,}';
$chaine4= $chaine1.$chaine2.$chaine3 ;
 
echo($chaine4);

Merci,

[JulienFio]

Donc oui, ton code php doit bien te retourner le JSON.
Par contre je ne suis pas sûr qu'il s'agisse d'une concaténation de chaine, je ne connais pas la procédure exacte en php. Moi je travaille en JAVA et j'utilise la classe JSONObject pour construire mon JSON que je retourne à mon code js

[DonMero]

Salut,

tu dois effectivement utilisé un json_encode. Voila un code que j'ai utilisé dans un de mes dernier projet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<?php
        
        require_once("../Connect.php");
        
        $requete = "SELECT ...'";
                        
        $resultat = odbc_exec($connexion,$requete);
        
        $projet = array();
        
        while($data = odbc_fetch_object($resultat)){
                  //Pour chaque ligne de résultat
                  $ligne = array();
                  foreach($data as $cle => $valeur)
                  {
                    //On encode en utf8 puis on stocke dans la ligne
                    $ligne[$cle] = utf8_encode($valeur);
                  }
                  $projet[] = $ligne;
        }
 
        echo json_encode($projet);       
        
?>

Il te retournera quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"IDProjet":"102","LibelleProjet":"Outil export de l'offre","DateDebut":"2011-06-01","DateFin":"2011-06-23","ServiceConcerne":"Informatique","Avancement":"0"},{"IDProjet":"101","LibelleProjet":"Outil d'\u00e9valuation","DateDebut":"2011-06-07","DateFin":"2011-06-22","ServiceConcerne":"Direction","Avancement":"80"}]

[JulienFio]

Tuto sencha

DonMero, tu ne spécifie pas de racine dans ton JSON ?
"records" dans mon exemple.
Propriété qui doit normalement être renseignée dans la déclaration de ton Store Extjs