Ext. tab. Panel tab of ExtJs4 notes

Ext. tab. Panel tab of ExtJs4 notes

This topic describes the tab controls.

1. Basic Tab

First, we define a basic Tab control. Each Tab has its own differences. The main content of the Tab can be obtained in three ways:

1. Basic Methods:By defining html and items.

2. Read Other html information:By setting contentEl, you can obtain other html information as the current tab body.

3. Read server data:Get server data asynchronously by defining autoLoad.

In addition, you can set whether to close each tab, the event when entering the tab, and whether the tab is available. For details, see the code: carefully developed the UI front-end framework for five years!

Basic Tab
The content displayed by this tab is read to other HTML tags.
                        

// 1. basic tab var tabs1 = Ext. createWidget ('tabpanel ', {renderTo: "tabpanel", activeTab: 1, // specify the default activity tab width: 600, height: 120, plain: true, // True indicates that there is no background image on the tab candidate bar (false by default) enableTabScroll: true, // if there are too many tabs, you can scroll ults: {autoScroll: true}, items: [{id: "tab1", title: 'common tab', html: "This is just a very common Tab. ", Items: [{xtype: 'button ', text:' button '}], closable: true // This tab can be closed}, {id:" tab2 ", title: 'content to div ', contentEl: 'onetab' // specifies the html element from which the current tab body is read.}, {id: "tab3", title: 'ajax tab', autoLoad: {url: 'ajaxtabcontent', params: {data: "parameters passed from the client"}, method: 'get' }}, {id: "tab4", title: 'event tab', listeners: {activate: handleActivate}, html: "Tab with event. "}, {Id:" tab5 ", title: 'unavailable tab', disabled: true, html:" unavailable Tab, you cannot see me. "}]}); // Click the event function handleActivate (tab) {alert (tab. title + ': activated event triggered after tab4. ');}

Let's take a look at the generated tab effect: a 5-year UI front-end framework is carefully developed!

Ii. Operation Tab

After a tab is generated, we can use js to operate on it, such as dynamically adding, deleting, and inserting tabs, and setting activity tabs. Let's take a look at the specific implementation method:

Operation Tab

Var index = 0; // Add a TabExt. createWidget ("button", {text: "adding a Tab", renderTo: 'content2', handler: function () {tabs1.add ({title: 'New tab' + (++ index), id: "newTab" + index, html: 'tab text part' + (index) +'

', Closable: true}) ;}}; // insert a TabExt. createWidget ("button", {text: "Insert a new Tab at location 2", renderTo: 'content2', handler: function () {tabs1.insert (2, {title: 'New tab' + (++ index), id: "newTab" + index, html: 'tab text part' + (index) +'

', Closable: true}) ;}}; // delete a TabExt. createWidget ("button", {text: "Delete the Tab at location 2", renderTo: 'content2', handler: function () {tabs1.remove (2 );}}); // Delete the TabExt with the id "tab1. createWidget ("button", {text: "Delete the Tab with id" tab1 "", renderTo: 'content2', handler: function () {tabs1.remove ("tab1") ;}}); // Delete the TabExt. createWidget ("button", {text: "set the third Tab as the active tab", renderTo: 'content2', handler: function () {tabs1.setActiveTab (2 );}

Effect: a 5-year UI front-end framework has been developed!

3. Click the tab button below

The default tab button is on the top. We can define the position of the tab button at will. The following Code demonstrates the specific usage: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHByZSBjbGFzcz0 = "brush: java;"> the tab button is below

// Click the tab button at the bottom of var tabs3 = Ext. createWidget ('tabpanel ', {renderTo: "content3", activeTab: 0, width: 600, height: 150, tabPosition: 'bottom' // specifies the position of the tab, left, right}); for (var I = 0; I <3; I ++) tabs3.add ({title: 'tab' + I, id: "Tabs3 _" + I, html: 'tab text part' + (index) +'

', Closable: true

Effect:

4. Drag tabs

