Integration extJs 4 dans sf 1.4
Je voudrais afficher les donnees de ma table Secteur qui possede deux champs; idsecteur et secteur dans une datagrid style extjs.
Pour ce faire, j'ai decompresser l'archive extjs dans le dossier web/js de symfony.
Dans le fichier view de l'application frontend, j'ai ajouter les lignes :
Le contenu du fichier app.js :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 stylesheets: - ../js/extjs/resources/css/ext-all.css javascripts: - extjs/ext-all.js - grid.js - app.js
Le contenu du fichier grid.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 // when document is ready Ext.onReady(function() { Ext.QuickTips.init(); // create my custom grid component var grid = new App.country.Grid({ store: store, // data store for grid columns : columns, //columns configuration plugins: [filters], // additional plugin - Grid Filter Plugin bbar: new Ext.PagingToolbar({ //bottom bar configuration pageSize: 15, // records per page store: store, displayInfo: true }) }); // simple window for grid var win = new Ext.Window({ title: 'Advanced data filtering with Grid Filter Plugin', height: 410, width: 800, layout: 'fit', items: grid // just one item }); win.show(); // display window with grid });
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 // Typical data Store automatically configured with a Ext.data.JsonReader. var store = new Ext.data.JsonStore({ // store configs url: 'Secteurs/list', // url for retreiving data autoLoad: true, // reader configs totalProperty: 'total', successProperty: 'success', // response status name idProperty: 'idsecteur', root: 'data', fields: ['idsecteur', 'secteur'] }); // Columns configuration var columns = [ {header: "ID", width: 50, fixed: true, sortable: true, dataIndex: 'idsecteur'}, {header: "Secteur", width: 100, sortable: true, dataIndex: 'secteur' } ]; Ext.ns('App', 'App.country'); // my custom grid component App.country.Grid = Ext.extend(Ext.grid.GridPanel, { initComponent : function() { // typical viewConfig this.viewConfig = { forceFit: true, emptyText: 'No data found.' }; App.country.Grid.superclass.initComponent.call(this); } });
Dans le module Secteur, fichier actions.class.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
30
31
32
33
34
35
36
37
38
39
40 public function executeList(sfWebRequest $request) { # data retrieved from the request $limit = $request->getParameter('limit', 15); $page = ($request->getParameter('start', 0)/$limit)+1; $dir = $request->getParameter('dir', 'ASC'); $column = strtolower($request->getParameter('sort', 'name')); # create query object $query = Doctrine_Query::create() ->from('secteur c'); # conditions for sorting if (Doctrine::getTable('Secteur')->hasColumn($column)) { $query->orderBy(sprintf('c.%s %s', Doctrine::getTable('secteur')->getFieldName($column), $dir)); } # object responsible for paging $pager = new sfDoctrinePager('secteur', $limit); $pager->setQuery($query); $pager->setPage($page); $pager->init(); $result = array(); # format result array foreach($pager->getResults() as $secteur) { $result[] = $secteur->toArray(); } # formatted data are returned to the grid return $this->renderText(json_encode(array( 'success' => true, 'total' => $pager->getNbResults(), 'data' => $result ))); }
Mon probleme, je n'arrive pas à afficher les données dans le datagrdi.
Mon fichier listSuccess.php affiche :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 {"success":true,"total":39,"data":[{"idsecteur":"118","secteur":"Achats"},{"idsecteur":"119","secteur":"Administratif \/ Secr\u00e9tariat"},{"idsecteur":"120","secteur":"Agriculture \/ Agronomie"},{"idsecteur":"132","secteur":"Droit \/ Fiscalit\u00e9"}]}
Partager