7. Ext JS Tutoral - Advanced Grid

Last updated Oct 11th, 2026 | 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

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

Learn more

An Ext JS Grid handles table formatting, sortable columns, pagination and row selection — beyond a basic HTML table. It needs two pages:

The page that displays the grid
A dynamic PHP page that queries the data for the store

The Grid Page¶

A simple HTML page. This example sits alongside the MODX index.php in the docroot. As in the earlier tutorials, 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, // disables row selection
        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¶

A PHP file or a Snippet — here it sits alongside the MODX index.php, so a few extra lines bootstrap the $modx object. In a Snippet or a CMP you would already have 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*/

Open store.php in a browser: you should see JSON data. To see what the grid page posts to it, use the MODX log function to log the posted data.

7. Ext JS Tutoral - Advanced Grid

The Grid Page¶

The Store¶

See Also¶