Through the official extension package, we can enhance the ease-of-use of tab controls. For example, we can now implement the function of dragging the tab button:

Detachable Tab

// First, dynamically load the ux extension jsExt. loader. setConfig ({enabled: true}); Ext. loader. setPath ('ext. ux ','/ExtJs/ux '); Ext. require (['ext. tip. quickTipManager ', 'ext. tab. panel ', 'ext. ux. tabScrollerMenu ', 'ext. ux. tabReorderer ', 'ext. ux. tabCloseMenu ', 'ext. ux. groupTabPanel ']); // The following is the function code. // you can drag the tab var tabs4 = Ext. createWidget ('tabpanel ', {renderTo: "content4", activeTab: 0, width: 600, height: 150, plugins: Ext. create ('ext. ux. tabReorderer '), items: [{xtype: 'panel', title: 'tab cannot be dragged ', html: "This tab cannot be dragged", reorderable: false, closable: true}]}); for (var I = 0; I <3; I ++) tabs4.add ({title: 'tab' + I, id: "Tabs4 _" + I, html: 'tab text part' + (index) +'

'

The following figure shows that a tab has been moved:

5. menu display with too many tabs

If the tabs on the panel are too open to be displayed, You need to display the overflow tabs in the menu mode. The implementation method is as follows. Pay attention to introducing the extended css style: well-developed 5-year UI front-end framework!

Menu display with too many tabs

// When too many tabs overflow, The Menu displays var tabs5 = Ext. createWidget ('tabpanel ', {renderTo: "content5", activeTab: 0, width: 600, height: 150, plugins: Ext. create ('ext. ux. tabScrollerMenu ', {maxText: 15, pageSize: 5}), items: [{title: 'tab0', html: 'First tab'}]}); Ext. defer (function () {var myTabs = []; for (var I = 0; I <15; I ++) {myTabs. push ({title: 'tab' + I, id: "Tabs5 _" + I, html: 'tab text part' + (index) +'

'});} Tabs5.add (myTabs);}, 1000 );

Effect:

6. Right-click a tab

Generally, you can right-click the tab button to close additional tabs. You can also do this in ext. The implementation method is as follows:

Right-click a tab

// Right-click the tab and choose var currentItem; var tabs6 = Ext. createWidget ('tabpanel ', {renderTo: "content6", activeTab: 0, width: 600, height: 150, plugins: Ext. create ('ext. ux. tabCloseMenu ', {closeTabText: 'close current', closeOthersTabsText: 'close others', closeAllTabsText: 'close all ', extraItemsTail: ['-', {text: 'close ', checked: true, hideOnClick: true, handler: function (item) {currentItem. tab. setClosable (item. checked) ;}}], listeners: {aftermenu: function () {currentItem = null ;}, beforemenu: function (menu, item) {var menuitem = menu. child ('* [text = ""]'); currentItem = item; menuitem. setChecked (item. closable) ;}}), items: [{title: 'tab1', html: 'First tab'}, {title: 'tab2', closable: true, html: 'Second tab'}, {title: 'tab3', closable: true, html: 'Third tab'}]});

Effect:

VII. Grouping Tab

We can also group tabs as follows: a 5-year UI front-end framework is carefully developed!

Grouping Tab

// Grouping tab var tabs7 = Ext. create ('ext. ux. groupTabPanel ', {activeGroup: 0, // sets the current activity group items: [{expanded: false, mainItem: 1, // sets the main item, this tab is displayed in folders at the top. Items: [{title: 'Project 1', html :"The first body of the first group."},{ Title: 'Project 2', border: false, html :"The second body of the first group."},{ Title: 'Project 3', border: false, html :"The third body of the first group."}] },{ Expanded: true, items: [{title: 'Project 1', html :"The first body of the second group."},{ Title: 'Project 2', html :"The second body of the second group."}]}); Ext. create ('ext. panel ', {renderTo: "content7", width: 600, height: 250, collapsible: true, layout: 'fit', title: 'group tab demo', items: tabs7 });

Effect: