The most commonly used is its Tabs attribute, which is used to define the sub-tag option, as shown in:
In content.html, the code snippet is as follows:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Style type = "text/css">
Body {font-size: 12px ;}
</Style>
</Head>
<Body>
TabPanel Control Learning
</Body>
</Html>
TabPanel is the most flexible option for creating sub-labels dynamically. For details about the implementation principles of this creation process, refer to the two articles I wrote earlier (there is a link in this article ), it should be noted that the synchronization event cannot be used to create the tag. 1. All the tag options created by PostBack on the page will be cleared. You can use the AjaxEvent mechanism provided by Coolite Toolkit to dynamically create data using the server-side background code.
Copy codeThe Code is as follows:
Protected void CreataTab_Click (object sender, AjaxEventArgs e)
{
Var tab = new Tab ("add a Tab through AjaxEvent ");
Tab. TabIndex = short. Parse ("11 ");
Tab. ID = "tabID ";
Tab. AutoLoad. Url = "http://www.jb51.net ";
Tab. AutoLoad. NoCache = true;
Tab. AutoLoad. Mode = LoadMode. IFrame;
This. tabPanel. Tabs. Add (tab );
This. tabPanel. ActiveTab = tab;
}
<Ext: Button ID = "btnCreateTab" runat = "server" Text = "dynamic Add sub-tag option">
<AjaxEvents>
<Click OnEvent = "CreataTab_Click">
<EventMask ShowMask = "true" Msg = "loading"/>
</Click>
</AjaxEvents>
</Ext: Button>
I personally think that page creation through synchronization will always shake, and the flash is quite unpleasant. We recommend that you use the client to dynamically Add sub-tag options. TabPanel provides the corresponding client APIs to complete these operations.
Copy codeThe Code is as follows:
<Ext: Button ID = "btnClient" runat = "server" Text = "add a Tab (Client)">
<Listeners>
<Click Handler = "addTab (# {tabPanel}, 'tabcnblogs', 'HTTP: // www.jb51.net');"/>
</Listeners>
</Ext: Button>
You can use the addTab () method of JavaScript to create a dynamic table. The three parameters are the TabPanel Control ID, the ID of the newly created Tab, and the content path of the Tab created in the West.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function addTab (tabPanel, id, url ){
Var tab = tabPanel. getComponent (id );
If (! Tab ){
Tab = tabPanel. add ({
Id: id,
Title: url,
Closable: true,
AutoLoad :{
ShowMask: true,
Url: url,
Mode: 'iframe ',
MaskMsg: 'loading'
}
});
}
TabPanel. setActiveTab (tab );
}
</Script>
The client is created by using Ext only. TabPanel provides APIs to directly obtain the existence of sub-tabs with the specified id. This function can perfectly process mutual exclusion, to create a unique Tab sub-Tab option.
TabPanel is used to process multiple tabs, and most of the time it is used as a container. Its container functions are basically the same as Panel and Window functions. Take the tree created in the previous article as an example. Now you need to display the tree in a sub-label option of TabPanel, you can directly call the TabPanel client API method addTab to add an existing container control to the TabPanel to make it a sub-Tab Of The TabPanel.
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
