PDA

View Full Version : PivotGrid Axis are not showing



heidtmare
14 Oct 2010, 8:48 AM
I'm just running the code below to see if i want to adopt the PivotGrid to one of my apps, but i cant gte the headers/axis to show.
what am i missing here?


var mmmyStore = new Ext.data.ArrayStore({
autoLoad: true,
fields: [
'class', 'name', {name: 'status', type: 'int'},{name: 'time', type: 'int'}
],
data: [
['Transient',"9000",'0','1287075977'],
['Transient',"9000",'1','1287075987'],
['Transient',"9000",'2','1287075997'],
['Fusion',"cat",'2','1287075977'],
['Fusion',"cat",'2','1287075987'],
['Fusion',"cat",'2','1287075997'],
['Fusion',"dog",'1','1287075977'],
['Fusion',"dog",'1','1287075987'],
['Fusion',"dog",'1','1287075997'],
['Fusion',"squirel",'3','1287075977'],
['Fusion',"squirel",'3','1287075987'],
['Fusion',"squirel",'3','1287075997'],
['Fusion',"monkey",'1','1287075977'],
['Fusion',"monkey",'1','1287075987'],
['Fusion',"monkey",'1','1287075997']
]
});

var pivotGrid = new Ext.grid.PivotGrid({
title: 'Ease of doing business',
width: 800,
height: 400,
renderTo: 'container',
store: mmmyStore,
aggregator: 'sum',
measure: 'status',
viewConfig: {
getCellCls: function(value) {
if (value == 0) {
return 'status-ready';
} else if (value == 1) {
return 'status-running';
} else if (value == 2){
return 'status-done';
}else if (value == 3){
return 'status-failed';
}else {
return 'status-unknown';
}
}
},
leftAxis: [{
width: 100,
dataIndex: 'class'
},{
width: 100,
dataIndex: 'name'
}],
topAxis: [{
dataIndex: 'time'
}]
});

heidtmare
14 Oct 2010, 10:20 AM
Ok, this is beyond frustrating!
I cannot get the axis on the PivotGrid to show!
Neither the top or left will display.
I have taken the example code and run it through many differnt variations (using renderInto, seting it as an item inline) and all are fail.

the cells generate correcly, so i know the axis are being considered, but they dont render.

im using 3.3 and ive even tried shutting off my own css to see if it was interfering.

troseberry
14 Oct 2010, 11:16 AM
I have tried as well with no luck. Not even using your grid but just taking the example and loading the data into the store it will neve show the axis but will display the grid row/cell contents just fine.

troseberry
14 Oct 2010, 11:27 AM
update...

I tried this again by having the data actually come from the url config instead of passing the data in locally. Once I did this it displayed the axis just fine. So it appears perhaps to be a bug.

I submitted a new thread in the bugs section to report this.

troseberry
14 Oct 2010, 12:59 PM
Instead of configuring the store with the data directly assign the data to a local variable and then call the store's loadData() method and passing that variable that you have assigned the data to and it works.

heidtmare
15 Oct 2010, 6:39 AM
//Thankyou for the fix :)

EDIT: spoke too soon this still isnt working for me.
Heres what I got:

var data = [
['Transient',"9000",'0','1287075977'],
['Transient',"9000",'1','1287075987'],
['Transient',"9000",'2','1287075997'],
['Fusion',"cat",'2','1287075977'],
['Fusion',"cat",'0','1287075987'],
['Fusion',"cat",'1','1287075997'],
['Fusion',"dog",'1','1287075977'],
['Fusion',"dog",'1','1287075987'],
['Fusion',"dog",'2','1287075997'],
['Fusion',"squirel",'3','1287075977'],
['Fusion',"squirel",'0','1287075987'],
['Fusion',"squirel",'1','1287075997'],
['Fusion',"monkey",'1','1287075977'],
['Fusion',"monkey",'1','1287075987'],
['Fusion',"monkey",'2','1287075997']
];

var pivotGridStore = new Ext.data.ArrayStore({
fields: [
'class', 'name', {name: 'status', type: 'int'},{name: 'time', type: 'int'}
]
});

pivotGridStore.loadData(data);

and then later down the chain i have this inside a tab panel:

new Ext.grid.PivotGrid({
title: 'Testing PivotGrid Implementation',
store: pivotGridStore,
aggregator: 'sum',
measure: 'status',
viewConfig: {
getCellCls: function(value) {
if (value == 0) {
return 'status-ready-grid';
} else if (value == 1) {
return 'status-running-grid';
} else if (value == 2){
return 'status-done-grid';
}else if (value == 3){
return 'status-failed-grid';
}else {
return 'status-unknown-grid';
}
}
},
leftAxis: [{
width:100,
dataIndex: 'class'
},{
width:120,
dataIndex: 'name'
}],
topAxis: [{
dataIndex: 'time'
}]
})

EDIT: Ive also changed to using a JsonStore with Json formated data and i get the same results... no axis!

troseberry
15 Oct 2010, 9:51 AM
I think it could be that you need to start with just a regular data.store and create a reader and a recordtype and it will work.

Use the "People" pivotgrid example
1.) Manually copy and paste the contents of the "people.json" file and create a local variable inside people.js (var people = ....)
2.) Remove the url config (url: "people.json") from the store config
3.) Then insert the method to load the data to the store. ( myStore.loadData(people) )

Link to the bug forum where I posted this issue and my findings
http://www.sencha.com/forum/showthread.php?112582-PivotGrid-Axis-doesn-t-display-when-using-local-data

ExTriqui
17 Dec 2010, 6:42 AM
I reported this bug today.
http://www.sencha.com/forum/showthre...ith-local-data
You have to call loadData, after the store is already added to the grid to trigger the ondatachange gridview's event.
Or you can manually call grid.view.refresh(true) to render the row/col headers.