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 phpExcel library is installed)
• Exports PDF. (if sfDomPDFPlugin plugin is installed)

Demo

Visit our site and try a live demo here. You can also download the live demo source in our site.

Screenshot

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 Ext JS
  2. Uncompress on js directory (ex: <my_project>/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 www.laigu.net

In your action <my_project>/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 <my_project>/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 <my_project>/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 <my_project>/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.