ExtJS extension vertical tabLayout implementation code _ extjs

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.