I get the following javascript error in the example code at the end of this post.
When using Element.child("tagname:first"). Here's the "menu from markup" example I posted in that other thread, using Element.child("ul:first") (which would be a little more elegant than using .select and checking the length of the array):
Could I also suggest a new function Element.children()? Element.select("li") produced all descendant <LI> elements. What is needed is direct children. I used Element.select(">li"), but a children() function alongside child() which only selected from the child nodes would be nice.
cs has no properties nodup(undefined)ext-all-debug.js (line 748) (no name)(li)ext-all-debug.js (line 892) select("ul:first", li, undefined)ext-all-debug.js (line 912) selectNode("ul:first", li)ext-all-debug.js (line 922) child("ul:first", undefined)ext-all-debug.js (line 2126) (no name)()from-markup.html (line 26) each(function(), undefined)ext-all-debug.js (line 4544) constructMenu(Object dom=ul#ext-gen8 id=ext-gen8 visibilityMode=1, undefined)from-markup.html (line 15) (no name)()from-markup.html (line 28) each(function(), undefined)ext-all-debug.js (line 4544) constructMenu(Object dom=ul#menu-main id=menu-main visibilityMode=1, function())from-markup.html (line 15) (no name)()from-markup.html (line 37) fire()ext-all-debug.js (line 1382) fireDocReady()ext-all-debug.js (line 1411) [Break on this error] var len = cs.length, c, i, r = cs, cj;
Could I also suggest a new function Element.children()? Element.select("li") produced all descendant <LI> elements. What is needed is direct children. I used Element.select(">li"), but a children() function alongside child() which only selected from the child nodes would be nice.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Menu from markup</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../yui-utilities.js"></script> <script type="text/javascript" src="../../ext-yui-adapter.js"></script> <script type="text/javascript" src="../../ext-all-debug.js"></script> <script type="text/javascript"> function constructMenu(e, clickHandler) { e = Ext.get(e); var items = [ ]; e.select('>li').each( function() { // set current item properties var link = this.child('a:first', true); var currentItem = { text: link.innerHTML, cls: link.className, id: link.id, handler: clickHandler, }; // Check for sub menu. var s = this.child('ul:first'); if (s) { currentItem.menu = {items: constructMenu(s, clickHandler)}; } items.push(currentItem); }); return items; } Ext.onReady(function() { var m = new Ext.menu.Menu({id: "the-menu", items: constructMenu("menu-main", function(){alert("clicked")})}); Ext.get("menu-main").remove(); m.render(); m.show(Ext.get("container")); }); </script> </head> <body> <h1>Menu from markup</h1> <div id="container"> </div> <ul id="menu-main">[*] <a class="menu-top">Simple Menu</a> <ul>[*]<a>item 1b</a>[*]<a>item 2b</a>[*]<a>item 3b</a>[*]<a>item 4b</a>[/list] [*] <a class="menu-top">Nested menu</a> <ul>[*]<a id="item1">item 1</a>[*]<a id="item2">item 2</a>[*]<a id="item3">item 3</a> <ul>[*]<a>subitem a</a>[*]<a>even another level</a> <ul>[*]<a>foo</a>[*]<a>bar</a>[*]<a>lorem</a>[*]<a>ipsum</a>[/list] [/list] [*]<a id="item4">item 4</a>[/list] [/list]</body> </html>

#2
![]() |
![]() I like the direction this example is headed in.
![]() Using > or / to get direct children is the default way primarily because you can use that same syntax to go multi levels deep with children. e.g. el.child('/ul.foo/li.bar') or el.child('> ul.foo > li.bar'). Plus do we really want a seperate function just to prepend a > or / ? The error you are receiving has been fixed. I ran into it to. The problem was n becomes undefined if there is no first (or nth and others). I will have new rev soon with the fix. ![]() |