Tree Menu no longer working 1.0a - Ext JS

I like the simplicity of the menu bar that is in the documentation, so I was using it for a project. However it worked fine in 0.4 but its not working in 1.0a

setupTree : function(){
	var classes = Ext.get('classes');
	classes.on('click', classClicked );
	classes.select('h3').each(function(el){
		var c = new NavNode(el);
		if(!/^(?:Assets|Portfolios|Settings)$/.test(el.innerHTML)){
			c.collapse();
		}
	});
	$('classes').style.display = "";
},


var NavNode = function(clickEl, collapseEl){
	this.clickEl = Ext.get(clickEl);
	if(!collapseEl){
		collapseEl = this.clickEl.dom.nextSibling;
		while(collapseEl.nodeType != 1){
			collapseEl = collapseEl.nextSibling;
		}
	}

	this.collapseEl = Ext.get(collapseEl);
	this.clickEl.addClass('collapser-expanded');

	this.clickEl.on('click', function(){
		this.collapsed === true ? this.expand() : this.collapse();
		}, this);
};

NavNode.prototype = {
	collapse : function(){
		this.collapsed = true;
		this.collapseEl.setDisplayed(false);
		this.clickEl.replaceClass('collapser-expanded','collapser-collapsed');
	},

	expand : function(){
		this.collapseEl.setDisplayed(true);
		this.collapsed = false;
		this.collapseEl.setStyle('height', '');
		this.clickEl.replaceClass('collapser-collapsed','collapser-expanded');
	}
};

and here is the error:

collapseEl has no properties
NavNode(Object dom=body#yui-gen0.ext-gecko id=yui-gen0, null)secure (line 295)
(no name)(Object dom=body#yui-gen0.ext-gecko id=yui-gen0)secure (line 182)
CompositeElement(function(), undefined)ext-all.js (line 22)
setupTree()secure (line 181)
Element()ext-all.js (line 20)
CustomEvent()event-min.js (line 1)
CustomEvent()event-min.js (line 1)
[Break on this error] while(collapseEl.nodeType != 1){

Looking at in Firebug, 'collapeEl' is null. Did I miss anything in the "port" from 0.4 to 1.0?

thank you

#2   02-22-2007, 08:33 AM

You will need to grab the "dom" property. I had to make this change in the docs as well. each() on the composite element now passes the flyweight Element (not the raw dom node).

#3   02-22-2007, 10:38 AM

Quote: Originally Posted by jacksloc You will need to grab the "dom" property. I had to make this change in the docs as well. each() on the composite element now passes the flyweight Element (not the raw dom node). Great thanks Jack -- and how does one do that exactly! Is there a preliminary 1.0a docs anywhere, or should i be using the 0.40 as reference?

#4   02-22-2007, 10:47 AM

He just meant that you have to use the dom property of the el passed to the function // els is your array of elements els.each(function(el) { el.setStyle('borderColor', 'blue'); // native Element fns el.dom.innerHTML = 'foo'; // or talk directly to dom if needed. }); __________________ Tim Ryan - Ext JS Support Team Read BEFORE posting a question / posting a Bug Use Google to Search - API / Forum API Doc (3.x | 2.x | 1.x) / FAQ / Wiki / Tutorials / 1.x->2.0 Migration Guide

#5   02-22-2007, 11:12 AM

Fantastic ... another happy bunny. Thank you. For completeness of the thread, here is the changed method, works a treat classes.select('h3').each(function(el){ var c = new NavNode(el.dom); if(!/^(?:Assets|Portfolios|Settings)$/.test(el.dom.innerHTML)){ c.collapse(); } });