lire un tableau json pour créer un grid (extjs 4)

**renardchan** · 31/05/2011, 16h44

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** · 31/05/2011, 17h52

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** · 06/06/2011, 16h51

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** · 06/06/2011, 17h24

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** · 06/06/2011, 17h31

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** · 06/06/2011, 17h45

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

**DonMero** · 07/06/2011, 10h16

Je viens de voir que vous étiez sur la version 4 alors que je bosse en 3.3 donc autant pour moi. Je n'ai pas encore essayer cette version mais je ne savais pas qu'ils avaient modifié la façon de faire. Bon courage en tout cas

**renardchan** · 09/06/2011, 17h40

Bsr,

Je suis en train de tester les solutions proposées mais je n'arrive pas à faire marcher mon code. J'ai fais un mix de vos propositions et de l'exemple basic du site sencha http://dev.sencha.com/deploy/ext-4.0...rray-grid.html. J'ai essayé de simplifier au maximum pour bien comprendre le tout.

Petite interrogation : que se passe-t-il de plus dans

Code :

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

1
2
3
Ext.define('MyApp.store.monStore', {
    extend: 'Ext.data.Store',  
    model: 'MyApp.model.monModel',

par rapport à

Code :

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

Ext.create('Ext.data.Store', {

que j'utilise.

Mon fichier html :

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
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
 
 
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title id='title'>HTML Page setup Tutorial</title>
 
        <!-- ** CSS ** -->
        <!-- base library -->
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
		<link rel="stylesheet" type="text/css" href="ext/examples/shared/example.css" />
		<script type="text/javascript" src="ext/bootstrap.js"></script>
 
        <!-- overrides to base library -->
 
 
        <!-- ** Javascript ** -->
        <!-- ExtJS library: base/adapter -->
 
        <!-- ExtJS library: all widgets -->
 
 
        <!-- overrides to base library -->
 
        <!-- extensions -->
 
        <!-- page specific -->
		<style type="text/css">
        /* style rows on mouseover */
        .x-grid-row-over .x-grid-cell-inner {
            font-weight: bold;
        }
        /* shared styles for the ActionColumn icons */
        .x-action-col-cell img {
            height: 16px;
            width: 16px;
            cursor: pointer;
        }
        /* custom icon for the "buy" ActionColumn icon */
        .x-action-col-cell img.buy-col {
            background-image: url(../shared/icons/fam/accept.gif);
        }
        /* custom icon for the "alert" ActionColumn icon */
        .x-action-col-cell img.alert-col {
            background-image: url(../shared/icons/fam/error.gif);
        }
    </style>
 
	<script type="text/javascript" src="tableaujs.js"></script>
 
    </head>
    <body>
	<div id="tableauordre"></div>
    </body>
</html>

mon tableaujs.js

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
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
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
 
]);
 
Ext.onReady(function() {
 
 
 
    // create the data store
    var store = Ext.create('Ext.data.Store', {
        fields: ['CHAMP1','CHAMP2','CHAMP3'],
 
       proxy: {
        type: 'ajax',
        url: ' creationjson.php',
        reader:{
            type: 'json',
            root: 'records',
			 totalProperty: 'total'
 
			}
		}
    });
 
    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
 
        columns: [
            {
                text     : 'champ1',              
                dataIndex: 'CHAMP1'
            },
            {
                text     : 'champ2',
                dataIndex: 'CHAMP2'
            },
            {
                text     : 'champ3',           
                dataIndex: 'CHAMP3'
            }
        ],
        height: 350,
        width: 600,
        title: 'tableau',
        renderTo: 'tableauordre'
 
    });
});

et mon Json qui est crée par creationjson.php

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
<?php
 
$JSON = '{"records":      [
                    {
               "CHAMP1": "rouge",
                "CHAMP2": "long",
                "CHAMP3": "droit"
          },
                    {
               "CHAMP1": "vert",
                "CHAMP2": "court",
                "CHAMP3": "gauche"
          },
                    {
               "CHAMP1": "jaune",
                "CHAMP2": "moyen",
                "CHAMP3": "centre"
          }
     ]

}';
 
echo ($JSON);
 ?>

ce fichier mon renvoi :

{"records": [ { "CHAMP1": "rouge", "CHAMP2": "long", "CHAMP3": "droit" }, { "CHAMP1": "vert", "CHAMP2": "court", "CHAMP3": "gauche" }, { "CHAMP1": "jaune", "CHAMP2": "moyen", "CHAMP3": "centre" } ] }

Mon tableau s'affiche bien à l'écran, mais il est vide. Est ce que je me suis passé de paramètres essentielles pour réaliser mon tableau? Le format JSON me semble pourtant correcte.

