PDA

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



Farish
13 Aug 2014, 12:19 AM
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

fmoseley
15 Aug 2014, 9:23 AM
I could not find an existing Jira for this issue. Nor was I unable to reproduce this issue with the following fiddle (https://fiddle.sencha.com/#fiddle/8uv) 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?

Farish
18 Aug 2014, 12:07 AM
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()?

fmoseley
18 Aug 2014, 5:38 PM
Thanks for the update. Are you able to reproduce the issue with the following fiddle?
https://fiddle.sencha.com/#fiddle/8uv

Farish
18 Aug 2014, 11:13 PM
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:


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.

fmoseley
19 Aug 2014, 2:48 PM
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. (https://fiddle.sencha.com/#fiddle/94u) Are you still able to reproduce the issue?

rich02818
19 Aug 2014, 3:29 PM
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.

fmoseley
19 Aug 2014, 4:49 PM
Does the error occur if you do as I suggested in my last post?

Farish
19 Aug 2014, 10:40 PM
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.

Farish
19 Aug 2014, 10:43 PM
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.

fmoseley
20 Aug 2014, 8:31 AM
You are welcome. Thanks for the update.