Recently, when I was working on a project, ExtJS was used in the project. Some content should be displayed by tab. For project requirements, the tab can only be vertically distributed, but the TabPanel in ExtJS can only be horizontally displayed, after searching for the Ext forum, we found the vertical TabLayout extension, but the vertical tab content 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:
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 materials ",
Closable: true,
Html: 'Basic information'
})]
});
In the same directory, you must create Ext. TabPanel when creating components.
Example:
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 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