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 :

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 app.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
 
 	});
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
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"}]}