ExtJS extension vertical tabLayout implementation code_extjs

But the TabPanel in ExtJS can only be displayed horizontally. I searched the Ext forum and found that there is an extension of vertical TabLayout, but the tab content of the vertical tab is displayed horizontally, and even if there are too many tabs, it cannot be enabled by setting the enableScroll attribute. Scroll, in order to meet the needs of the project, I extended TabLayout to support vertical tab display and support scrolling of tabs when there are many tabs. The effect is as follows:

There are two ways to use this component, one is the extension method, the other is the copy method. The first method requires the introduction of TabPanel.js and ext-patch.css in the attachment. At the same time, the two images need to be placed in the same directory as ext-patch.css. When creating the component, you need to create Ext.ux.TabPanel;
Example:

Copy code The 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 information",
closable: true,
html: 'Basic Information'
})]
});

The second method requires the introduction of TabPanel2.js and ext-patch.css in the attachment, and the two images need to be placed in In the same directory as ext-patch.css, you need to create Ext.TabPanel when creating components.
Example:

Copy code The 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 information",
closable: true,
html: 'Basic information '
})]
});

The two usage methods have the same effect, and the tabPosition attribute supports top/right/bottom/left at the same time.

Attachment file description:
TabPanel.js extends Ext.TabPanel
TabPanel2.js overrides the relevant methods in Ext.TabPanel
ext-patch.css css used in the component of this article
*.gif is the two scroll button images required when the enableScroll attribute is set
Package and download