**JulienFio** · 09/06/2011, 18h36

Tu y es presque, en version 4 il faut que tu définisses un model, c'est pour cela qu'aucunes données ne s'affichent.

quand toi tu fais:

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
 
    // create the data store
    var store = Ext.create('Ext.data.Store', {
        fields: ['CHAMP1','CHAMP2','CHAMP3'],
 
       proxy: {
        type: 'ajax',
        url: ' creationjson.php',
        reader:{
            type: 'json',
            root: 'records',
			 totalProperty: 'total'
 
			}
		}
    });

En fait c'est comme ceci qu'il faut faire:

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
26
27
28
 
//Ton model
Ext.define('model', {    
    extend: 'Ext.data.Model',
    fields: [{
        name: 'CHAMP1'
    },{
        name: 'CHAMP2'
    },{
        name: 'CHAMP3'
    }]
});
 
//Ton store
 var store = Ext.create('Ext.data.Store', {
        model: model, //Ton model définie ci dessus
 
       proxy: {
        type: 'ajax',
        url: ' creationjson.php',
        reader:{
            type: 'json',
            root: 'records',
			 totalProperty: 'total'
 
			}
		}
    });

Ext.define est une déclaration. Si tu veux définir tes propres classes tu utilises define. Une fois tes classes définies, tu les utilises avec create (tes classes ou celles de bases).

define -> déclaration
create -> instanciation

**renardchan** · 09/06/2011, 19h04

Ci- après mon fichier tableaujs.js final . La tableau se charge mais toujours aucune données à l'horizon. Tu vois un problème quelconque? Et pourquoi l'exemple fait le choix d'utiliser des variables quand toi tu déclares un nouveau tableau?

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
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
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
	'Ext.util.*',
    'Ext.state.*'
 
]);
 
Ext.onReady(function() {
 
      Ext.define('model', {    
    extend: 'Ext.data.Model',
    fields: [{name: 'CHAMP1'},{name: 'CHAMP2'},{name: 'CHAMP3'}]
});
 
 
 
    // create the data store
    var store = Ext.create('Ext.data.Store', {
	model : model,
 
       proxy: {
        type: 'ajax',
        url: ' creationjson.php',		
        reader:{
            type: 'json',
			}
		}
    });
 
    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
 
        columns: [
            {
                text     : 'CHAMP1',              
                dataIndex: 'CHAMP1'
            },
            {
                text     : 'champ2',
                dataIndex: 'CHAMP2'
            },
            {
                text     : 'champ3',           
                dataIndex: 'CHAMP3'
            }
        ],
        height: 350,
        width: 600,
        title: 'tableau',
        renderTo: 'tableauordre'
 
    });
});

**JulienFio** · 10/06/2011, 08h51

Essayes comme ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
   // create the data store
    var store = Ext.create('Ext.data.Store', {
	model : model,
 
       proxy: {
        type: 'ajax',
        url: ' creationjson.php',		
        reader:{
            type: 'json',
            root: 'records' // Il te manquait cette partie
			}
		}
    });

Attention aussi aux virgules en trop, dans ton store tu avais laissé la virgule

Code :

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

 type: 'json',

or pour le dernier paramètre on ne mets pas la virgule.

