Error in DomQuery - Ext JS

I get the following javascript error in the example code at the end of this post.

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;
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.

<!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  
03-16-2007, 06:25 AM

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.

你可能感兴趣的:(JavaScript,html,css,ext,yui)