7. Ext JS Tutoral - Advanced Grid

Last updated Apr 12th, 2019 | Page history | Improve this page | Report an issue

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.

Backers

Budget

$306 per month—let's make that $500!

Learn more

Ext JS can save us time by handling formatting of tables. But an Ext JS Grid is more than a simple table: they can include sortable columns and they can paginate long result sets or let the users select rows. Ext JS Grids do a lot of stuff that a basic HTML table does not. So how do we make one?

An Ext JS Grid typically needs 2 pages:

A page to display the grid (this is the obvious page you were already thinking of)
A dynamic PHP page to query the data that populates the table (called a "store")

The Grid Page¶

This can be a simple HTML page. In our example here, we're putting this alongside the MODX index.php in your docroot. Just like all the examples before, we include the Ext JS CSS and Javascript.

<html>
    <title>Ext JS Paging Grid</title>
    <link  rel="stylesheet" type="text/css" href="manager/assets/ext3/resources/css/ext-all.css" />
    <script type="text/javascript" src="manager/assets/ext3/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="manager/assets/ext3/ext-all.js"></script>
    <script type="text/javascript">

Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'results',
        totalProperty: 'total',
        idProperty: 'id',
        remoteSort: true,

        // Define the fields you wish to display
        fields: [
            'pagetitle',
            'alias',
            {name: 'createdby', type: 'int'}
        ],

        // Use HttpProxy for local stores, ScriptTagProxy for remote stores
        proxy: new Ext.data.HttpProxy({
            url: 'store.php'
        })
    });
    store.setDefaultSort('id', 'ASC');


    var grid = new Ext.grid.GridPanel({
        width:700,
        height:500,
        title:'MODExt - Browse Pages',
        store: store,
        trackMouseOver:true,  // will highlight rows on hover
        disableSelection:true, // will allow you to select row(s)
        loadMask: true,  // will generate a spinner icon

        // grid columns
        columns:[{
            header: "Page Title",
            dataIndex: 'pagetitle',
            width: 420,
            sortable: true
        },{
            header: "Alias",
            dataIndex: 'alias',
            width: 100,
            sortable: true
        },{
            header: "Author",
            dataIndex: 'createdby',
            width: 80,
            align: 'right',
            sortable: true
        }],

        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying Records {0} - {1} of {2}',
            emptyMsg: "No Records to display"
        })
    });

    // render it
    grid.render('topic-grid');

    // trigger the data store load
    // NOTE: the parameter names here correspond to keys in $_POST
    store.load({params:{start:0, limit:25}});
});
    </script>

    <body>
        <h1>Advanced Grid</h1>
        <div id="topic-grid"></div>
    </body>
</html>

The Store¶

This is a PHP file or a Snippet – here we're putting this alongside your MODX index.php file, so we have to add a few extra lines to gain access to the $modx object. Normally this code would be in a Snippet or in a CMP, so you'd already have access to the $modx object.

<?php
// -- start the little hack -------------------
// This would not be necessary if this code were
// inside a Snippet or the MODX mgr! Demo purposes only!
define('MODX_API_MODE', true);
require_once 'index.php';
$modx= new modX();
$modx->initialize('mgr');
// -- end the little hack ---------------------

// Get parameters sent here from the Grid controls
// The limit and start parameters are configurable,
// but the sort and dir are less so (?)
$limit = (int) $modx->getOption('limit',$_POST,10);
$start = (int) $modx->getOption('start',$_POST,0);
$sort = $modx->getOption('sort',$_POST,'id');
$dir = $modx->getOption('dir',$_POST,'ASC');

$criteria = $modx->newQuery('modResource');
$total_pages = $modx->getCount('modResource',$criteria);
$criteria->limit($limit, $start);
$criteria->sortby($sort,$dir);
$pages = $modx->getCollection('modResource',$criteria);

// Init our array
$data = array(
    'results'=>array(),
    'total' => $total_pages,
);
foreach ($pages as $p) {
    $data['results'][] = $p->toArray();
}
// Use the log for debugging Ajax
$modx->log(1,print_r($_POST,true));
print json_encode($data);

/*EOF*/

You can view the store.php in a browser and you should see some JSON data. If you're trying to see what's being posted to this file from the grid page, use the MODX log function to log the posted data.

7. Ext JS Tutoral - Advanced Grid

The Grid Page¶

The Store¶

See Also¶