ExtJS Vertical TabPanel example

Currently, ExtJS 3.1.1 doesn’t support Vertical TabPanel. Here is my simple custom Vertical TabPanel ux class. Currently, it supports the same set of features as Ext.Tabpanel except advanced auto tab-scrolling feature. Default position is “left”.

Tested working on FF2+, IE6+, Chrome 4, Safari 4, and Opera 10.

You can put the source files in ExtJS Tabs folder to test: ext-3.1.1examplestabs..

Check out the live example here

Download the whole example
Download the extension code only

21/10/2010 : Released v0.2. Updated to work with ExtJS 3.3

02/03/2011 : Released v0.21. CSS minor bugs fixed.

Cheers,

Totti

Tags: , ,

37 Responses to “ExtJS Vertical TabPanel example”

  1. skarlee March 1, 2011 at 5:31 AM #

    Something strange happens when exists a tab with textarea or html xtype component inside. I can’t move to line below or above using keys up/down. When i press key down, cursor moves to the end of text, key up moves to the begining of the text.

    Example code:

    var tabs = new Ext.ux.tot2ivn.VrTabPanel ({
    renderTo: ‘tabs1′,
    width: 450,
    activeTab: 0,
    items: [{
    xtype: 'textarea',
    anchor: '100%',
    height: 400,
    value: '',
    title: 'tab1',
    name: 'plain_content',
    hiddenName: 'plain_content'
    }]
    });

  2. skarlee March 1, 2011 at 5:40 AM #

    I forgot add. Problem occurs in Firefox and IE, Chrome is ok.

  3. skarlee March 1, 2011 at 5:43 AM #

    Sorry. However FF only :)

    • Totti March 2, 2011 at 1:10 PM #

      @skarlee: Hi Skarlee, thanks for pointing out the bug.
      There is actually a CSS style (in Ext.ux.tot2ivn.VrTabPanel.css) that causes the problem:
      Line 27: -moz-user-select:none;

      Please remove this and the issue is solved.
      I intentionally added this in to disallow users from selecting text on the ground div. However, it seems to have issue with textarea.

      Update the minor fix in version 0.21.

      Thanks,
      Totti

  4. Armandoxxx March 4, 2011 at 10:29 PM #

    Dude great extension ! thank you !

    just a little css fix for version 0.22

    .ux-vertical-tabs .x-tab-panel-body{
    padding:0px; //removed 5px paddng !!!
    border:0;
    }

    cause if I want to fit sub components inside I don’t want to have paddings.
    regards
    Armando

  5. soung May 17, 2011 at 12:50 AM #

    hi totti. i’am having a issu. i think it’s caused by css error. Firebug console shows “syntax error” for the first css class. result the verticaltab panel looks like a horizontal one.
    what can this issu be?
    thank you

    • Totti May 18, 2011 at 1:08 PM #

      Can you show your panel config code ?
      If you use the version 0.21.. I think it should be fine as in the demo.

  6. Daniel June 3, 2011 at 11:38 AM #

    Hi!

    Nice!

    1- Can it work with ext-js4?
    2- Can you have the text vertical too?

    Thanks!

    • Totti June 5, 2011 at 10:34 PM #

      Hi Daniel,

      1. Unfortunately, I haven’t tested it with ExtJS 4 as the projects in which I use this tabpanel are all ExtJS 3-based.

      2. Currently, I don’t have a plan to add fancy features to this extension. It’s still quite simple and matches the most common use case of vertical tabpanel.

      Thanks for coming by :)

  7. PaulW July 21, 2011 at 4:08 AM #

    Hi Totti. I really love your vertical tab panel extension. I have it working in a few applications I have created here, and it does the job very well. I am considering migrating some of the stuff I have in ExtJS 3.4 to ExtJS 4. Do you have any plans to get your awesome vertical tab panel working for ExtJS 4?

    • Totti July 26, 2011 at 11:23 AM #

      Hello Paul, thanks for your comment. Currently, I’ve been a bit away from the ExtJS development so I can not guarantee any plan about the migration to ExtJS4. :)

  8. Sandra July 25, 2011 at 8:31 PM #

    Is there a way to make the blue background part of the menu list not so wide? I just want to use an icon for the tabs but the width still is the same and I cant fix it :(

    • Totti July 26, 2011 at 11:25 AM #

      Hi Sandra, please use the config property “tabWidth” to configure the width of the tabstrips. By default, it’s 150.

  9. joostb December 5, 2011 at 4:42 AM #

    Thanks for the post, I was looking for something similar in ext-gwt, didn’t exist so I started converting your code to ext-gwt.
    Almost got is working, cfr http://www.sencha.com/forum/showthread.php?159766-A-VerticalTabPanel-for-EXT-GWT&p=685471#post685471

    • Totti December 5, 2011 at 5:20 AM #

      Hi,
      I’m happy to see you converting it into a GWT component.
      Looking forward to the final release !
      Totti

  10. Sachin January 31, 2012 at 6:41 PM #

    I am trying to make it compatible for EXtJS4 but i am getting one error in ext-all-debug.js. I am not able to trace error source in VrTabPanel.js file. please advise.

    Error:
    comp.getItemId is not a function

  11. cooldude1234 March 29, 2012 at 10:53 PM #

    I would like to use this on my company’s website. Before I do, the bureaucrats want to make sure there’s no licensing issues. Do you have any licensing restrictions on this code?

    • Totti March 29, 2012 at 10:55 PM #

      No, please use it as you want.

  12. J.R. May 8, 2012 at 8:01 PM #

    Very useful plug-in.

    Do you have any plans to make it work with ExtJS 4.1? There seems to be no component that does this.

    Thanks in advance.

    • Totti May 12, 2012 at 3:09 PM #

      I currently don’t have a plan to make it work with ExtJS 4 but if you need to make it customize/make it work w ExtJS 4, please email me, I will give you a quote for that.

  13. max June 19, 2010 at 12:05 AM #

    Thank you for the great extantion. It works perfectly on always all browsers execpt IE8. The content of a tab is shown under the tabs list. Could you please give an advice on how to fix it?

    Thank you

  14. admin June 19, 2010 at 12:47 AM #

    @max: According to the sample example above, it works on IE8, however, there is a chance that the nested components inside the VrTabPanel has some CSS class conflicts. (I couldn’t test all combinations of components). One of the users has found that kinda bug, and I’m gonna fix that minor bug in the next release soon.

    Can you provide me your case when it doesn’t work on IE8 ? I’m sure can reply you soon with a fix.

  15. max June 22, 2010 at 12:06 AM #

    Thank you for the quick response.
    I can reproduce it even in your live example. When you open it try to turn on/off IE8 compatibility mode. It looks good when this mode is turned on, but when it is turned off I see that content area is moved down, and its top is aligned with the bottom of the last vertical tab.
    Thank you.

  16. admin July 18, 2010 at 6:42 PM #

    @max: Probably you have some CSS problems with the nested components inside the VerticalTabPanel as I’ve tested and used this extension on IE8 (w and w/o compatibility mode), it looks the same on both.. :)

  17. max July 27, 2010 at 3:16 AM #

    I have finally found out the way how to reproduce the behavior I described earlier. And I’m not sure if it can be counted like a bug in the plug-in. So this is just to let you know. Here are the steps: Open up your demo page in IE8 browser, change to zoom level in the browser (hit Ctrl -) to something less than 100%, switch compatibility mode on/off and you should see the difference.
    Sorry for bugging you and thank you for the great plug-in.

  18. sac August 5, 2010 at 1:44 PM #

    Getting the following error: Ext.ux.VrTabPanel is not a constructor

    Pasted all the files in the zip, overridden the existing files, when ran the tabs.html I received above error.

    Urgent help plz.

  19. sac August 5, 2010 at 1:45 PM #

    Btw, using ext-3.2.1

  20. Jack August 7, 2010 at 1:35 AM #

    I’ve never heard of this ExtJS, wonder what’s it?

  21. Eddie September 4, 2010 at 10:48 PM #

    Very nice ExtJS extension indeed. Thanks Totti, this is exactly what I need for my current project !

  22. corin October 1, 2010 at 3:32 AM #

    Great job, man. This is the TabPanel extension I’m looking for.

  23. AK October 6, 2010 at 4:36 AM #

    Hi,
    I need horizontal tabs on the rightmost side of a Panel.
    Can someone help me on this?

    thanks,

  24. VenEm October 27, 2010 at 9:07 PM #

    Sei grande come il Capitano!!! Grazie per questo ottimo esempio!

  25. chris marx November 11, 2010 at 12:46 PM #

    any way to make the text vertical as well?

  26. admin August 6, 2010 at 10:22 AM #

    Looks like you haven’t included the .js file. Have you tried running the demo locally ?

  27. admin August 9, 2010 at 1:43 PM #

    It’s a great JS library having tons of cool UI components :) I use it for some of my current projects @ work.

  28. admin October 7, 2010 at 11:01 PM #

    Hmm, this is strange. But actually I could help with this. Just some CSS tweak.
    Can you provide some screenshot or example ?

  29. admin November 11, 2010 at 4:03 PM #

    Can you show any screenshot of your idea ?

Leave a Reply

Current month ye@r day *