Practise dojox.grid.DataGrid with Zend_Dojo

Zend_Dojo was released together with Zend Framework 1.6 as well as Dojo toolkit package. We can make a good experience of the client-side with powerful Dojo components through a simple API provided by Zend_Dojo.

 

I had tried one very simple example of dojox.grid.DataGrid using Zend_Dojo and Zend_Dojo_Data few days ago.

 

You can place the example below within any view because GoogleAPI CDN for dojo is used.

 

<?php
// index.phtml or any other view

// Testing data (should be from database)
$this->posts = array(
    '1' => array(
        'postId' => 'id_1',
        'postTitle' => 'title_1',
        'postDetail' => 'detail_1',
    ),
    '2' => array(
        'postId' => 'id_2',
        'postTitle' => 'title_2',
        'postDetail' => 'detail_2',
    ),
    '3' => array(
        'postId' => 'id_3',
        'postTitle' => 'title_3',
        'postDetail' => 'detail_3',
    ),
    '4' => array(
        'postId' => 'id_4',
        'postTitle' => 'title_4',
        'postDetail' => 'detail_4',
    ),
    '5' => array(
        'postId' => 'id_5',
        'postTitle' => 'title_5',
        'postDetail' => 'detail_5',
    ),
    '6' => array(
        'postId' => 'id_6',
        'postTitle' => 'title_6',
        'postDetail' => 'detail_6',
    ),
);

// Zend_Dojo_View_Helper_Dojo
if (isset($this->posts)) {

    // Google Api CDN path
    $cdnPath = 'http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/';

    $this->dojo()
         ->enable()

         // We use CDN version 1.3.1
         ->setCdnVersion('1.3.1')

         // Basic configs
         ->setDjConfigOption('parseOnLoad', true)
         ->setDjConfigOption('isDebug', false)
         ->setDjConfigOption('locale', 'zh')

         // Import some css
         ->registerDojoStylesheet(true)
         ->addStylesheet($cdnPath . 'dojox/grid/resources/Grid.css')
         ->addStylesheet($cdnPath . 'dojox/grid/resources/tundraGrid.css')
         ->addStylesheet($cdnPath . 'dijit/themes/tundra/tundra.css')

         // Include some dojo modules
         ->requireModule('dijit.dijit')
         ->requireModule('dojox.grid.DataGrid')
         ->requireModule('dojo.data.ItemFileWriteStore')
         ->requireModule('dojo.parser')
         ;

    // Echo Dojo (in layout as you like)
    echo $this->dojo();

    // Use Zend_Dojo_Data to build dojo data (in fact it's a json data)
    $data = new Zend_Dojo_Data();
    $data->setIdentifier('postId')
         ->setLabel('My post list')
         ->addItems($this->posts);

    //var_dump($data);
?>

    <script type="text/javascript">
        // Dojo addOnLoad loaded on demand
        dojo.addOnLoad(function() {
            // Grid layout
            var gridLayout = [[
                {name: 'Post',      field: 'postId',        width: "50px"},
                {name: 'Title',     field: 'postTitle',     width: "200px"},
                {name: 'Detail',    field: 'postDetail',    width: "400px"}
            ]];

            // Debug - setDjConfigOption('isDebug', true)
            //console.log('<?php echo $data; ?>');

            // Use ItemFileWriteStore to store data
            var test_store = new dojo.data.ItemFileWriteStore({data: <?php echo $data; ?>});

            // Set layout and set store
            gridNode.setStructure(gridLayout);
            gridNode.setStore(test_store);
        });
    </script>

    <div jsId="gridNode" dojoType="dojox.grid.DataGrid" rowsPerPage="10"
        style="width:675px; height:400px;"></div>

<?php
}
?>

 

 

Simple and powerful, isn’t it? It can be easily extended to be a powerful data grid. Please see Dojo Api and Dojo 1.3 manual for more details.

Posted in Zend Framework | Tagged , | Leave a comment