Tree Menu no longer working 1.0a

[alanwilliamson]

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

[jack.slocum]

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

[alanwilliamson]

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?

[tryanDLS]

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

[alanwilliamson]

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();
  }
});