Login Register

Add dojo.grid.DataGrid in Zend form (-> Zend_Dojo_Form)

Hi

i just started with Zend and now i play around with the Quickstart application, which i want to adapt to my needs.

I'm working with dojo and want to include a datagrid in my phtml.
Using javascript, it works.

( I add the following to my layout.phtml:

 
    
        dojo.require("dojo.parser");
            dojo.require("dojox.grid.DataGrid");
        
        dojo.require("dojox.data.JsonRestStore");
        
        
        var peopleData =  "id,lastname,age\n" +
                        "1, Doe, 21\n" +
                        "2, Doe, 22\n" +
                        "3, Smith, 43\n" +
                        "4, Smith, 49\n" +
                        "5, Zu, 23\n" +
                        "6, Kagetsume, 23\n"+
                        "7, Tsuguri, 18\n" +
                        "8, Reisender, 25\n";
    
        
        var Service = function(query, queryOptions) {
            return dojo.xhrGet({url:"http://localhost/Zend2/data.php", handleAs:"json" });     
            }
         Service.post = function(id, value) {
            return dojo.xhrGet({url:"http://localhost/Zend2/data.php", content:{method:"create", id:id, value:value}});     }
            
        var store4 = new dojox.data.JsonRestStore({target: "data.php", 
            service:Service, syncMode:true, loadLazyValues:false, idAttribute:"id"});
        
    
        dojo.addOnLoad(
        
            function() {
                // set the layout structure:
                var layout4 = [
                    [
                      { field: "id", name: "ID", width: 20 },
                      { field: "lastname", name: "Last Name", width: 20 },
                      { field: "age", name: "Age", width: 10 }
                    ]
                  ];
                    
                var layout3 = [
                    [
                      { field: "id", name: "ID", width: 20 }
                    ]
                  ];
        
                // create a new grid:
                var grid4 = new dojox.grid.DataGrid({
                    query: { id: '*' },
                    store: store4,
                    clientSort: true,
                    rowSelector: '20px',
                    structure: layout4
                }, document.createElement('div'));
        
                // append the new grid to the div "gridContainer4":
                dojo.byId("gridContainer4").appendChild(grid4.domNode);
        
                // Call startup, in order to render the grid:
                grid4.startup();
                
           });

        

With

the grid is displayed and all is OK.)

Now i want to display the grid using the Zend conventions.
That means:

I want to extend Zend_Dojo_Form and add code similar to the following:

class Form_GuestBook extends Zend_Dojo_Form
{

public function __construct($options = null){
        
        parent::__construct($options);
        $this->setName('bla');
        $this->setAttrib('enctype', 'multipart/form-data');
    
        
        $this->addElement(

                  'ComboBox',
                  'comboboxselect',
                  array(
                        'label' => 'ComboBox (select)',
                        'value' => 'blue',
                        'autocomplete' => false,
                        'multiOptions' => array(
                              'red'    => 'Rouge',
                              'blue'   => 'Bleu',
                              'white'  => 'Blanc',
                              'orange' => 'Orange',
                              'black'  => 'Noir',
                              'green'  => 'Vert',
                        )));

               $this->addElement(
                'dojox.grid.DataGrid',
                  'gridContainer4',
                 array(
                      'style' => 'width: 400px; height: 200px;',
                    'query' => '{ id: '*' }',                    
                        'store' => 'store4',
              'clientSort' => 'true',
                    'rowSelector' => '20px',
                    'structure' => 'layout4'
                     ));
     
       

}
}

The combo is displayed, but when trying to add the grid, an error is raised (of course, because i only guessed)
How can i add the grid programmatically to the view?

Thanks in advance