(Pas d'erreur dans les logs ou via firebug ?)

Envoyé par renardchan

Et pourquoi l'exemple fait le choix d'utiliser des variables quand toi tu déclares un nouveau tableau?

Je ne vois pas ce que tu veux dire

**sekaijin** · 14/06/2011, 10h49

pour ton php :

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
26
27
28
29
<?php
  require_once("../Connect.php");
  $data = null;
  try{
    $requete = "SELECT ...'";
 
    $resultat = odbc_exec($connexion,$requete);
 
    $data = array()
 
    while ($rows = odbc_fetch_object($resultat)) {
      array_push($data, get_object_vars($rows));
    }
    $response = array(
        'success' => true,
        'count' =>count($data),
        'rows'=> $data
    );
 
  }  catch (Exception $e) {
      // logger l'exception dans le journal 'Exception reçue : ',  $e->getMessage(), "\n";
    $response = array(
        'success' => false,
        'error' => 'Impossible d'accéder au données.',
        'count' =>0,
        'rows'=> null
    );
  }
  echo utf8_encode(json_encode($response));

et c'est tout le flux qui doit être en utf8 pas seulement les données

A+JYT

**kenny.kev** · 15/06/2011, 00h34

Envoyé par DonMero

Je viens de voir que vous étiez sur la version 4 alors que je bosse en 3.3 donc autant pour moi. Je n'ai pas encore essayer cette version mais je ne savais pas qu'ils avaient modifié la façon de faire. Bon courage en tout cas

Petite remarque pour DonMero, tu peux faire la meme chose avec la v2 et 3. Il est même conseiller ce qui te fait moins de déclaration a faire du js.
Je vais essayer d'être plus clair. Par défaut tu as à présenter des données d'une certaine façon comme celle-ci : (c'est une représentation php pour que se soit plus lisible)

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
26
27
28
29
30
31
32
33
34
35
36
 
json_encode(array(    'metaData' => array(
                    'totalProperty' => 'total',
                    'root' => 'records',
                    'id' => 'id',
                    'fields' => array(
                        array('name' => 'id', 'type' => 'int'),
                        array('name' => 'idOpe', 'type' => 'int'),
                        array('name' => 'title', 'type' => 'string'),
                        array('name' => 'mail', 'type' => 'string'),
                        array('name' => 'open', 'type' => 'date'),
                        array('name' => 'close', 'type' => 'date'),
                        array('name' => 'solde', 'type' => 'float')
                    )
                ),
                'records' => array(
                    array(
                    'id' => '1',
                    'idOpe' => '10',
                    'title' =>  'f452sdf',
                    'mail' => '<a href="mailto:falalanne.extia@tf1.fr">example@example.fr</a>',
                    'open' => date('m d Y', time()),
                    'close' => date('m d Y', time() + 50000000),
                    'solde' => '10'
                    ),
                    array(
                    'id' => '1',
                    'idOpe' => '11',
                    'title' =>  'f452sdf',
                    'mail' => '<a href="mailto:falalanne.extia@tf1.fr">example2@example</a><a href="mailto:flalanne.extia@gmail.com">.com</a>',
                    'open' => date('m d Y', time()),
                    'close' => date('m d Y', time() + 50000000),
                    'solde' => '10'
                    )
                ),
                'total' => 2));

Ce qui donne dans ton store :

Code :

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

1
2
3
4
5
6
new Ext.data.JsonStore({
    url: '/src/scripts/getService.php',
    totalProperty: 'total',
    root: 'records',
    remoteSort: true
});

Avec ça tu es sur que tout fonctionnera du premier coût.

**renardchan** · 17/06/2011, 12h47

Bonjour,

Je ne suis pas très familié avec Firebug. Jusqu'à maintenant, je ne l'utilisais que pour le HTML et CSS.

Dans le menu DOM, j'ai notamment la fonction suivante

Model
proxy
reader
root ==> ""

Root me renvoie donc vide. Si root renvoie vide c'est donc que le json n'est pas lu. Y a t-il un moyen de vérifier la connexion ajax au php? Voir ce qui est interprété ou non?

Dans mon cas d'essai, mon fichier php renvoi le json par un echo. A aucun moment j'utilise une connexion a une BDD : est-ce que la connexion à une bdd est un préalable (je suis ici qu'en lecture) ?

Merci.

**kenny.kev** · 17/06/2011, 21h02

Bonjour,

Pour savoir si tu as bien un retour, il faut que tu active l'onglet console de firebug. Tu rafrechit ta page et refait ton appelle.
Tu vas voir apparaître un appelle AJAX tu le déplie et en tu regarde dans réponse.
Si tu as pas de réponse c'est que tu as un problème.

Mon exemple fonctionne base toi dessus. C'est le fonctionne part défaut d'extjs. Je te conseil d'essayer de le faire fonctionné avec cette méthode.

Cordialement,
kevin

**sekaijin** · 18/06/2011, 11h02

de façon plus générale quelque soit ton outil de travail
ouvre dans ton navigateur les url de tes appel ajax
tu dois voir le flux json s'afficher

tant que tu n'as pas ça ton code ne peut être validé.

A+JYT

**renardchan** · 21/06/2011, 13h08

Merci à tous j'ai enfin pu résoudre mon problème.
Il m'a fallut ajouter la ligne

autoLoad : true

pour que mon creationjson.php soit débuggé par firebug. J'ai ainsi pu identifier une erreur dans ce dernier fichier.

mon store devient ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    var userstore = new Ext.data.Store({
      model:'User',
	  proxy: {
		type : 'ajax',
		url: 'creationjson.php',
		reader: {
			type:'json',
			root:'records'		
		}
	   },
		autoLoad : true
 
    });

**kenny.kev** · 21/06/2011, 16h51

Le "autoLoad: true" est a utiliser si tu dois le charger au lancement de ton appli. Dans le cas contraire je te conseil de faire un appelle dans ce genre :

Code :

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

MonStore.load();

lire un tableau json pour créer un grid (extjs 4)

Ext JS / Sencha

Discussions similaires

Partager

Partager