Discussion :

[phpestpuissant]

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

[kenny.kev]

Pour infos tu as un plugin ExtDirectPlugin pour symfony.

Tu dois activer ExtDirect aussi du coté Extjs.

Le plugin symfony te gère l'entrée et la sortie de symfony donc tu n'as plus besoin d'utiliser les template.

Voila bon courage.

[phpestpuissant]

Merci, je teste le plugin

[kenny.kev]

Tu vas gagner énormément de temps en utilisant ce plugin.

N'hésite pas si tu as un problème d'utilisation du plugin. Par ailleurs, j'ai fait une évolution sur ce plugin car il y a un comportement bizarre avec un formulaire à 1 valeur (uniquement pour extjs 4 pas de soucis pour la v3).