In honor of Version 1.0.4 of the WP-ExtJS Plugin being committed this morning, I decided to post a new example. This example shows the powerful pivot grid capabilities in the latest version of ExtJS from Sencha.

Grab the Plugin from WordPress.org

Please note that you must upgrade to the latest version of ExtJS – Currently 3.3.1.

Pivot Grid Example

This example shows how to create a Pivot Grid backed by an Ext.data.Store.

In this example we are reading a set of 300 records from the server and then pivoting them around Person and Product (on the left axis)
and City and Year (on the top axis). The data are combined automatically, in this case breaking down sales by product and person
over time.

Here’s the Code

Here’s a link to the JSON data used to fill the grid example.

/*!
 * Ext JS Library 3.3.1
 * Copyright(c) 2006-2010 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */
Ext.onReady(function() {
    var SaleRecord = Ext.data.Record.create([
        {name: 'person',   type: 'string'},
        {name: 'product',  type: 'string'},
        {name: 'city',     type: 'string'},
        {name: 'state',    type: 'string'},
        {name: 'month',    type: 'int'},
        {name: 'quarter',  type: 'int'},
        {name: 'year',     type: 'int'},
        {name: 'quantity', type: 'int'},
        {name: 'value',    type: 'int'}
    ]);

    var myStore = new Ext.data.Store({
        url: 'simple.json',
        autoLoad: true,
        reader: new Ext.data.JsonReader({
            root: 'rows',
            idProperty: 'id'
        }, SaleRecord)
    });

    var pivotGrid = new Ext.grid.PivotGrid({
        title     : 'PivotGrid example',
        width     : 800,
        height    : 259,
        renderTo  : 'docbody',
        store     : myStore,
        aggregator: 'sum',
        measure   : 'value',

        viewConfig: {
            title: 'Sales Performance'
        },

        leftAxis: [
            {
                width: 80,
                dataIndex: 'person'
            },
            {
                width: 90,
                dataIndex: 'product'
            }
        ],

        topAxis: [
            {
                dataIndex: 'year'
            },
            {
                dataIndex: 'city'
            }
        ]
    });
});

Related posts:

1. WP-ExtJS ExtJS Examples using the WordPress ExtJS Plugin
2. WordPress Extjs – Displaying Posts in an ExtJS Grid
3. WP-ExtJS Chart Example
4. Publish ExtJS Snippets inside WordPress Pages or Posts