Display raw data matrix in extJS (without data store)

Question

in order to saved bandwidth and lines of code, I have a web services of the kind:

GET /users

[return json data]

{
    "headers": ["Joined", "username", "Age"],
    "data": [["2011-01-01", "alice", 22],["2011-01-01", "bob", 22]] 
}

How to display this object in a grid/table using extJS?

username  Joined      Age
alice     2011-01-01  22
bob       2011-01-01  22

Note: I wish not to use a data store/model object in extJS (and have to define fields etc), just display the matrix as-given by the server

thanks//David

Eric Eric · Accepted Answer · 2012-09-10T13:45:52

If you want to display your data using Ext.grid.Panel then you have to use a store. Period. You don't necessarily have to create a model if you define the fields directly on the store declaration, but you still need the store.

If you want to display your data using a generic HTML table, you can use Ext.XTemplate to do so. It would look something like this (example code):

var matrixTpl = new Ext.XTemplate(
    '<table>',
        '<tr>',
            '<tpl for="headers">',
                '<td>{.}</td>',
            '</tpl>,
        '</tr>',
        '<tpl for="data">',
            '<tr>',
                '<tpl for=".">',
                    '<td>{.}</td>',
                '</tpl>',
            '</tr>',
        '</tpl>',
    '</table>',
    {disableFormats: true}
);

You can modify the look and styles by using the template, but this will let you use a regular JavaScript object to generate your table.

Display raw data matrix in extJS (without data store)

1 Answers