PDA

View Full Version : [OPEN-520][3.1.1-rc/3.1.x]Charts not refreshing in IE6 after portlet drag-drop



twk3
2 Feb 2010, 10:44 AM
Ext version tested:

Ext 3.0.3
Ext 3.1
Ext 3.1.1-rc
Ext 3.2


Adapter used:

ext


css used:

ext-all.css
Portal.css




Browser versions tested against:

IE6


Operating System:

WinXP Pro


Description:

After dropping a portlet containing a chart, the chart does not refresh in IE6, and as a result becomes barely visible.
Note, that is the portlet is resized after drop, say, if it's new drop zone has a different padding, everything is fine. It is when the size doesn't change that this error occurs.


Test Case:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Charts in Portlet</title>
<link rel="stylesheet" type="text/css" href="ext3/resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="ext3/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext3/resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css" href="ext3/ux/extjs-portal/css/Portal.css" />

<script type="text/javascript" src="ext3/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext3/ext-all-debug.js"></script>
<script type="text/javascript" src="ext3/ux/extjs-portal/Portal.js"></script>
<script type="text/javascript" src="ext3/ux/extjs-portal/PortalColumn.js"></script>
<script type="text/javascript" src="ext3/ux/extjs-portal/Portlet.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "ext3/resources/images/default/s.gif";
Ext.SSL_SECURE_URL = "ext3/blank.html";
Ext.FlashComponent.EXPRESS_INSTALL_URL="ext3/resources/expressinstall.swf";
Ext.chart.Chart.CHART_URL="ext3/resources/charts.swf";
Ext.onReady(function() {
Ext.QuickTips.init();
var chartStore = new Ext.data.ArrayStore({
fields: ['scope', 'emissions', 'percentage'],
data: [['Scope 1',100000,'10%'],['Scope 2',1000000,'50%'],['Scope 3',800000,'40%']]
});
var pieChart = new Ext.chart.PieChart({
store: chartStore,
dataField: 'emissions',
categoryField: 'scope',
expressInstall: true,
chartStyle: {
legend: {
display: 'right'
}
},
series: [{
style: {colors: [0xffc73e, 0x224e75, 0x85b648]}
}]
});

var chartPortlet = new Ext.ux.Portlet({
title:'Chart Portlet 1',
height: 300,
layout:'fit',
items: pieChart,
// Problem areas for Flash
hideMode:'offsets',
animCollapse:false,
animFloat:false,
shadow:false
// END
});

var viewport = new Ext.Viewport({
layout: 'border',
items: [
{xtype:'container',region:'east',width:300,layout:'vbox',layoutConfig:{align:'stretch'},items:[
chartPortlet.customMonitor = new Ext.Panel({flex:1,title:'Chart Portlet Monitor',autoScroll:true,html:'Events:'}),
pieChart.customMonitor = new Ext.Panel({flex:1,title:'Chart Component Monitor',autoScroll:true,html:'Events:'})
]},
{xtype:'portal',region:'center',margins:'35 5 5 0',items:[
{columnWidth:0.5,style:'padding:10px',items:chartPortlet},
{columnWidth:0.5,style:'padding:10px',items:{title:'Portlet 2',height:300,html:'This is a Portlet'}}
]}
]
});

var monitorFn = function(arg) {
this.customMonitor.body.insertHtml('beforeEnd',"<br /><span style='color:red;font-size:10px;margin-left:20px;'>"+arg+"</span>");
};
Ext.util.Observable.capture(chartPortlet, monitorFn);
Ext.util.Observable.capture(pieChart, monitorFn);

});
</script>
</head>
<body>
Ext JS 3.1.1-rc, In IE6, try dropping the chart portlet in a new drop zone, in 2-4 drops you will see the chart suddenly shrink.
</body>
</html>


See this URL : http://twkie.net/example/IEChartTest/


Steps to reproduce the problem:

In IE6, drag and drop the chart portlet 2-4 times, but drop it back in it's original location, or minimize the second panel so a scrollbar won't appear.


The result that was expected:

The chart is seen after drop


The result that occurs instead:

The chart becomes really small after drop


Debugging already done:

http://www.extjs.com/forum/showthread.php?p=433245


Possible fix:

not provided

twk3
6 Apr 2010, 10:32 AM
Ext 3.2 Update,

In Ext 3.2 this issue no longer occurs when a scrollbar is present, when dragging across columns.

So it is a bit better.

The cases it does appear is when your portlets are minimized so there is no scroll. In 3-4 drops you end up with the same problem.

The test case: http://twkie.net/example/IEChartTest/ has been updated to Ext JS 3.2


Interestingly enough, in my production application the scrollbar is now always present, and I am unable to reproduce this issue. As soon as you remove the scrollbar the issue returns.