Each tab of the Ext. Tab. Panel tab component is an Ext. Panel. Panel. Generally, multiple tabs exist at the same time, but only one tab is active at the same time.
Ext. Tab. Panel:
| Configuration item | Parameter type | Description |
|---|---|---|
| Activetab | String/Number | Set the default active tab. The parameter is the ID or index value of the tab page. |
| Layout | Object | Built-in card layout of tabpanel |
| Mintabwidth | Number | The minimum tab width. The default value is 30. |
| Plain | Boolean | True: The full tabbar background is not displayed. The default value is false. |
| Removepanelheader | Boolean | True indicates that all child elements do not render the header title bar. This prevents repeated display of the child element title twice. The default value is true. |
| Tabbar | Object | Configure the configuration object of built-in Ext. Tab. tabbar |
| Tabposition | String | Set the display position of the tab button. The valid values are top and bottom. The default value is top. |
Ext. Tab. bar:
| Configuration item | Parameter type | Description |
|---|---|---|
| Maxtabwidth | Number | Set the maximum width of the tag button |
| Mintabwidth | Number | Set the minimum width of the tag button |
| Plain | Boolean | True: The full tabbar background is not displayed. The default value is false. |
1. Add tabs through items
Code:
1 <! Doctype HTML public " -// W3C // dtd xhtml 1.0 transitional // en " " Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > 2 <HTML xmlns = " Http://www.w3.org/1999/xhtml " > 3 <Head runat = " Server " > 4 <Title> Ext. Tab. Panel </title> 5 <Link href = " Ext-4.0.7-gpl/resources/CSS/ext-all.css " Rel = " Stylesheet " Type = " Text/CSS " /> 6 <SCRIPT src = " Ext-4.0.7-gpl/Bootstrap. js " Type = " Text/JavaScript " > </SCRIPT> 7 <SCRIPT type = " Text/JavaScript " > 8 Ext. onready (function (){ 9 Ext. Create ( " Ext. Tab. Panel " ,{ 10 Title: " Ext. Tab. Panel example " , 11 Frame: True , 12 Height: 150 , 13 Width: 300 , 14 Activetab: 1 , // 2nd tab pages are activated by default. 15 Renderto: Ext. getbody (), 16 Items :[{ 17 Title: " Tab 1 " , 18 HTML: " Tab 1 content " 19 },{ 20 Title: " Tab 2 " , 21 HTML: " Tab 2 Content " 22 },{ 23 Title: " Tab 3 " , 24 HTML: " Tab 3 content " 25 },{ 26 Title: " Tab tab 4 " , 27 HTML: " Tab tab 4 Content " 28 },{ 29 Title: " Tab tab 5 " , 30 HTML: " Tab tab 5 content " 31 },{ 32 Title:" Tab tab 6 " , 33 HTML: " Tab tab 6 content " 34 }] 35 }); 36 }); 37 </SCRIPT> 38 </Head>39 <Body> 40 </Body> 41 </Html>
:
2. dynamically add tabs
Code:
1 <! Doctype HTML public " -// W3C // dtd xhtml 1.0 transitional // en " " Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > 2 <HTML xmlns =" Http://www.w3.org/1999/xhtml " > 3 <Head runat = " Server " > 4 <Title> Ext. Tab. Panel </title> 5 <Link href = " Ext-4.0.7-gpl/resources/CSS/ext-all.css " Rel = " Stylesheet " Type = " Text/CSS " /> 6 <SCRIPT src = " Ext-4.0.7-gpl/Bootstrap. js " Type = " Text/JavaScript " > </SCRIPT> 7 <SCRIPT type = " Text/JavaScript " > 8 Ext. onready (function (){ 9 VaR Tabpanel = ext. Create ( " Ext. Tab. Panel " ,{ 10 Title: " Ext. Tab. Panel example " , 11 Frame:True , 12 Height: 150 , 13 Width: 300 , 14 Activetab: 0 , // The first tab page is activated by default. 15 Renderto: Ext. getbody (), 16 Items :[{ 17 Title: " Tab 1 " , 18 HTML: " Tab 1 content " 19 }], 20 Buttons :[{ 21 Text:" Add Tab " , 22 Handler: addtab 23 }] 24 }); 25 26 Function addtab (){ 27 VaR Index = tabpanel. Items. Length + 1 ; 28 VaR Tab = Tabpanel. Add ({ 29 Title: " Tab " + Index, 30 HTML: " Tab " + Index + " Content " , 31 Closable: True // Disable allowed 32 }); 33 34 Tabpanel. setactivetab (Tab ); // Set the current tab page 35 } 36 }); 37 </SCRIPT> 38 </Head> 39 <Body style = " Margin: 10px; " > 40 </Body> 41 </Html>
:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
