[ExtJS 4.1.1a] Error using cmp.removeAll

**Werzi2001** · 22 Feb 2013 12:50 AM

REQUIRED INFORMATION
Ext version tested:
- Ext 4.1.1a

Browser versions tested against:
- IE7/IE8/IE9/IE10

Description:
- removeAll called from within the ComponentLoader triggers error in IE
- "removeEventListener" cannot be called
- i think the problem ist that the dom element that is "removeEventListener" tried to be called for doesn't exist anymore

Steps to reproduce the problem:
- Click button in example code

The result that was expected:
- Content be replaced (no error)
- Like in FireFox or Chrome

The result that occurs instead:
- Error that "removeEventListener" cannot be called (IE)

Test Case:
index.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    
        <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all-gray.css"/>
        <script type="text/javascript" src="./extjs/ext-all.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            Ext.onReady(function() {
                var panel = Ext.create('Ext.panel.Panel', {
                    id: 'panel',
                    renderTo: document.body,
                    title: 'Test',
                    width: 400,
                    height: 300,
                    items: [{
                        xtype: 'filefield',
                    }]
                });
                
                var button = Ext.create('Ext.button.Button', {
                    renderTo: document.body,
                    text: 'Click',
                    listeners: {
                        click: function(b, e, eopts) {
                            Ext.create('Ext.ComponentLoader', {
                                target: panel,
                                url: 'test.html',
                                autoLoad: true,
                                scripts: true
                            });
                        }
                    }
                });
            });
        </script>
    </body>
</html>

test.html

Code:

<script type="text/javascript">
    (function() {
        var panel = Ext.getCmp('panel');
        panel.removeAll(true);
        panel.add({
            html: 'test'
        });
    }).call();
</script>

HELPFUL INFORMATION
Possible fix:
Replace the following code from EventManager.removeListener

Code:

if (dom.detachEvent) {
    dom.detachEvent('on' + bindName, wrap);
} else {
    dom.removeEventListener(bindName, wrap, false);
}

with

Code:

if (dom.detachEvent) {
    dom.detachEvent('on' + bindName, wrap);
} else if (dom.removeEventListener) {
    dom.removeEventListener(bindName, wrap, false);
}

**evant** · 22 Feb 2013 7:21 PM

I don't see any exception when I run your test case in IE8 against 4.1.1a, but even so you're mis-using the class.

When you use the html option, it overwrites the body of the panel with anything you load via ajax, in this case it totally destroys the DOM for the file field, without ever notifying the panel that it's gone. So when you attempt to call removeAll() it's been set in an invalid state.

This is the exact use case for using the Component renderer on the component loader.

Edit:
To elaborate, you're essentially doing this:

Code:

panel.update('');
panel.removeAll();
panel.add({});

**Werzi2001** · 23 Feb 2013 2:56 AM

Thanks for your reply. I already thought that this use of the ComponentLoader might not be intended (even incorrect) but i didn't manager to get the code running without it.

What is the exact result expected for a component renderer call? The documentation only says "Loads child {Ext.Component} instances. This option is only valid when used with a Container.". But using which format?

Thanks a lot!

Edit:
Ok i found the format that is expected (a single/serier of config objects). But i cannot return that as the example was only a very simple test case. The real objects are much more complex usually also containing html and further javascript code. So i think i have to use the ComponentLoader on a dummy panel and replace the content of the actual panel manually (as i already do).

**evant** · 23 Feb 2013 9:53 PM

I think you should just be able to call removeAll() before you make the component loader call.

**Werzi2001** · 24 Feb 2013 6:39 AM

Thanks for your solution but this causes a white page/element as long as the new content is not yet loaded (time between removeAll and finished AJAX call).

I created a dummy element (not really visible) that is the target for the ComponentLoader and not the one that actually gets the new component/content. This works fine in all relevant browsers :-)

Thanks again for your help!

[ExtJS 4.1.1a] Error using cmp.removeAll

Thread Tools

Search Thread

Display

[ExtJS 4.1.1a] Error using cmp.removeAll

[ExtJS 4.1.1a] Error using cmp.removeAll