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

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

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

11/2014: The open-source code has been removed following a request from one of my previous companies.

 

Cheers,

Totti

, ,

  • skarlee

    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’
    }]
    });

  • skarlee

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

  • skarlee

    Sorry. However FF only :)

    • @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

  • Armandoxxx

    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

  • soung

    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

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

  • Daniel

    Hi!

    Nice!

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

    Thanks!

    • 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 :)

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

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

  • Sandra

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

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

  • joostb

    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

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

  • Sachin

    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

  • cooldude1234

    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?

    • No, please use it as you want.

  • J.R.

    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.

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