WP-ExtJS Version 1.0.4 – ExtJS Pivot Grid Example

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


[wp-extjs snippet_id=”1281″ height=325]


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'

One Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s