# laiguExtGrid plugin # ## Overview ## The laiguExtGridPlugin is a symfony plugin that provides an easy way to integrate Ext JS Grid. ExtJS Grid requests data using ExtJS JSON store transparently. laiguExtGridPlugin provides an easy way to connect our model with a grid. Furthermore all data showed in the grid can be printed or exported in CVS, Excel and PDF format. ## Features ## * Ajax JSON requests. * Remote paginating. * Remote sorting. * Remote grouping. * Doctrine/Propel support. * Print function report. * Exports CVS format. * Exports Excel format. (if <a href="http://www.codeplex.com/PHPExcel" target="_blank">phpExcel</a> library is installed) * Exports PDF. (if <a href="http://www.symfony-project.org/plugins/sfDomPDFPlugin" target="_blank">sfDomPDFPlugin</a> plugin is installed) ## Demo ## Visit our site and try a live demo <a href="http://www.laigu.net/recursos-lliures/symfony-plugins/plugin-symfony-laiguextgridplugin" target="_blank">here</a>. You can also download the live demo source in our site. ## Screenshot ## ![Screenshot](http://www.laigu.net/wp-content/uploads/2010/01/laiguExtGridPlugin_test1.jpg) ## Installation ## Install plugin: $ symfony plugin-install http://plugins.symfony-project.com/laiguExtGridPlugin --stability=beta ## Configuration ## * Enable the plugin `laiguExtGridPlugin` on a project, via /config/ProjectConfiguration.class.php: class ProjectConfiguration extends sfProjectConfiguration { public function setup() { $this->enablePlugins('sfDoctrinePlugin', 'laiguExtGridPlugin'); // for Propel (comment previous line and uncomment next line) //$this->enablePlugins('sfPropelPlugin', 'laiguExtGridPlugin'); } } * Enable the plugin `laiguExtGrid` module on an application/environment base, via the `enabled_modules` setting of the `settings.yml` file. For instance, to enable the module for the `frontend` application, open the `<my_project>/apps/frontend/config/settings.yml` and add under the `all` key: all: .settings: enabled_modules: [default, laiguExtGrid] * Download and install Ext JS 1. Download <a href="http://www.extjs.com/products/extjs/download.php?dl=extjs310" target="_blank">Ext JS</a> 2. Uncompress on js directory (ex: &lt;my_project&gt;/web/js/extjs/) * Configure css and javascript on your application: For the `frontend` application, open the `<my_project>/apps/frontend/config/view.yml` and add: stylesheets: [main.css, /js/extjs/resources/css/ext-all.css] javascripts: [extjs/adapter/ext/ext-base.js, extjs/ext-all.js] * Clear the cache $ symfony cc ## How to use plugin? ## ### Example test1 of our demo ### * Remember that you can download sources of a functional project at our site <a href="http://www.laigu.net/recursos-lliures/symfony-plugins/plugin-symfony-laiguextgridplugin" target="_blank">www.laigu.net</a> In your action &lt;my_project&gt;/apps/frontend/modules/test1/actions/actions.class.php: public function executeIndex(sfWebRequest $request) { // Grid $this->grid = new laiguExtGridDoctrine(); // for Propel (comment previous line and uncomment next line) //$this->grid = new laiguExtGridPropel(); $this->grid->setJsonStoreFields(array( "{name: 'zip', mapping: 'zip'}", "{name: 'town', mapping: 'town'}", "{name: 'state', mapping: 'state'}", "{name: 'country', mapping: 'country'}", )); $this->grid->setDefaultSort("town", "asc"); // to enable default grouping //$this->grid->setDefaultGroup("state"); $this->grid->setGridParameter("height", "400"); $this->grid->setGridParameter("width", "600"); $this->grid->setGridParameter("view", "new Ext.grid.GroupingView({ forceFit:true, groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? \"Items\" : \"Item\"]})' })"); $this->grid->setGridColumns(array( array("header"=>"'Zip code'", "width"=>"80", "sortable"=>"true", "dataIndex"=>"'zip'"), array("header"=>"'Town'", "width"=>"300", "sortable"=>"true", "dataIndex"=>"'town'"), array("header"=>"'State'", "width"=>"80", "sortable"=>"true", "dataIndex"=>"'state'"), array("header"=>"'Country'", "width"=>"80", "sortable"=>"true", "dataIndex"=>"'country'"), )); $this->grid->setDoctrine("Town", "listJson"); // for Propel (comment previous line and uncomment next line) //$this->grid->setPeerMethod("Town", "listJson"); $this->grid->setPagingLimit(50); // optional for autorendering the grid //$this->grid->autoLoadData(); } In your action template &lt;my_project&gt;/apps/frontend/modules/test1/templates/indexSuccess.php: <div style="margin: 10px;"> <?php echo $sf_data->getRaw("grid")->render() ?> </div> <a href="#" onclick="<?php echo $grid->getJsLoadDataFunction() ?>(); return false;">Click here to load data</a> **Doctrine**: In your model &lt;my_project&gt;/lib/model/doctrine/TownTable.class.php: public function listJson($params) { $query = Doctrine_Query::create()->from('Town t'); return laiguExtGridDoctrine::listJson($query, $params); } **Propel**: In your model &lt;my_project&gt;/lib/model/TownPeer.php: public static function listJson($params) { $criteria = new Criteria(); return laiguExtGridPropel::listJson($params, "Town", $criteria); } ## API documentation ## You can found API documentation in the source files: /plugins/laiguExtGridPlugin/doc/api/index.html ## Contact ## * Jordi Llonch ( jordi [at] laigu [dot] net ), [http://www.laigu.net] ## TODO ## * Create more examples: * No pagination. * Export to csv * Export to excel. * Export to pdf * ... * i18n support. ## Changelog ## ### 2010-02-21 | 0.3.0 Beta ### * Added grouping view. ### 2010-02-09 | 0.2.0 Beta ### * Bug fixes. * Propel support. ### 2010-01-25 | 0.1.0 Beta ### * First public release.