Using the Ext JS PivotGrid



A simple example


Let’s see how we create this PivotGrid:

var SaleRecord =[

var myStore = new{
    url: 'salesdata.json',
    autoLoad: true,
    reader: new{
        root: 'rows',
        idProperty: 'id'
    }, SaleRecord)

var pivotGrid = new Ext.grid.PivotGrid({
    title     : 'Sales Performance',
    store     : myStore,
    aggregator: 'sum',
    measure   : 'value',
    leftAxis: [
        {dataIndex: 'person',  width: 80},
        {dataIndex: 'product', width: 90}
    topAxis: [
        {dataIndex: 'year'},
        {dataIndex: 'city'}



  • Store – the Store we created above




new Ext.grid.PivotGrid({
    store     : myStore,
    aggregator: 'avg',
    measure   : 'height',
    //turns a decimal number of feet into feet and inches
    renderer  : function(value) {
        var feet   = Math.floor(value),
    //the rest of the config

Customising cell appearance


new Ext.grid.PivotGrid({
    store     : myStore,
    aggregator: 'avg',
    measure   : 'height',
    viewConfig: {
        getCellCls: function(value) {
            if (value < 20) {
                return 'expense-low';
            } else if (value < 75) {
                return 'expense-medium';
            } else {
                return 'expense-high';
    //the rest of the config

Reconfiguring at runtime


//the left axis can also be changed





9 Responses to Using the Ext JS PivotGrid

  1. Pingback: Tweets that mention A short guide on using the new #extjs 3.3 PivotGrid: --

  2. Lee Rowlands says:

    Looking great, I can see the opportunity to attach DD behaviours to the cell headers and use DD to ‘reconfigure’ the grid ala Excel Pivot Tables.

  3. NS says:

    I like to see example using database i.e. Sqlite or PostgreSQL as a source of data for the Pivot Grid, Charts. etc.

  4. Filipe Nunes says:


    using pivot grid i have this issue with many columns, the is no horizontal scrolling .

    can you help-me ?

    Best Regards,
    Filipe Nunes

  5. Desiree says:


    How do we enable the horizontal scrolling?


  6. John says:

    Hi, I ran into a potential problem with the pivot grid. I have a data set that does not include totals, but I have been able to ‘trick’ the grid into displaying the totals as if they were data. However, I need a way to order/change the sequence of the topAxis and leftAxis. Is there any way to make them go ‘Col1’, ‘Col3’, ‘Col2’ instead of the default ‘Col1′,’Col2′,’Col3’? Thanks for your time, and I look forward to your response.

  7. Jose Venegas says:

    Hola y como podria sumar cada grupo en una columna adicional abajo

  8. ABC says:

    Can I keep checkbixes and radios inside a pivot grid

  9. Carlos says:

    Ed, what are the differences between al the proxy types: ajax, rest, http, jsonp? Which one is the best for talking to a http backend (JBoss) running in the same server box but at a different port and using JSON for CRUD?

Leave a Reply to Carlos Cancel reply


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

Google photo


Twitter picture


Facebook photo


Connecting to %s

%d bloggers like this: