1. #1
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Answers
    112
    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 Answered: err IE with removeAll() Object doesn't support property or method removeEventLisener

    Answered: err IE with removeAll() Object doesn't support property or method removeEventLisener


    Hi,

    I am using ExtJS 4.2.0 in IE9. I have a panel in which I add components based on user selection from a menu and before adding new components, I call removeAll() to remove the existing components. It works in FF but not in IE9 (works in compatibility mode though). The reason I think is that IE 8 and later don't support addEventListener and removeEventListener used by ExtJS 4.2.0 which causes this error.

    The error doesnt occur in ExtJS 4.0.7 which I was using before. Since the majority of expected users will be using IE, its important that the app should work in IE.

    Does anyone know of a solution to this problem? One possible way is to force compatibility mode using meta tag in HTML but this doesnt seem to be a good way to deal with it. As a last resort, I can revert back to 4.0.7 and hope that future ExtJS versions consider IE compatibility. I think removeAll() would be one commonly used function whenever someone wants to clear up and add new components in a panel etc.

    Regards,
    Farish

  2. Try reversing the order of update('') and removeAll(). I just had to do this with ExtJS 3.4.1.1 if the input param to removeAll is true. Either order works with Chrome, but I had to do removeAll(true) prior to update('') or IE would throw an exception IF certain types of components were in the panel. At least if a radioGroup is present.

  3. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,931
    Answers
    328
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    I could not find an existing Jira for this issue. Nor was I unable to reproduce this issue with the following fiddle on IE9 on Win7 doc in Strict mode. Can you please modify it so that reproduces this issue. I will file a bug so that it can be addressed in the framework. Have you tried 4.2.1 or 4.2.2?
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  4. #3
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Answers
    112
    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


    thanks a lot for your reply and for the fiddle. sorry wasnt able to reply earlier because I was away for a few days.

    I tested with your fiddle and discovered that removeAll is working fine. the error is being caused by the update method! I call container.update(""); before calling removeAll because I display some text when the app is first loaded. You can give it a try to and reproduce the issue.

    However, this is not crucial and I can remove the update method from that place. thanks for the help. should i mark this as closed now or would you like to test for update()?

  5. #4
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,931
    Answers
    328
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      1  

    Default


    Thanks for the update. Are you able to reproduce the issue with the following fiddle?
    https://fiddle.sencha.com/#fiddle/8uv
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  6. #5
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Answers
    112
    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


    thanks for the reply. I tried it with your fiddle but again, i couldnt reproduce the error. But it still wasnt working with my code. So I played around a little bit and found out that its a combination of some factors which causes it. Here is the code with which you can reproduce it:

    Code:
    Ext.application({
        name: 'Fiddle',
    
        launch: function() {
    
            Ext.create('Ext.toolbar.Toolbar', {
                renderTo: document.body,
                width: 400,
                items: [{
                    xtype: 'button',
                    docked: 'bottom',
                    text: 'container.update',
                    handler: function() {
                        container.update('');
                        container.removeAll();
                        container.add({xtype: 'datefield'});
                    }
                }]
            });
            var container = Ext.create('Ext.container.Container', {
                width: 700,
                height: 100,
                renderTo: Ext.getBody(),
                border: 1,
                html: 'Hello this is a test'
            });
        }
    });
    What I want to do is the following, the container has some HTML text displayed when first loaded. then I add components to it on an event (e.g. button click here). so when the button is clicked 2nd time, I want to remove the existing components (datefield) and add new ones (adding datefield again in this example).

    If you remove either update() or removeAll(), then the error doesnt occur. strangely, it doesnt occur if you replace the datefield with textfield! I dont know which other components cause this error as I am using quite a few of them (including gridpanel).

    Could you please try the above code and see if you get the error now? the error occurs on 2nd button click (i.e. after the datefield has been added on 1st click) or on 1st click if the container initially had a datefield in its items instead of html.

  7. #6
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,931
    Answers
    328
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      1  

    Default


    OK I see what you mean. Not sure if this a bug. Rather than using both the html and items config on your container I would advise using a component with an html config as a child item of the container instead. Check out this modified fiddle. Are you still able to reproduce the issue?
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  8. #7
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Answers
    1
    Vote Rating
    16
    rich02818 will become famous soon enough

      1  

    Default


    Try reversing the order of update('') and removeAll(). I just had to do this with ExtJS 3.4.1.1 if the input param to removeAll is true. Either order works with Chrome, but I had to do removeAll(true) prior to update('') or IE would throw an exception IF certain types of components were in the panel. At least if a radioGroup is present.

  9. #8
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,931
    Answers
    328
    Vote Rating
    130
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    Does the error occur if you do as I suggested in my last post?
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  10. #9
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Answers
    112
    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


    Quote Originally Posted by rich02818 View Post
    Try reversing the order of update('') and removeAll(). I just had to do this with ExtJS 3.4.1.1 if the input param to removeAll is true. Either order works with Chrome, but I had to do removeAll(true) prior to update('') or IE would throw an exception IF certain types of components were in the panel. At least if a radioGroup is present.
    your solution works! changing the order causes the exception to disappear in IE. But I guess I will use the suggestion provided by the Sencha Team member. If I enclose the HTML inside a container, then I dont need update at all. I can just use removeAll to remove that component and then add new ones.

  11. #10
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,085
    Answers
    112
    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


    Quote Originally Posted by fmoseley View Post
    Does the error occur if you do as I suggested in my last post?
    thanks for the help. unfortunately it still occurs. Its the combination of update with datefield (and possibly other components) which causes this problem. If I change the order or update and removeAll as suggested by the other member above, then it works!

    however, your suggestion is good that I should put the HTML inside a container. that way, I can just use removeAll and the text will be gone (no need to call update!). thanks again.

Thread Participants: 2