PDA

View Full Version : Uncaught Error: NOT_FOUND_ERR: DOM Exception 8



meediake
18 Oct 2010, 11:12 PM
Hello!

I started to develop a little test application on extjs.
Currently I am facing a very weird problem..

When I want to open a window with code like this:


function openWindow(p_height, p_width, p_title, p_item) {
var w = new Ext.Window({
height: p_height,
width: p_width,
title: p_title,
layout: 'form',
labelWidth: 100,
buttonAlign: 'center',
bodyStyle:'padding:10px;',
items: [p_item]
});
p_item.windowInstance = w; // is it causing leaks or not? I think its not :)
w.show();
}


The p_item is just usual item that my be any type of panel(like FormPanel).
When I load the page and click on my button, it opens that window. But when I close it with
hide() method and try to open it again, I get the error above.

What may be the cause of it?

I am testing on Google Chrome.

plalx
19 Oct 2010, 5:18 AM
Hi, you will need to provide a bit more information on your code as I cannot reproduce the error in IE or FF (not chrome, but I doubt its a browser issue) ...

By the way, if you are only hiding the window when closing it, you should not recreate a new instance of the window each time...
You should just show the same window again... otherwise there is no point in using hide() ... you can just close it, and recreate a new instance of the window (you have to pass a new instance for p_item as well).

meediake
19 Oct 2010, 8:35 PM
Hey!

Thanks for answering. Double-checked your ideas.

Here is my code for creating FormPanel(the panel inside the window):



function makeMyForm() {
var formPanel = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
header:false,
width: '100%',
items: [
// all my fields here
],

buttons: [
{
text: 'Save'
},{
text: 'Cancel',
handler: function() {
// a dynamic field, added in openWindow() method
if (formPanel.windowInstance != null) {
formPanel.windowInstance.close();
}
}
}
]
});
return formPanel;
}


And here is the code I am creating the window with:


function openWindow(p_height, p_width, p_title, p_item) {
var w = new Ext.Window({
height: p_height,
width: p_width,
title: p_title,
layout: 'form',
labelWidth: 100,
buttonAlign: 'center',
bodyStyle:'padding:10px;',
items: [p_item]
});
p_item.windowInstance = w; // is it causing leaks or not? I think its not :)
w.show();
}


And how I create the window:


openWindow(300, 400, 'My window', makeMyForm());


As you see, I am creating the new instance every time I open the window.

The documentation says that the close() removes the window completely from DOM...

Condor
19 Oct 2010, 10:36 PM
1. Your window should be layout:'fit' (the inner form has the layout:'form').
2. The windowInstance could be the source of a leak. Try deleting it:

formPanel.windowInstance.close();
delete formPanel.windowInstance;
3. You could even do this without a window reference, e.g.

var win = this.findParentByType('window');
if (win) {
win.close();
}

ps. Closing a window will destroy all components inside. Are you also recreating all fields when you create the form?

meediake
20 Oct 2010, 7:34 AM
Hello again.
Well, when using your code, I discovered, that Firefox gave me the error:


this.findParentByType is not a function


And, when I closed the window clicking the "X" button in the corner and after trying to open it again, I get:



Operation is not supported" code: "9
[Break on this error] window.undefined=window.undefined;Ext=...window.attachEvent("onunload",a)}})();


I am using the following code:


function openWindow(p_height, p_width, p_title, p_items, p_bbar) {
new Ext.Window({
height: p_height,
width: p_width,
title: p_title,
layout: 'fit',
labelWidth: 100,
buttonAlign: 'center',
bodyStyle:'padding:10px;',
items: p_items,
bbar: p_bbar
}).show();
}

function closeWindow() {
var win = this.findParentByType('window');
if (win) {
win.close();
}
}


My main testing browser is Chrome, but I also want to get it all working in other browsers(IE, FF, Safari..).

Creating a popup window is one of the most basic and elementary tasks in creating user interfaces, is there some sort of nice article about handling popups/windows in Extjs, so that I dont have to deal with such errors in the future?

Condor
20 Oct 2010, 7:38 AM
1. findParentByType would work if called from the cancel button, because 'this' would be a component inside the window. If your are calling it from somewhere else, you would need to make sure 'this' points to the correct component.

2. You do know that closing a window will destroy all components inside? So when you want to show the window a second time you will need to provide newly created p_items.
(an alternative would be reusing the window, but that requires some extra coding)

meediake
20 Oct 2010, 8:02 AM
Hello again.
I understood, what you told me. But, still its not working :)

Look at the code below:


var win = new Ext.Window({
height: 300,
width: 300,
title: 'My title',
layout: 'fit',
labelWidth: 100,
buttonAlign: 'center',
bodyStyle:'padding:10px;',
items: [makeMyForm()], // yes I create and return a new Ext.FormPanel each time here
bbar: [
{
text: 'Save',
handler: my_save_handler
}, {
text: 'Cancel',
handler: function() {
win.close();
}
}
]
});
win.show();


The error in Firefox:


Operation is not supported" code: "9
[Break on this error] window.undefined=window.undefined;Ext=...window.attachEvent("onunload",a)}})();


... and the error in Chrome:



Uncaught Error: NOT_FOUND_ERR: DOM Exception 8


So basically I create a window with some content inside. The documentation says:



Closes the Window, removes it from the DOM, destroys the Window object and all its descendant Components.


When I added just plain text inside the window instead of my form, it works.
But still, what does it mean:


...destroys the Window object and all its descendant Components.


I think that the problem is somewhere in my code and against the rules of DOM. But nothing is referencing my form and its elements, so I assume that it should be available for brausers gc.

My form is using a reusable combox, that is also used in the grid on the same page.
There is maybe some sort of reference that I cannot see and thus the gc cannot handle it..

plalx
20 Oct 2010, 9:37 AM
I am using exactly the code that you provided in firefox, and I get no error calling openWindow();, closing the window, and calling openWindow(); again. The problem is probably within the form items. Try to comment out your form items to see if the problem gets fixed.

Code I used:



function openWindow() {
var win = new Ext.Window({
height: 300,
width: 300,
title: 'My title',
layout: 'fit',
labelWidth: 100,
buttonAlign: 'center',
bodyStyle:'padding:10px;',
items: [makeMyForm()], // yes I create and return a new Ext.FormPanel each time here
bbar: [
{
text: 'Save'
}, {
text: 'Cancel',
handler: function() {
win.close();
}
}
]
});
win.show();
}

function makeMyForm() {
var formPanel = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
header:false,
width: '100%',
items: [ { xtype: 'textfield', fieldLabel: 'test' }],
buttons: [
{
text: 'Save'
},{
text: 'Cancel',
handler: function() {
// a dynamic field, added in openWindow() method
if (formPanel.windowInstance != null) {
formPanel.windowInstance.close();
}
}
}
]
});
return formPanel;
}

meediake
20 Oct 2010, 9:42 AM
I got it working.
Actually the cause of the problem was one particular combobox.
I was using it on other place too.

I thought that when my form is referencing outside, then its not the problem and the GC should work.
But as it turned out, I am little bit novice in javascript yet :)

Thank you anyway!