PDA

View Full Version : Pivotgrid top and left axis are missing



bobestjs
11 Feb 2011, 4:59 PM
Hello

I made change to the countries.js pivot example. I create an array and set the data config instead of getting the data from the .json file.

When I do this the top and left axis do not show up



/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/
Ext.onReady(function() {
?
myData = [["Afghanistan", "Asia", "2004", "0", "0"],
["Afghanistan", "Asia", "2005", "28", "90"],
["Afghanistan", "Asia", "2006", "4", "9"],
["Afghanistan", "Asia", "2007", "4", "9"],
["Afghanistan", "Asia", "2008", "4", "9"],
["Afghanistan", "Asia", "2009", "4", "9"],
["Afghanistan", "Asia", "2010", "4", "7"],
["Albania", "Europe", "2004", "11", "41"],
["Albania", "Europe", "2005", "11", "41"],
["Albania", "Europe", "2006", "11", "41"],
["Albania", "Europe", "2007", "11", "39"],
["Albania", "Europe", "2008", "10", "36"]]
var myStore = new Ext.data.ArrayStore({
autoLoad: true,
fields: [
'economy', 'region', 'year',
{name: 'procedures', type: 'int'},
{name: 'time', type: 'int'}
],
data:myData
// url : 'countries.json'
});

var pivotGrid = new Ext.grid.PivotGrid({
title : 'Ease of doing business',
width : 800,
height : 400,
renderTo : 'docbody',
store : myStore,
aggregator: 'sum',
measure : 'time',

viewConfig: {
getCellCls: function(value) {
if (value < 20) {
return'expense-low';
} elseif (value < 75) {
return'expense-medium';
} else {
return'expense-high';
}
}
},

leftAxis: [
{
width: 165,
dataIndex: 'economy'
}
],

topAxis: [
{
dataIndex: 'year'
}
],

//toggles the Region dimension on and off
tbar: [
{
text: 'Toggle Region',
enableToggle: true,
toggleHandler: function() {
var leftAxis = pivotGrid.leftAxis,
oldDimensions = leftAxis.dimensions,
newDimensions = [];

if (oldDimensions.length == 1) {
newDimensions.push({
width: 100,
dataIndex: 'region'
});
}

newDimensions.push({
width: 165,
dataIndex: 'economy'
});

leftAxis.setDimensions(newDimensions);
pivotGrid.view.refresh(true);
}
}
]
});
});