1. #1
    Ext User alanwilliamson's Avatar
    Join Date
    Mar 2007
    Location
    Scotland
    Posts
    61
    Vote Rating
    0
    alanwilliamson is on a distinguished road

      0  

    Default Tree Menu no longer working 1.0a

    Tree Menu no longer working 1.0a


    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

    Code:
    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:

    Code:
    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. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    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. #3
    Ext User alanwilliamson's Avatar
    Join Date
    Mar 2007
    Location
    Scotland
    Posts
    61
    Vote Rating
    0
    alanwilliamson is on a distinguished road

      0  

    Default


    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. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    He just meant that you have to use the dom property of the el passed to the function
    Code:
    // 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.
    });

  5. #5
    Ext User alanwilliamson's Avatar
    Join Date
    Mar 2007
    Location
    Scotland
    Posts
    61
    Vote Rating
    0
    alanwilliamson is on a distinguished road

      0  

    Default


    Fantastic ... another happy bunny. Thank you.

    For completeness of the thread, here is the changed method, works a treat

    Code:
    classes.select('h3').each(function(el){
      var c = new NavNode(el.dom);
      if(!/^(?:Assets|Portfolios|Settings)$/.test(el.dom.innerHTML)){
        c.collapse();
      }
    });

Similar Threads

  1. Tree dragdrop not working using IE
    By liotrox in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 8 Jan 2007, 11:26 AM
  2. Tree 'selectionchange' event is not working
    By liotrox in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 5 Jan 2007, 9:20 AM
  3. Example of Tree Menu ?
    By peter_n in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 5 Jan 2007, 8:09 AM
  4. Menu Tree
    By jfaust97 in forum Ext 1.x: Help & Discussion
    Replies: 6
    Last Post: 20 Dec 2006, 5:01 AM
  5. MENU TREE....
    By genius551v in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 10 Oct 2006, 9:54 PM

Thread Participants: 2