EXT _ label panel _ Ext. tabpanel

/* Ext. tabpanel main configuration project table: activetab string/number sets the ID of the tab page activated by default or the index animscroll Boolean sets whether to use the animation effect autotabselector string to automatically find the style selector of the DIV in the DOM when the tab page is scrolling (default' div. x-tab, effective when autotabs = true) autotabs Boolean sets whether to find the DIV with the style class 'x-tab' In the Dom and converts it to the tab page (false by default) enabletabscroll Boolean whether the scroll button is automatically displayed when the total tab width exceeds the available width (false by default) layoutontabchange Boolean whether to re-layout the tab elements when switching the tab page. mintabwidth number: Minimum tab width (30 by default, only valid when resizetabs = true) resizetabs Boolean sets whether to allow the tab label to automatically adjust the width of scrollduration float (default) the time for each tab label to be rolled to execute an animation. 35, effective only in animscroll = true) scrollincrement number the length of each tab rolling (100 by default, effective only in enabletabscroll = true) scrollrepeatinterval number left-click continuously, the time interval for performing the rolling operation. The tabmargin number is calculated in pixels. The position of the blank space tabposition string tab on the panel (Top, bottom by default) tabwidth number the initial width of the tab (120 by default )*/

1. Add tabs through items

/* Example of adding tabs through items */Ext. onready (function () {var Config = {Height: 150, width: 300, activetab: 0, // The first tab page animscroll is activated by default: True, // enabletabscroll: true when the animation scroll effect is used. // when the tab label is too wide, the scroll bar renderto: 'panel 'is displayed automatically. // Add the tab to tabpanelitems as a sub-Panel through items: [{Title: 'tab tab 1', HTML: 'tab Tab 1 content'}, {Title: 'tab tab 2', HTML: 'tab Tab 2 content '}, {Title: 'tab 3', HTML: 'tab 3 content'}, {Title: 'tab 4', HTML: 'tab 4 content '}, {Title: 'tab 5', HTML: 'tab 5'}]} new Ext. tabpanel (config );});

2. automatically add tabs through the page Div

/* Example of automatically adding tags through the page Div */Ext. onready (function () {var Config = {Height: 50, width: 300, autotabs: True, // automatically scans the valid DIV in the page and converts it to the tag deferredrender: false, // do not perform delayed rendering // deferredrender: True, activetab: 0, // The first tag animscroll: True is activated by default, // enabletabscroll: True, // when the tab label is too wide, the scroll bar applyto: 'panel 'is automatically displayed. // applayto must be used to locate the tab.}/* The valid div is automatically scanned and converted to the valid Div on the tab page: this Div must be a DIV in applyto: 'panel 'and must have a correct style class. The default value is 'x-tab'. You can use autotabselector to specify */New Ext. tabpanel (config );});

<Div id = "Panel"> <Div class = "X-tab" Title = "tab Tab 1"> tab Tab 1 content </div> <Div class = "X- tab "Title =" tab Tab 2 "> tab Tab 2 content </div> <Div class =" X-tab "Title =" tab 3 "> tab 3 content </div> <Div class = "X-tab" Title = "tab 4"> tab 4 content </div> <Div class = "X-tab" Title =" tab tab 5 "> tab 5 content </div> <Div class =" X-tab "Title =" tab 6 "> invalid tab 6 content </div>

3. dynamically add tabs

/* Dynamically Add a tab */Ext. onready (function () {var Config = {Height: 150, width: 300, activetab: 0, // The first tab page animscroll is activated by default: True, // enabletabscroll: true when the animation scroll effect is used. // The scroll button renderto: 'panel ', items: [{Title: 'tab 1', HTML: 'tab Tab 1 content'}], // the button for automatically adding tags buttons: [{text: 'add page', Handler: addtabpage // handler}]} var tabpanel = new Ext. tabpanel (config); // Add the tab page function addtabpage () {var Index = tabpanel. items. length + 1; // create a new tab var tabpage = tabpanel. add ({Title: 'tab tab '+ index, HTML: 'tab tab' + index + 'content', closable: True // This tab can be closed }); // set the currently displayed tab tabpanel. setactivetab (tabpage );}});