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

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:


css used:


Browser versions tested against:


Operating System:

WinXP Pro


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">
<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.onReady(function() {
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,
items: pieChart,
// Problem areas for Flash
// END

var viewport = new Ext.Viewport({
layout: 'border',
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:{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);

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.

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:


Possible fix:

not provided

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.