PDA

View Full Version : ExtCore Menu CSS not being applied



jdarbyshire
8 Mar 2010, 3:26 PM
I get a sporadic error in IE with the extCore Menu system which I am applying to a bunch of list items in a list.

The error:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0)
Timestamp: Mon, 8 Mar 2010 23:13:54 UTC


Message: 'this.el' is null or not an object
Line: 67
Char: 9
Code: 0
URI: http://toopnet.tt.internal/lib/menu/menu.js



Which looks like this:
http://poseidon.toop.com.au/menu_error.PNG

I am loading the menu using the onReady function ala:

Ext.onReady(function() {
new Ext.ux.Menu('menu', {
direction: 'horizontal', // default
delay: 0.1, // default
autoWidth: true, // default
transitionDuration: 0.2, // default
animate: true, // default
currentClass: 'current' // default
});
});

And menu HTML ala:

<div id="menuWrapper">
<ul id='menu'>
<li>
<a href='index.php?page=home'>Home</a>
<ul>
<li>
<a href='index.php?page=home'>My ToopNET</a>
</li>
<li>
<a href='index.php?page=news'>Latest News</a>
</li>
</ul>
</li>
<li>
<a href='index.php?page=sales'>Sales</a>
</li>
<li>
<a href='index.php?page=property_management'>PM</a>
</li>
<li>
<a href='index.php?page=marketing'>Marketing</a>
</li>
<li>
<a href='index.php?page=admin'>Admin</a>
</li>
<li>
<a href='index.php?page=lounge'>Lounge</a>
<ul>
<li>
<a href='index.php?page=forum'>Forum</a>
</li>
<li>
<a href='index.php?page=chat'>Chat</a>
</li>
<li>
<a href='index.php?page=chatSales'>Sales Chat</a>
</li>
<li>
<a href='index.php?page=chatPM'>PM Chat</a>
</li>
<li>
<a href='index.php?page=chatMarketing'>Marketing Chat</a>
</li>
<li>
<a href='index.php?page=chatAdmin'>Admin Chat</a>
</li>
</ul>
</li>
<li style='float: right;'>
<a href='#'>James Darbyshire</a>
<ul>
<li>
<a href='login.php?logout=yes'>Logout</a>
</li>
<li>
<a href='admin.php'>ToopNet cPanel</a>
</li>
</ul>
</li>
</ul>
</div>

It happens probably once every 8 refreshes - which is too much... Any ideas?

Mark Dickens
9 Mar 2010, 4:43 AM
I had this problem with IE (and I think Webkit browsers too). It appears that the DOM is not completely loaded when onReady fires. I ended up writing my own onDOMReady function to deal with this. I hate reinventing the wheel, but I didn't have time to dig into the Ext Core code to figure this out.

jdarbyshire
9 Mar 2010, 3:13 PM
Thanks Mark - seems that it is an IE problem.

I got around this by moving the onReady JS to the end of the page (After all content).

This appears to have worked... for now...

Very weird behaviour...

Mark Dickens
10 Mar 2010, 4:36 AM
I did something like that. I created an empty span tag at the end of the document called "theEnd" and then check for its existence in my onDOMReady function, if it's there, execute the init function and if it's not there, I set up a setInterval timer to execute every 1/2 second until it finds the span tag and then it clears the interval and executes the init function. That way, I maintain the unobtrusive Javascript concept. May not be the most efficient approach, but hey it works!