View Full Version : Floating panels are added on every show() but not removed on hide()

31 Aug 2011, 11:41 AM
Sencha Touch version tested:


only default ext-all.css
Platform tested against:

Windows Chrome 12.0.742.122 m
Windows Safari 5.1

Every time any floating panel/component is displayed, it's added as a div to the <body>, but when it's hidden, the div does not get removed, leading to document growing indefinitely.
Although steps to repro talk about select control and its drop down panel, this issue affects all floating panels.
Steps to reproduce the problem:

Navigate to any form with a Select control.
Right-click and select Inspect Element to see document objects.
Click the select field to show the drop down (floating) panel. Observe a new div added to the document.
Click outside of the drop down to make it go away. Observe div created on previous step not being removed. Div should be removed
The result that was expected:

div should be removed
The result that occurs instead:

div remained.
Screenshot or Video:

attached. Show how divs keep being added and never removed.
Possible fix:

Call remove() method of floating panel's parent.

6 Sep 2011, 12:19 PM
Dear Sencha folks,

We are using Touch framework for a large-scale LOB application used by real-world fortune 500 customers on a pilot basis. So far we are not impressed with your ability to address issues in your platform, which includes your paid support contract that we have - it was as little help as is this forum so far.

We have submitted this bug by the book - with reliable steps to reproduce and screenshots. Could you please provide anything as a work-around, a patch - or at least acknowledge the issue so we knew that the time we spent reporting this issue was not time wasted?


8 Sep 2011, 2:39 AM
I had the same issue, my solution is to generate the floating panel on the fly when you need it and then destroy it when you hide it. This will ensure no orphaned HTML elements are left in the DOM structure.


function showPanel(){

floatingPanel = new Ext.Panel({
floating: true,
modal: true,
html: 'hello world',
hide: function(thiss){



Hope this helps

8 Sep 2011, 9:48 AM
Hello, Dean.

Thank you for the suggestion. The problem is that our floating panels contribute maybe 15% to the growth of the document body size, while the rest is done by drop-down panels and message boxes.

Also this issue is the root cause of another problem reported here - message boxes and wait cursor panels displayed behind floating windows. We are working on trying to do what you have suggested for all floating elements by hacking Sencha Touch Framework itself, but so far we are braking something else every time we think we got it.

All the best,

2 Nov 2011, 9:03 AM
This bug still exists in 1.1, but I haven't attempted to reproduce in 2.0.

I'm with Vlad, as a premium member, the support here has been rather abysmal.