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.
[codesyntax lang=”php”]
<?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 } ?>
[/codesyntax]
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.