1. #1
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    58
    Vote Rating
    0
    tot2ivn is on a distinguished road

      0  

    Default Vertical Tab Panel - Updated to work w ExtJS 3.3

    Vertical Tab Panel - Updated to work w ExtJS 3.3


    I created this extension called Vertical TabPanel since Ext 3.1.1. As ExtJS currently just supports Horizontal TabPanel.
    Basically this extension works the same way as the regular horizontal TabPanel except I added some CSS tweaks to push the Tab strip to the left.

    I think this is quite useful in many projects.




    Extension v0.2 updated to work with ExtJS 3.3.
    Tested working on IE6+, FF2+, Chrome 4+, Safari 4+, and Opera 10.x

    Check out the live example here

    Download the whole example ( put files in folder : ext-3.3.0\examples\tabs )
    Download the extension code only

    Cheers,

    Totti
    Attached Images
    me.constructor === Frontend.Engineer

  2. #2
    Ext User
    Join Date
    Oct 2008
    Posts
    4
    Vote Rating
    0
    godghdai is on a distinguished road

      0  

    Default


    good work !! thank to share

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,206
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Wonder if you could use CSS3 transforms to rotate the tab so it's actually vertical. CSS3 would rotate the text too. You could see if the browser supports it or not. If it does, rotate it. If not, then use what you have now.

    Just a thought.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    134
    Vote Rating
    4
    demon222 is on a distinguished road

      0  

    Default


    Good job!

    and how it will behave when there are more tabs than the planned region? some paging?
    and if you can set the region on the right side?

    Greetings

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    58
    Vote Rating
    0
    tot2ivn is on a distinguished road

      0  

    Default


    Thank you guys !

    @mitchellsimoen: Yeah, nice idea. I think I could add that functionality to the extension.. but not sure if that's a bit too funky for majority of desktop-like web apps.

    @demon222: yeah, usually the height of each tab title is fixed, so currently, I leave the tab strip cut off if its size is larger than the whole panel's height. I will add some scroller like that of Ext.TabPanel.

    Putting the tab strip on the right would be straight forward..but I think we don't have that many use cases for that tab style, do we ?
    me.constructor === Frontend.Engineer

  6. #6
    Sencha User
    Join Date
    Jan 2009
    Posts
    6
    Vote Rating
    0
    nxminh is on a distinguished road

      0  

    Default


    good work !! thank to share
    but It work on 3.2 ??

  7. #7
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    58
    Vote Rating
    0
    tot2ivn is on a distinguished road

      0  

    Default


    Quote Originally Posted by nxminh View Post
    good work !! thank to share
    but It work on 3.2 ??
    @nxminh: Thanks man. Yes, It works with ExtJS 3.1, 3.2 and 3.3.
    me.constructor === Frontend.Engineer

  8. #8
    Ext JS Premium Member
    Join Date
    Nov 2010
    Location
    Rudolstadt, Germany
    Posts
    52
    Vote Rating
    0
    astuteq is on a distinguished road

      0  

    Default


    Hello,

    great plugin! This is exactly what I'm looking for, but I need the Tab-Strips on the right side. Otherwise I can't use it.

    It seems that this is still not possible? Can this be done? I think this would be a very good improvement and makes this plugin much more useful in many cases.

    Thanks!

    Stefan

  9. #9
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    58
    Vote Rating
    0
    tot2ivn is on a distinguished road

      0  

    Thumbs up


    Quote Originally Posted by astuteq View Post
    Hello,

    great plugin! This is exactly what I'm looking for, but I need the Tab-Strips on the right side. Otherwise I can't use it.

    It seems that this is still not possible? Can this be done? I think this would be a very good improvement and makes this plugin much more useful in many cases.
    Thanks Stephan, I've also received a couple of requests regarding the Tap-Strips on the right.
    Will make an upgrade this week to add this feature in. This shouldn't be a big task.
    me.constructor === Frontend.Engineer

  10. #10
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    great extension, thanks a lot for sharing tot2ivn..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

Similar Threads

  1. How to wrap tab title so that it fits tab width in a Vertical Tab Panel
    By koala.lam in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 21 Oct 2010, 8:39 AM
  2. problems with tab item and vertical panel
    By paopao in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 17 Feb 2009, 2:20 PM
  3. problems with tab item and vertical panel
    By paopao in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 17 Feb 2009, 1:33 PM
  4. [ExtJs 2.1] Tab Panel with shared panel won't work [SOLVED]
    By elnove in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 3 Aug 2008, 12:37 PM

Thread Participants: 14

Tags for this Thread