1. #1
    Sencha User
    Join Date
    Dec 2009
    Posts
    64
    Vote Rating
    1
    Werzi2001 is on a distinguished road

      0  

    Default [ExtJS 4.1.1a] Error using cmp.removeAll

    [ExtJS 4.1.1a] Error using cmp.removeAll


    Hi,

    i have a big ExtJS application where i am using removeAll to replace the content of a container (first removeAll, then add new content). The problem is that in IE i get the error
    "Das Objekt unterstützt die Eigenschaft oder Methode "removeEventListener" nicht"
    (In english something like "The object doesn't have the property or method 'removeEventListener'")

    The error occurs in Ext.EventManager.removeListner (after the check if detachEvent exists). I think that the error occurs because the EventManager tries to remove an event from a dom object which doesn't exist anymore.

    I am sorry but i didn't manage to provide a test case because the error doesn't seem to occur in simple cases.

    Doesn anybody have an idea what i am doing wrong? May sencha should add a test if the dom is still valid before calling "removeEventListener"?

    Thanks a lot!
    Yours
    Thomas

    PS:
    The error only occurs if i call "cmp.removeAll(true)" but doesn't if i call "cmp.removeAll(false)". But if i don't destory the elements the browsers memory gets filled, doesn't it?

  2. #2
    Sencha User
    Join Date
    Dec 2009
    Posts
    64
    Vote Rating
    1
    Werzi2001 is on a distinguished road

      0  

    Default


    I did some further research and the error occurs on removing the "click" handler from a triggerWrap element of a file upload field. The element seems not to be a valid element (anymore).

    PS:
    I have tried to edit the initial post but every time i saved the change i was logged out and received a message that told me i don't have permissions and should login again.

  3. #3
    Sencha User
    Join Date
    Dec 2009
    Posts
    64
    Vote Rating
    1
    Werzi2001 is on a distinguished road

      0  

    Default


    Sorry for reposting again but i still may not edit my posts.

    I finally did manage to create a test case that triggers the error. Code first:

    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>
    So the error is only triggered if the "removeAll" is called from within the ComponentLoader.

    Am i doing anything wrong or is this a bug in ExtJS?

    Yours
    Thomas

    PS:
    The error seems only to be triggered if the target of the ComponentLoader is the same as the target get gets cleared.

  4. #4
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,084
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    Hi,

    sorry for posting on an old thread. I am facing the same problem in ExtJS 4.2. Did you or anyone else manage to find a solution?

    I have a panel which is the center region in a border layout and I want to remove all the components in it and add new ones when the user performs certain actions.

  5. #5
    Sencha User
    Join Date
    Dec 2009
    Posts
    64
    Vote Rating
    1
    Werzi2001 is on a distinguished road

      0  

    Default


    Hi Farish,

    in my case the error was caused by using the panel that should get the content replaced as the target of the ComponentLoader.

    The solution was to use a different target. In my case this was no problem as the content gets replaced using javascript that is executed using the ComponentLoader.

    Not sure if this applies also to your case.

    Best regards
    Thomas

  6. #6
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,084
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    Hi Thomas,

    thanks for the quick reply!

    Let me elaborate my scenario. I have a main panel which is rendered to Ext.getBody(). this panel has border layout with a tree as east region (which serves as menu) and a panel as center region. When the user clicks on a tree node, I want to remove the existing contents from the center region and add new components (e.g. a grid) according to the tree node which was clicked.

    So on itemclick event of the tree node, I am calling removeAll on the center region panel. This is when the error occurs.

    I discovered that the error doesnt occur in compatibility mode in IE and it didnt occur in ExtJS 4.0.7. I have posted a new question on ExtJS Q&A Forums and will see if I can get a response there. Otherwise, I will be forced to use 4.0.7.

    Best regards,
    Farish

  7. #7
    Sencha User
    Join Date
    Dec 2009
    Posts
    64
    Vote Rating
    1
    Werzi2001 is on a distinguished road

      0  

    Default


    Hi Farish,

    i am sorry but i don't think that this is the same scenario as it was for me. In my case the error was not caused by a usual call to removeAll but by calling removeAll from a ComponentLoader that had the same element as a target as the one that should be cleared.

    Maybe your scenario causes the same error but i don't think that my solution works for you as you don't even use a ComponentLoader.

    Best regards
    Thomas

  8. #8
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,084
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    yes it is a different scenario but the main problem behind this error is that IE8 and upwards doesnt support removeEventListener and addEventListener which are used by ExtJS 4.2.x and hence this error. I think 4.0.7 wasnt using these functions. thanks for your replies though. If i find something out, I will reply again for future reference.

  9. #9
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,084
    Vote Rating
    95
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      0  

    Default


    I discovered that the error I was getting in IE was not because of removeAll(); it was because of update()! I had some HTML in the panel and i was calling panel.update(""); to clear it before calling panel.removeAll(); This is not so crucial and I can just remove the update as its not really needed anymore.

    Hope this helps someone looking for similar problems in the future.

Thread Participants: 1