PDA

View Full Version : Error message during Ext.Window



gouber80
16 Dec 2010, 1:49 PM
I am receiving an error message, Microsoft JScript runtime error: 'dom' is null or not an object. The exact line is in the ext-all.js that matches if(this.el.dom.nextSibling!=a.dom). The a.dom is the null.

Generally when I see something like this I am setting something up incorrectly, but I am at a loss for what I can do differently. Here is what I am doing.

First I make a jquery call to load my page. The page loads without issues when not in a modal window.


$('#testWindow').load("ImageViewer.aspx", { location: location }, testWindowLoaded);

Then I set the control to a div and show the div values in the newly created window.


$('#testWindow').html(html);
modalTestWindow = new Ext.Window({
layout: 'fit',
width: 400,
height: 400,
plain: true,
contentEl: 'testWindow',
modal: true,
closable: true,
closeAction: 'hide'
});
modalTestWindow.show(this);


Here are the includes for extjs and jquery.


<script type="text/javascript" src="Resources/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="Resources/ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="Resources/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Resources/ext-3.3.1/ext-all.js"></script>


During the window load, I get the message that I stated earlier. The window still loads, but the error interferes with the execution of my page. I have noticed during debugging that with several alerts on the page, I do not get this error. My only guess, is that something needs more time to load or I am not loading something.

Please let me know if I am forgetting something.
Thanks,
TJ

arthurakay
16 Dec 2010, 2:32 PM
First of all, you're including the wrong file if you're using jQuery and ExtJS side-by-side. The INCLUDE_ORDER.txt file pretty clearly states that you should include files in this order:
- jquery.js
- ext-jquery-adapter.js (NOT ext-base.js)
- ext-all.js

I could go on a tangent about why you shouldn't need jQuery (because ExtJS can do everything jQuery can and more) - but I'll spare you the soapbox.

Lastly, the show() method doesn't need "this" passed to it.


$('#testWindow').html(html);

modalTestWindow = new Ext.Window({
layout: 'fit',
width: 400,
height: 400,
plain: true,
contentEl: 'testWindow',
modal: true,
closable: true,
closeAction: 'hide'
}).show();


See if that solves your issue.

gouber80
16 Dec 2010, 2:50 PM
Thanks, that got the window to open the first time without errors. I am pretty sure that I just have to clear out the div on close for secondary clicks. I should be able to handle that.

Thats the last time I use an off site to see what ext files I need to include to use ext ;).

Thanks,
TJ

gouber80
16 Dec 2010, 3:01 PM
No luck, I added a listener to clear out the div tag. But, after the first time the window loads, I cannot get the window to come up again.

Thanks,
TJ



listeners: { 'close': clearModalWindow }
function clearModalWindow()
{
$('#testWindow').html('');
modalTestWindow.destroy();
}

gouber80
16 Dec 2010, 3:11 PM
After doing a bit more playing around, what got the changes were the change in the .show. I also found the page that told me the files to include. It is from the sencha site.

http://www.sencha.com/learn/Tutorial:HTML_Page_Setup

Changing those back and forth do not seem to make any difference for me.

-TJ

arthurakay
17 Dec 2010, 6:14 AM
$('#testWindow').html(html);

modalTestWindow = new Ext.Window({
layout: 'fit',
width: 400,
height: 400,
plain: true,
contentEl: 'testWindow',
modal: true,
closable: true,
closeAction: 'hide'
}).show();


The problem is that you're assigning your window to the "testWindow" DOM element. As you said, it works the first time you open it - but when you close the modalTestWindow object, you destroy the DOM element. Thus, you can't call show() again because the DOM element no longer exists.

My suggestion would be to either:
- don't call destroy() or,
- don't bind your window to the "testWindow" DOM element

mschwartz
17 Dec 2010, 6:48 AM
I'm a huge fan of jQuery, but I wouldn't mix it with ExtJS. ExtJS is ideally suited for making web apps that look like M$ applications. jQuery is ideally suited for big long scrolling WWW pages with dynamic content.

As was pointed out, ExtJS already has the functionality to query the DOM and manipulate it (replace HTML, set attributes, etc.).

In fact, for an ExtJS app, you might not have to do much directly to the DOM anyhow.

Animal
17 Dec 2010, 7:00 AM
Blocks of innerHTML??? Disastrous!

Use Components!

gouber80
17 Dec 2010, 9:58 AM
So I changed the jquery to the following and removed the include for jquery and changed the ext include back to ext-base.js (since I am not using jquery anymore). I also scrapped the jquery.html and the ext.window since the ext.get... will replace that.



Ext.get('testWindow').load({
url: 'ImageViewer.aspx',
scripts: true
});


Now when the page loads the Ext.onReady of the ImageViewer.aspx I get the following ...
Microsoft JScript runtime error: Object doesn't support this property or method.

New code


//Located in parent page
function imageLinkOnClick(location)
{
Ext.get('testWindow').load({
url: 'ImageViewer.aspx',
scripts: true
});
}

//located in child/modal page
Ext.onReady(function()
{

});


I am assuming that the ImageViewer.aspx page is not being treated as a seperate page and that is why the onReady is not working (because I already have an onReady on the parent page). Taking the onReady out of the child page and calling a method directly after the load did not work because the aspx page was not loaded (none of the child scripts were added to the page). I would appreciate any suggestions.

Also, my net is sketchy today, sorry for any slow replys.

Thanks,
TJ

Animal
17 Dec 2010, 11:46 PM
You know it's totally possible to debug Javascript code! Just like you would any other programming language.

Set break points, single step through lines of code, examine variables etc.

You just need to forget about IE for initial development. Test on IE once you have the app functional.

(Firefox+Firebug)||Chrome

gouber80
20 Dec 2010, 2:09 PM
I think I will just go another way (another language), one that I have done all of this before. I am sorry that we could not break the barrier between expert users and intermediate users. By the way, I am aware of debugging, it is where I started before posting here. Feel free to close this unresolved thread.

-TJ