[CLOSED] Chart ReRender after Panel Resize
I know this is something you don't officially support, but I was hoping you might have an idea to help me out. I have this HighChart control (extends Ext.BoxComponent) that I'm working on and I have it set in the header (North Panel) of a viewport. In the listener of the panel I have created in the North layout I have after render loading the chart control, it works correctly and renders to the size of the panel. When the panel is resized however it doesn't resize the chart. I can click on reload, and it will re render the chart to the new correct size.
I guess my question I need to re render this panel after a viewport resize. Any ideas I'm just a little lost..
I'll post my code, any ideas? (BTW when I place it in a window it works correctly and as expected, it will always keep resizing to the window making me think i have to call that resize command which now slips my mind)
Code:
<script type="text/javascript">
function panelLoaded() {
var chart;
var store2 = new Ext.data.JsonStore({
fields: ['season', 'total'],
data: [{
season: 'Summer',
total: 150
}, {
season: 'Fall',
total: 245
}, {
season: 'Winter',
total: 117
}, {
season: 'Spring',
total: 184
}]
});
chart = new Ext.ux.HighChart({
store: store2,
height: 325,
series: [
{
type: 'pie',
name: 'Views',
categorieField: 'season',
dataField: 'total'
}
],
chartConfig: {
chart: {
margin: [50, 150, 60, 80]
},
title: {
text: 'Employees By Business Unit',
style: {
margin: '10px 100px 0 0' // center it
}
},
subtitle: {
text: 'Source: DeAngelo Brothers Inc',
style: {
margin: '0 100px 0 0' // center it
}
},
legend: {
layout: 'vertical',
style: {
left: 'auto',
bottom: 'auto',
right: '10px',
top: '100px'
}
}
}
});
// var graphWin = new Ext.Window({
// title: 'Resizeable Graph Window',
// resizeable: true,
// width: 400,
// height: 400,
// layout: 'fit',
// items: [chart]
// });
// graphWin.show();
Chart1Panel.add(chart);
Chart1Panel.doLayout();
}
</script>
// NORTH Panel in viewport/borderlayout
Code:
<North Split="true">
<ext:Panel runat="server" ID="Chart1Panel" Title="Test" >
<Listeners>
<AfterRender Fn="panelLoaded" />
</Listeners>
</ext:Panel>
</North>
RE: [CLOSED] Chart ReRender after Panel Resize
Hi,
What about to add Layout="Fit" to the Chart1Panel?