ZendFramework2 on ExtJS Grid Example (how to send json output correctly in zf2)

Question

Firstly, sorry for my not very good english.

Problem: I am trying to run extJS grid example using zf2. I am using this example.

What I need to do:

1. make array of objects in php
2. json_encode(this array)
3. accept json data in extjs script easy! but I had problem.

How correctly send json data in zend framework2? In example there was 'data.php' file where json output was created and outputed. How to make same in zf2?

I tried next steps. I created new action in Controller jsonAction() with this content:

public function jsonAction()
{
    $view = new ViewModel();
    $view->setTerminal(true); // turn off layout

    $arr = array();

    // creating data array to encode
    $arr[] = new Student('Vlad', 'Sharikov');
    $arr[] = new Student('Alina', 'Zaja');
    $arr[] = new Student('Kam', 'Nurm');
    $arr[] = new Student('Seva', 'Paren');
    $arr[] = new Student('Dima', 'Glush');

    //json output
    echo '({"total":"'.count($arr).'","results":'.json_encode($arr).'})';

    return $view; 
}

View json.phtml is empty:

So, json output is available here: zf2/grid/json (zf2 is localhost domain)

Json output:

({"total":"5","results":[{"firstname":"Vlad","lastname":"Sharikov"},{"firstname":"Alina","lastname":"Zaja"},{"firstname":"Kam","lastname":"Nurm"},{"firstname":"Seva","lastname":"Paren"},{"firstname":"Dima","lastname":"Glush"}]})

Now I need to configure extjs script.

Ext.onReady (function () {
// create the data store
var store = new Ext.data.SimpleStore({
    totalProperty: 'total', // total data, see json output
    root: 'results',    // see json output
    url: 'http://zf2/grid/json',
    fields: [
        {name: 'firstname'},
        {name: 'lastname'}
    ]
});

// load data

store.loadData({params:{start: 0, limit: 5}});

// create the grid
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {header: 'Firstame', width: 200, dataIndex: 'firstname'},
        {header: 'Lastname', width: 200, dataIndex: 'lastname'}
    ],
    stripeRows: true,
    height:180,
    width:450,
    title:'I504 group',
    bbar: new Ext.PagingToolbar({
        pageSize: 5,
        store: store,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display"
    })
   });

// render grid to the grid-example element (see p array-grid.html)
grid.render('grid-example');        
});

There are url-field in 6 row. What I have to put there to make grid draws correctly? thats the question.

Or may be I am not right with my assumption that json should be created like I did (make controller etc). Sure, I am newbie. So suggest correctly way to do this, please.

Answer 1

Problem solved. Thank you!

Firstly, creating store:

var store = new Ext.data.JsonStore({
    totalProperty: 'total', // total data, see json output
    root: 'results',    // see json output
    url: './json',
    fields: [
        'firstname', 'lastname'
    ]
});

1) JsonStore, not SimpleStore; 2) fields : 'firstname', 'lastname' is engouht (not need {...})

Secondly, Not!: store.loadData({params:{start: 0, limit: 5}}); This one is ok: store.load({params:{start: 0, limit: 5}});

Answer 2

Seems that you got it working, however, if you're interested in doing things a more ZF2 way, you can do the following:

1) Add ViewJsonStrategy to your view_manager config module.config.php:

<?php
'view_manager' => array(
     // ...
    'strategies' => array(
        'ViewJsonStrategy',
    )
),

2) In your controller, just construct the structure you want, and return a JsonModel:

<?php
namespace Application\Controller;

use Zend\View\Model\JsonModel;

class SomeController {

    public function someAction(){
        $arr = array();

        // creating data array to encode
        $arr[] = new Student('Vlad', 'Sharikov');
        $arr[] = new Student('Alina', 'Zaja');
        $arr[] = new Student('Kam', 'Nurm');
        $arr[] = new Student('Seva', 'Paren');
        $arr[] = new Student('Dima', 'Glush');

        return new JsonModel(array('total'=>count($arr), 'results' => $arr));

    }
}