slemmon
29 Oct 2011, 3:43 PM
REQUIRED INFORMATIONExt version tested:
Ext 4.1-pr1
Browser versions tested against:
FF7.0.1 (firebug 1.8.3)
Chrome 15.0.874.106 beta-m
IE9 *** NOTHING RENDERED AT ALL
DOCTYPE tested against:
xhtml1-transitional
Description:
If a pie chart is rendered with shadow: true and animate:false resizing the chart will cause the shadow per slice to misalign until you float the cursor over the pie slices again.
Steps to reproduce the problem:
Show the chart in an Ext.Window with chart shadow:true and animate:false
shrink the size of the window.
The result that was expected:
foo
bar
The result that occurs instead:
The shadow should redraw in the right location per slice after resizing.
Test Case: (modified from the examples)
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');
Ext.onReady(function () {
store1.loadData(generateData(6, 20));
var donut = false,
panel1 = Ext.create('widget.window', {
autoShow: true,
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
store1.loadData(generateData(6, 20));
}
}, {
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
//animate: true,
store: store1,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store1.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
});
HELPFUL INFORMATIONScreenshot or Video:
attached
See this URL for live test case: http://Debugging already done:
none
Possible fix:
not provided
Additional CSS used:
only default ext-all.css
Operating System:
WinXP Pro
Ext 4.1-pr1
Browser versions tested against:
FF7.0.1 (firebug 1.8.3)
Chrome 15.0.874.106 beta-m
IE9 *** NOTHING RENDERED AT ALL
DOCTYPE tested against:
xhtml1-transitional
Description:
If a pie chart is rendered with shadow: true and animate:false resizing the chart will cause the shadow per slice to misalign until you float the cursor over the pie slices again.
Steps to reproduce the problem:
Show the chart in an Ext.Window with chart shadow:true and animate:false
shrink the size of the window.
The result that was expected:
foo
bar
The result that occurs instead:
The shadow should redraw in the right location per slice after resizing.
Test Case: (modified from the examples)
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');
Ext.onReady(function () {
store1.loadData(generateData(6, 20));
var donut = false,
panel1 = Ext.create('widget.window', {
autoShow: true,
width: 800,
height: 600,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
store1.loadData(generateData(6, 20));
}
}, {
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
//animate: true,
store: store1,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store1.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
}
});
});
HELPFUL INFORMATIONScreenshot or Video:
attached
See this URL for live test case: http://Debugging already done:
none
Possible fix:
not provided
Additional CSS used:
only default ext-all.css
Operating System:
WinXP Pro