ExtJS extension vertical tabLayout implementation code

However, the TabPanel in ExtJS can only be displayed horizontally. After searching for the Ext forum, we found that the vertical TabLayout extension exists, but the tab content of the vertical tab is displayed horizontally, after the tab is added, you cannot set the enableScroll attribute to scroll. To meet the project requirements, I have expanded TabLayout to support vertical tab display, supports scrolling when many tabs exist. The effect is as follows:

This component can be used in two ways: Extended Mode and rewrite mode. In the same directory, you must create Ext. ux. TabPanel when creating components;
Example:
Copy codeThe Code is as follows:
Aa = new Ext. ux. TabPanel ({
TabPosition: 'left ',
AutoScroll: true,
DeferredRender: false,
ActiveTab: 0,
EnableTabScroll: true,
ApplyTo: 'aaa ',
Items :[
Bb = new Ext. Panel ({layout: 'fit ',
Title: 'Basic information ',
IconCls: 'aaa ',
Closable: true,
Html: 'Basic information'
}), Cc = new Ext. Panel ({layout: "fit ",
Title: "basic materials ",
Closable: true,
Html: 'Basic information'
})]
});

In the same directory, you must create Ext. TabPanel when creating components.
Example:
Copy codeThe Code is as follows:
Aa = new Ext. TabPanel ({
TabPosition: 'left ',
AutoScroll: true,
DeferredRender: false,
ActiveTab: 0,
EnableTabScroll: true,
ApplyTo: 'aaa ',
Items :[
Bb = new Ext. Panel ({layout: 'fit ',
Title: 'Basic information ',
IconCls: 'aaa ',
Closable: true,
Html: 'Basic information'
}), Cc = new Ext. Panel ({layout: "fit ",
Title: "basic materials ",
Closable: true,
Html: 'Basic information'
})]
});

The tabPosition attribute also supports top/right/bottom/left.

Attachment description:
TabPanel. js extension Ext. TabPanel
Related methods in TabPanel2.js re-writing Ext. TabPanel
Ext-patch.css the css used by the component in this article
*. Gif is the two scroll button images required when the enableScroll attribute is set.
Package download