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

Version imprimable

31/05/2011, 16h44
renardchan

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

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,

Bonjour,

Cela se fait en 3 étapes:

en prenant comme exemple ce JSON ci:

Code:

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:

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:

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:

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
    }],
...

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

lorsque tu dis

Citation:

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:

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:

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:

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,

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

Salut,

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

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
 
<?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:

[{"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"}]

06/06/2011, 17h45
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
07/06/2011, 10h16
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 ;)

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:

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

par rapport à

Code:

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

que j'utilise.

Mon fichier 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
 
 
<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:

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:

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 :

Citation:

{"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.

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:

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:

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

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:

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'
 
    });
});

Essayes comme ça:
Code:

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:

type: 'json',

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

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

Citation:

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

pour ton php :

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
<?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

Citation:

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:

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:

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.

17/06/2011, 12h47
renardchan

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.
17/06/2011, 21h02
kenny.kev

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
18/06/2011, 11h02
sekaijin

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

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

Citation:

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:

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 });

21/06/2011, 16h51
kenny.kev

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:

MonStore.load();