PDA

View Full Version : TabPanel/Charts IE problem



extjslikeit
21 May 2010, 5:26 PM
I am using bar chart in tab.

I have two tabs. Tab A, Tab B.

The chart is initially in Tab B.

Initially, Tab B has the focus.

When I change to Tab A, I add the same chart to Tab A.

This works great in FireFox and Safari. The chart shows up. Chart is updated periodically which also works.

However in IE it does not work. The chart gets displayed however there is an error shown at some line in my html file which seems incorrect. The chart does not get updated.

I would not want to create two flash charts to show same data stream.

mankz
21 May 2010, 10:44 PM
Post some code and someone will hopefully figure it out! :)

extjslikeit
22 May 2010, 1:00 AM
Thanks. The code is spread across files. The chart works well in first tab. I will post the IE debugger's message


///////////////////////////////////////////////////////////////////////////////
/..........................tab panel config....
listeners: {
tabchange: function(thisTabPanel, newActiveTab){

var title = newActiveTab.title;

if (title == 'OmegaCharts') {

//chartCollection is MixedCollection (value is sub class of panel)
//omega
var fattyAcidChart = thisTabPanel.chartCollection.get('Fatty Acid Levels');

newActiveTab.addChart(fattyAcidChart);

newActiveTab.refresh();
}
/................

///////////////////////////////////////////////////////////////////////////////
/*........newActiveTab is sub class of panel
/**
* Represents collection of dashboard panels.
*/
MIEI.View.AllChartsPanel = Ext.extend(Ext.Panel, {
title: 'OmegaCharts',
layout: 'fit',
chartsCollection: new Ext.util.MixedCollection(),
initComponent: function(){
MIEI.View.AllChartsPanel.superclass.initComponent.call(this);
}
})
/*Getters*/
MIEI.View.AllChartsPanel.prototype.getChart = function(name) {
return this.chartsCollection.get(name);
}
/*Setters*/
//chart is a chart panel with a bar chart
MIEI.View.AllChartsPanel.prototype.addChart = function(chart) {
this.chartsCollection.add(chart.getTitlex(), chart);
}
/*Other*/
MIEI.View.AllChartsPanel.prototype.refresh = function(){
var chart = this.chartsCollection.itemAt(0);

this.add(chart);

this.doLayout();
}
///////////////////////////////////////////////////////////////////////////////
/*................chart panel
/**
* This panel would contain the chart image that is updated at regular intervals.
*/
MIEI.View.ChartPanel = Ext.extend(Ext.Panel, {
border: false,
layout: 'fit',
flex: 1,
chart: null,
collapsible: false,
initComponent: function(){
MIEI.View.ChartPanel.superclass.initComponent.call(this);
}
});
MIEI.View.ChartPanel.prototype.updateValue = function(value){
this.chart.loadData(getFormattedData(value));
}
////////////////////////////////////////////////////////////////////////////////
//getformatteddata is a simple function which transforms data
function getFormattedData(attrVal){
if (attrVal != null) {
var attrValType = attrVal['attributeValueType'];
if (attrValType != null) {
if (attrValType == 'MapOfNumbers') {

}
else
if (attrValType == 'NumberArray') {

var labels = attrVal['labels'];
var values = attrVal['attributeValue'];

var datai = [];
for (var i = labels.length - 1; i >= 0; --i) {
var jsonOption = [];
jsonOption['__'] = labels[i];
jsonOption[labels[i]] = values[i];
datai[i] = jsonOption;
}

return datai;
}
else
if (attrValType == 'MapOfNumberArrays') {

}
}
}
}

extjslikeit
22 May 2010, 1:41 AM
function __flash__arrayToXML(obj) {
var s = "<array>";
for (var i=0; i<obj.length; i++) {
s += "<property id=\"" + i + "\">" + __flash__toXML(obj[i]) + "</property>";
}
return s+"</array>";
}
function __flash__argumentsToXML(obj,index) {
var s = "<arguments>";
for (var i=index; i<obj.length; i++) {
s += __flash__toXML(obj[i]);
}
return s+"</arguments>";
}
function __flash__objectToXML(obj) {
var s = "<object>";
for (var prop in obj) {
s += "<property id=\"" + prop + "\">" + __flash__toXML(obj[prop]) + "</property>";
}
return s+"</object>";
}
function __flash__escapeXML(s) {
return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
}
function __flash__toXML(value) {
var type = typeof(value);
if (type == "string") {
return"<string>" + __flash__escapeXML(value) + "</string>";
} elseif (type == "undefined") {
return"<undefined/>";
} elseif (type == "number") {
return"<number>" + value + "</number>";
} elseif (value == null) {
return"<null/>";
} elseif (type == "boolean") {
return value ? "<true/>" : "<false/>";
} elseif (value instanceof Date) {
return"<date>" + value.getTime() + "</date>";
} elseif (value instanceof Array) {
return __flash__arrayToXML(value);
} elseif (type == "object") {
return __flash__objectToXML(value);
} else {
return"<null/>"; //???
}
}
function __flash__addCallback(instance, name) {
instance[name] = function () {
return eval(instance.CallFunction("<invoke name=\""+name+"\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments,0) + "</invoke>"));
}
}
function __flash__removeCallback(instance, name) {
instance[name] = null;
}

extjslikeit
24 May 2010, 10:42 AM
I found a workaround.

For IE I create a new chart and copy the settings from previous chart.

For FireFox/Safari creating the new chart creates problem of data.store being not found (I still cannot find the reason), however these two browsers worked ok by shifting chart element.

I am sure there has to be browser independent way to solve this problem, if anyone can add some hints/pointers, I will implement/test it.