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

37 thoughts on “ExtJS Vertical TabPanel example”

  1. 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'
    }]
    });

    1. @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

  2. 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

  3. 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

    1. 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 :)

  4. 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?

    1. 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. :)

  5. 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 :(

  6. 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

  7. 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?

  8. 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.

    1. 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.

  9. 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

  10. @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.

  11. 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.

  12. @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.. :)

  13. 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.

  14. 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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>