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.1\examples\tabs\..

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

    37 Comments to “ExtJS Vertical TabPanel example”

    1. maxNo Gravatar 19 June 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

    2. adminNo Gravatar 19 June 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.

    3. maxNo Gravatar 22 June 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.

    4. adminNo Gravatar 18 July 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.. :)

    5. maxNo Gravatar 27 July 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.

    6. sacNo Gravatar 5 August 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.

    7. sacNo Gravatar 5 August 2010 at 1:45 pm #

      Btw, using ext-3.2.1

    8. adminNo Gravatar 6 August 2010 at 10:22 am #

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

    9. JackNo Gravatar 7 August 2010 at 1:35 am #

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

    10. adminNo Gravatar 9 August 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.

    11. EddieNo Gravatar 4 September 2010 at 10:48 pm #

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

    12. corinNo Gravatar 1 October 2010 at 3:32 am #

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

    13. AKNo Gravatar 6 October 2010 at 4:36 am #

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

      thanks,

    14. adminNo Gravatar 7 October 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 ?

    15. VenEmNo Gravatar 27 October 2010 at 9:07 pm #

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

    16. chris marxNo Gravatar 11 November 2010 at 12:46 pm #

      any way to make the text vertical as well?

    17. adminNo Gravatar 11 November 2010 at 4:03 pm #

      Can you show any screenshot of your idea ?

    18. skarleeNo Gravatar 1 March 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'
      }]
      });

    19. skarleeNo Gravatar 1 March 2011 at 5:40 am #

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

    20. skarleeNo Gravatar 1 March 2011 at 5:43 am #

      Sorry. However FF only :)

    21. TottiNo Gravatar 2 March 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

    22. ArmandoxxxNo Gravatar 4 March 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

    23. soungNo Gravatar 17 May 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

    24. TottiNo Gravatar 18 May 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.

    25. DanielNo Gravatar 3 June 2011 at 11:38 am #

      Hi!

      Nice!

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

      Thanks!

    26. TottiNo Gravatar 5 June 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 :)

    27. PaulWNo Gravatar 21 July 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?

    28. SandraNo Gravatar 25 July 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 :(

    29. TottiNo Gravatar 26 July 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. :)

    30. TottiNo Gravatar 26 July 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.

    31. joostbNo Gravatar 5 December 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

    32. TottiNo Gravatar 5 December 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

    33. SachinNo Gravatar 31 January 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

    34. cooldude1234No Gravatar 29 March 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?

    35. TottiNo Gravatar 29 March 2012 at 10:55 pm #

      No, please use it as you want.

    36. J.R.No Gravatar 8 May 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.

    37. TottiNo Gravatar 12 May 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.


    Leave a Reply