PDA

View Full Version : Grids/Charts with Dynamic Column Model not displaying in IE8



mozgras
13 Feb 2011, 6:22 PM
Hi,
I have grids that use a dynamic column model and everything works perfectly in ff, chrome, & safari. I have no errors and my code is super clean with the help of jslint. Does anyone have any idea why IE doesn't render the grids and piechart? They are just empty. Thanks.

var ds = new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: 'rows',
successProperty: 'success'
}),
proxy: new Ext.data.HttpProxy({
url: '/jsProject/request.php'
})
});

var updateMasterGrid = function (abbrval, dateval){
masterGrid.setTitle('Master Report '+ abbrval);
ds.load({
params: {type: 'master',
abbr: abbrval,
date: dateval
},
callback: function() {
setPanels();
}
});
};
ds.on('metachange', function (store,meta) {
var columns = [];
var i = 0;
for (i; i < meta.fields.length; i++ ) {
var hidden = meta.fields[i].hidden;
columns.push( {
header: meta.fields[i].header,
dataIndex: meta.fields[i].name,
type: meta.fields[i].type,
id: meta.fields[i].id,
sortable: meta.fields[i].sortable,
hidden: meta.fields[i].hidden,
xtype: meta.fields[i].xtype,
format: meta.fields[i].format,
renderer: meta.fields[i].renderer,
dateFormat: meta.fields[i].dateFormat,
width: meta.fields[i].width,
filterable: meta.fields[i].filterable,
filter: meta.fields[i].filter
} );
}
masterGrid.reconfigure(store, new Ext.grid.ColumnModel(columns));
});
//BILL HISTORY GRID *****************************************
var billhist = new Ext.data.Store({
reader: new Ext.data.JsonReader({
root: 'rows',
successProperty: 'success'
}),
proxy: new Ext.data.HttpProxy({
url: '/jsProject/request.php'
})
});
var updatebillhist = function(sval){
billhist.load({
params: {type: 'bill', unitcode: sval}
});
};
billhist.on('metachange', function (store,meta) {
var columns = [];
var i = 0;
for (i; i < meta.fields.length; i++ ) {
var hidden = meta.fields[i].hidden;
columns.push( {
header: meta.fields[i].header,
dataIndex: meta.fields[i].name,
type: meta.fields[i].type,
id: meta.fields[i].id,
sortable: meta.fields[i].sortable,
xtype: meta.fields[i].xtype,
format: meta.fields[i].format,
renderer: meta.fields[i].renderer,
dateFormat: meta.fields[i].dateFormat,
hidden: meta.fields[i].hidden,
width: meta.fields[i].width
} );
}
Ext.getCmp('billGrid').reconfigure(store, new Ext.grid.ColumnModel(columns));
});
// MASTER REPORT PIE CHART ********************************
var pie = new Ext.chart.PieChart({
store: ds,
dataField: 'usage',
categoryField: 'apt',
series: [{
style:{
showLables: true
}
}],
extraStyle: {
padding: 2,
animationEnabled: true,
legend: {
display: 'right'
}
}
});
var piePanel = new Ext.Panel({
title: 'Pie Chart',
id: 'piePanel',
collapsible: true,
closable: true,
height: smallPHeight,
items: [pie]
});

// *****************
var masterGrid = new Ext.grid.GridPanel ({
id: 'masterGrid',
forceLayout: true,
deferredRenderer: false,
viewConfig: { //no scrollbar
forceFit: true
},
loadMask: true,
height: smallMHeight,
title: 'Master Report',
frame: true,
plugins: [filters2],
ds: ds,
cm: new Ext.grid.ColumnModel([]),
listeners: {
cellclick: function(grid, rowIndex, colIndex) {
if (colIndex === 3) {
var record = grid.getStore().getAt(rowIndex);
var fieldName3 = grid.getColumnModel().getDataIndex(3);
var fieldName1 = grid.getColumnModel().getDataIndex(1);
var fieldName2 = grid.getColumnModel().getDataIndex(2);
var uc = record.get(fieldName1);
var n = record.get(fieldName3);
var a = record.get(fieldName2);
updatebillhist(uc);
var i = 0;
var rn = 0;
tenents.data.each(function(item, index, totalItems ) {
if (item.get('unitcode') === uc) {rn = i;}
i=i+1;
});
Ext.getCmp('mgrTabPanel').setActiveTab(0);
Ext.getCmp('tenentsGrid').getSelectionModel().selectRow(rn);
Ext.getCmp('billGrid').setTitle('Unit '+a+'|'+n);
Ext.getCmp('tenentsGrid').getView().focusRow(rn);
}
}
}

});

var billChart = new Ext.chart.ColumnChart ({
title: 'Bill History',
height: 330,
store: billhist,
yAxis: new Ext.chart.NumericAxis({majorUnit: 1000}),
yField: 'usage',
series: [{
xField: 'date'
}]
});

var billGrid = new Ext.grid.GridPanel ({
width: 342,
height: 300,
id: 'billGrid',
title: 'Bill History',
frame: true,
ds: billhist,
cm: new Ext.grid.ColumnModel([])
});

// MAIN LAYOUT ***********************************
var manager_panel = new Ext.Panel({
title: 'Property Access',
frame: true,
renderTo: 'panel',
forceLayout: true,
height: pageHeight,
items: [propForm,{
xtype: 'tabpanel',
forceLayout: true,
deferredRenderer: false,
id: 'mgrTabPanel',
activeTab: 0,
items: [{ // Tenents TAB ***********************
xtype: 'panel',
title: 'Tenents',
height: tabHeight,
items: [{
xtype:'panel',
height: 300,
layout: 'hbox',
layoutConfig: {align : 'stretch',pack : 'start'},
items: [tenentsGrid, billGrid]
},
billChart
]
},{ // REPORTS TAB ***********************
title: 'Reports',
xtype: 'panel',
height: tabHeight,
items: [dateForm,piePanel,masterGrid]
},
emailForm
] // end tenents tab
}] // end prop
}); //end mngr panel
Sorry if that's a lot of code, I tried to pair it down to what is relevent. By the way, I'm using a method of dynamic columns found in the sencha forums: http://www.sencha.com/forum/showthread.php?3719-Dynamic-grid-columns&p=498982&viewfull=1#post498982

mozgras
14 Feb 2011, 8:05 AM
Solved. The problem was a trailing comma in the data store and IE8 also didn't like console.log().

btw, is there a way to change the post title to add [solved]? I tried the 'Go Advanced' button, but it's not working. Thanks.