PDA

View Full Version : Suckerfish menu and ExtJs



metan
5 Jul 2010, 11:21 AM
Hi,

would like to rebuild the suckerfish menue: http://www.htmldog.com/articles/suckerfish/dropdowns/example/
The only short problem is this js:


sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
I have convert it into extJs-code:


sfHover = function() {
var sfEls = Ext.query("li","nav");
for (var i=0; i < sfEls.length; i++) {
var el = Ext.get('nav').select("li:nth(" + i + ")");
el.on({
'mouseover' : function() {
el.addClass("sfhover");
},
'mouseout' : function() {
el.removeClass("sfhover");
}
});
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
But it is not working well and I am sure there is a mistake, but where.

Regards
Metan

Animal
5 Jul 2010, 11:41 AM
This is an Ext Core question is it? Not ExtJS?

metan
5 Jul 2010, 11:44 AM
Yes, if I don't include the Ext Core it works well, but the core is needed for other applications.

What can I do?

Metan

Animal
5 Jul 2010, 11:47 AM
Use Element.addClassOnOver

Animal
5 Jul 2010, 11:48 AM
And surely

var el = sfEls[i];

!!! Why query the DOM again?

Animal
5 Jul 2010, 11:50 AM
And to get all <li> elements under ID nav, the selector is "#nav li"

Read the docs and you would know.

metan
5 Jul 2010, 12:14 PM
Hi,

here is the working result:



sfHover = function() {
var sfEls = Ext.query("#nav li");
for (var i=0; i < sfEls.length; i++) {
var el = Ext.get(sfEls[i]);
el.addClassOnOver("sfhover");
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


Thank to Animal.

Metan

Animal
5 Jul 2010, 12:31 PM
Simpler:



Ext.select("#nav li").addClassOnOver("sfhover");


CompositeElement! Check it.