1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    2
    Vote Rating
    0
    Maxal is on a distinguished road

      0  

    Default Left or Right aligned Tabs

    Left or Right aligned Tabs


    Hi

    I was wondering if it is possible to position the tabs on the left or right side instead of top and bottom. Is it possible?

    Thanx

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    No that isn't supported. Left/right tabs would be a significant amount of work to get to render properly. It would also take up significantly more screen real estate to stack the tab titles vertically, as opposed to a single row horizontally, unless you resticted the number of characters you were going to display.

  3. #3
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS
    No that isn't supported. Left/right tabs would be a significant amount of work to get to render properly. It would also take up significantly more screen real estate to stack the tab titles vertically, as opposed to a single row horizontally, unless you resticted the number of characters you were going to display.
    I agree it'd require more horizontal screen real estate to accommodate tabs on the left or right, but the benefit is you can potentially display more tabs vertically than you can horizontally. Additionally, there are certain UI design pattern considerations that vertical tabs would address that I think it's worth investigating. I am interested enough in this sort of functionality (for some of my projects) that I've added it to my own personal list of things to get accomplished in Ext. I don't know how soon I'll find the time, but it's a priority to me.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    2
    Vote Rating
    0
    Maxal is on a distinguished road

      0  

    Default


    Quote Originally Posted by JeffHowden
    ...but the benefit is you can potentially display more tabs vertically than you can horizontally. Additionally, there are certain UI design pattern considerations that vertical tabs would address that I think it's worth investigating. I am interested enough in this sort of functionality (for some of my projects) that I've added it to my own personal list of things to get accomplished in Ext. I don't know how soon I'll find the time, but it's a priority to me.
    The point has thus been picked up successfuly. There are many situations which could demand more tabs for which you will have to go vertical rather than staying horizontal. Apart from a genuine necessity, verticle tabs may also be required for designing perspective. I mean for how long you will be using horizontal tabs only?

  5. #5
    Ext User
    Join Date
    Oct 2007
    Posts
    1
    Vote Rating
    0
    PhotoShow.rob is on a distinguished road

      0  

    Default Solution for Left or Right aligned Tabs

    Solution for Left or Right aligned Tabs


    I've come up with a fix to create left aligned tabs for a basic TabPanel.

    The main problem is that the js renders a Table, it should render an Unordered List instead.

    Only 2 basic modifiactions were needed to 2 TabPanel functions, highlighted in RED below. This is still a work in progress for me, but the positioning works:


    Ext.TabPanel.prototype.createStripList = function(strip){

    strip.innerHTML = '<div class="x-tabs-strip-wrap"><ul class="x-tabs-strip"></ul></div>';
    return strip.firstChild.firstChild;
    };


    Ext.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
    var td = document.createElement("li");
    stripEl.appendChild(td);
    if(closable){
    td.className = "x-tabs-closable";
    if(!this.closeTpl){
    this.closeTpl = new Ext.Template(
    '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
    '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
    '<div unselectable="on" class="close-icon">*</div></em></span></a>'
    );
    }
    var el = this.closeTpl.overwrite(td, {"text": text});
    var close = el.getElementsByTagName("div")[0];
    var inner = el.getElementsByTagName("em")[0];
    return {"el": el, "close": close, "inner": inner};
    } else {
    if(!this.tabTpl){
    this.tabTpl = new Ext.Template(
    '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
    '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
    );
    }
    var el = this.tabTpl.overwrite(td, {"text": text});
    var inner = el.getElementsByTagName("em")[0];
    return {"el": el, "inner": inner};
    }
    };



    Now that it's an Unordered List, it easy to modify the CSS to get the list to render a vertical or horizontal tab panel, and float it wherever you like. I'm still waiting on my company's final UI design requirements, but for now, I've got my tabs aligned left in Firefox with the following CSS modifications. Overwriting the background images, perfecting element widths, and applying styles to the UL and LI should allow complete customization to the tab panel.

    .x-tabs-top{border-bottom:none;padding-top:12px;}
    .x-tabs-wrap{border:none;padding-top:2px;width:246px;position: relative; right: -1px;float:left;}
    .x-tabs-strip-wrap{width:246px; border:none;}
    ul.x-tabs-strip-wrap li{text-align:right;}
    .x-tabs-body{border:1px solid #6593cf;border-top:1px solid #6593cf; width:500px; float:right;margin-bottom:12px; height: 300px; min-height: 300px;}
    .tabPanel-width{display:block; width:226px;text-align:right;}

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Location
    Bah
    Posts
    434
    Vote Rating
    0
    efege is on a distinguished road

      0  

    Default


    PhotoShow.rob: Before exploring this by myself... have you tried this fix with Ext 2.0?
    Fernando G

Similar Threads

  1. Right-aligned items in the toolbar
    By soad in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 2 Apr 2007, 5:25 AM
  2. Tab orientation : left
    By Mitu in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 16 Jan 2007, 6:53 AM
  3. Editable Grid - Left or Right Key Behavior
    By hluu in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 19 Oct 2006, 10:32 AM

Thread Participants: 4

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi