Integration du datagrid de extJs4
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:
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:
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:
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:
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:
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"}]} |
