I have a Carousel Component that contains an Ext.ext.chart. This particular Carousel can be resized and when I resize it I need to redraw the chart to fit in its new size. Currently I am removing the chart component from the carousel with the destroy flag = true and then creating another chart and inserting it into the Carousel. This works just fine on Chrome Windows/Mac Safari Windows/Mac and the IOS Ipad simulator. Unfortunately it crashes on an iPad (IOS 4.3.3) consistently. When I comment out the chart component adding/deleting the web app does not crash on the iPad.
I suspect this is a memory issue so my question is -
Is this the best way to cleanly remove and destroy a chart Component?
It turns out I was making this harder than needed to be.
If I just set the width and height of the Carousel, the chart card in the Carousel resizes as well and no longer crashes Safari on the iPad!
Resize the panel that contains the Carousel:
// The mainPanelEle contains the width and height that I want chartPanel to be resized to
After the chartPanel has been resized, Setting the Carousel's height and width will cause a resize event to take place and will cause the chart to be redrawn. Be sure to use a setSize(w,h) as opposed to using setWidth() and setHeight(). Each of those statements will cause a resize event so it will force the chart to be drawn twice rather than once with the setSize()
// get the height of the titlebar in this panel
titlePanel = chartPanel.items.get(0);
h = chartPanel.getHeight() - titlePanel.getHeight();
w = chartPanel.getWidth();