PDA

View Full Version : Tree Menu no longer working 1.0a



alanwilliamson
22 Feb 2007, 4:14 AM
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
22 Feb 2007, 6: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).

alanwilliamson
22 Feb 2007, 8:38 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).

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
22 Feb 2007, 8: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.
});

alanwilliamson
22 Feb 2007, 9: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();
}
});