Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Diagramatical overview

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    123
    Vote Rating
    0
      0  

    Default Diagramatical overview

    Hi,

    Can you provide a diagramatical schema of the YUI framework/ YUI-ext framework (like we usually have in VS 2005). This would help us get an overview of the connection between various classes and interaction between them.

    The diagram for the container.js in the yui page is very basic but atleast good for a start.

    This is necessary when one needs to build upon the existing controls to have a customized one (like say for the tab control, i need it to be scrollable?). Unless one has a basic idea of the underlying stucture, he/she cannot build upon it!

    So, it my suggestion as to include a diagramatic schema also with the documentation ( both in YUI and YUI-ext).

    BTW is there a tool which could reverse-engeenier the js files, guess that would make our job easier..

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    The tools for JS are rather limited but I will look into it further.

    To make a TabPanel scrollable you can set a height + overflow:atuo on the body. In one of the examples I've done that.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    123
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by jacksloc
    The tools for JS are rather limited but I will look into it further.

    To make a TabPanel scrollable you can set a height + overflow:atuo on the body. In one of the examples I've done that.
    You got me wrong. I do not want the Tab Panels content to be scrollable.
    The problem here is, i want to add as many tabs as user wants to the control, but assume that width of tab panel is some fixed pixel(say 500px).
    Now a time comes when the width for the tabset goes beyond my body width and here comes the problem to make it scrollable. here the scrolling is done for the tabs itself rather than content ( hope u getting my point).
    Try it out - just try this and u might understand the problem
    Code:
    #jtabs {width:450px;}
    
    javascript
    var jtabs = new YAHOO.ext.TabPanel('jtabs');
    jtabs.addTab('jtabs-1', "Settings");
    jtabs.addTab('jtabs-2', "Staffing");
    jtabs.addTab('jtabs-3', "Financials -  I am very big to fit into the tab width");
    here tabset scrolling would have a better effect

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    I see what you mean. If you get that implemented please send me the code. I'd like to see it and possibly integrate it?

    Jack

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    79
    Vote Rating
    0
      0  

    Default

    I'd be interested as well

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    79
    Vote Rating
    0
      0  

    Default

    Hi Jack,

    This is my first try to solve it:
    Code:
    YAHOO.ext.TabPanelEx = function(container, width, scrollBy){
    	YAHOO.ext.TabPanelEx.superclass.constructor.call(
    		this, 
    		container
    	);
    	this.width = width;
    	this.scrollBy = scrollBy || 100;
    	this.addScroller();
    }
    
    YAHOO.extendX(YAHOO.ext.TabPanelEx, YAHOO.ext.TabPanel, {
    	addScroller : function(){
    		var w = 25;
    		var stripBox = this.stripWrap.getBox();
    		var elBox = this.el.getBox();
    		
    		stripBox.width = elBox.width - w;
    		this.stripWrap.setWidth(stripBox.width);
    		this.stripWrap.setStyle('position', 'relative');
    		//how to calc it automatically???
    		this.stripEl.setWidth(this.width || elBox.width);
    		
    		this.stripWrap.clip();
    		
    		//--------------------------------
    		var scroller = document.createElement('div');
    		YAHOO.util.Dom.setStyle(scroller, 'width', w);
    		
    		var scrL = document.createElement('span');
    		scrL.innerHTML = '«';
    		var scrR = document.createElement('span');
    		scrR.innerHTML = '»';
    		
    		YAHOO.util.Dom.setStyle([scrL, scrR], 'font-size', '150%');
    
    		var animL = new YAHOO.util.Scroll(this.stripWrap.dom, { scroll: { by: [-this.scrollBy, 0] } });
    		YAHOO.util.Event.on(scrL, 'click', animL.animate, animL, true);
    		var animR = new YAHOO.util.Scroll(this.stripWrap.dom, { scroll: { by: [this.scrollBy, 0] } });
    		YAHOO.util.Event.on(scrR, 'click', animR.animate, animR, true);
    		
    		scroller.appendChild(scrL);
    		scroller.appendChild(scrR);
    		
    		this.stripWrap.dom.parentNode.appendChild(scroller);
    		var id = YAHOO.util.Dom.generateId(scroller, 'scroller');
    		var scEl = getEl(id);
    		scEl.setStyle('position', 'absolute');
    		scEl.setStyle('left', (stripBox.x + stripBox.width - 2) + 'px' );
    		scEl.setStyle('top', (stripBox.y - 5) + 'px');
    	}
    });
    Have a look

    Alex

  7. #7
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    Alex, I dropped it into my tabs example page locally and changed the width to 200 pixels to trigger scrolling.



    Did I miss something? Is there a CSS change I need to disable the wrapping?

    BTW, your code and very nice and well organized. I like it.

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    79
    Vote Rating
    0
      0  

    Default

    Use it like this:
    Code:
    var jtabs = new YAHOO.ext.TabPanelEx('jtabs', 1000/*tab strip width, not tab body*/);
    I couldn't solve the problem of calculating the width and left this comment in the code
    //how to calc it automatically???

  9. #9
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    tabstrip.scrollWidth

    If the scrollWidth <= the offsetWidth, the scrollers should probably be hidden.

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    79
    Vote Rating
    0
      0  

    Default

    tabstrip width on the screen (offsetWidth) is equal to its container width.

    The tabstrip width that I need is the width of the tabstrip UL in ONE row which is different from the width above. I thought about cloning the list and putting it in another div and getting it's offsetWidth.

    Or there may be other alternatives.

Page 1 of 2 12 LastLast

Similar Threads

  1. Firebug Debugging Overview
    By brian.moeskau in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 19 Jan 2007, 10:08 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •