The most frequently used is his tabs property, which defines the child label options, as shown in the following illustration:
The code snippet for content.html is as follows: The following figure is a screenshot of the running effect.
Copy Code code as follows:
<title></title>
<style type= "Text/css" >
body{font-size:12px;}
</style>
<body>
TabPanel Control Learning
</body>
TabPanel the most flexible is the dynamic creation of child label options, to understand the implementation of the creation process please refer to the two previous articles I wrote (this article is connected earlier), you need to note that the event can not be synchronized to create, One but page postback all newly created label options will be cleared. If you must create dynamically through the server backend code, you can use the ajaxevent mechanism provided by Coolite Toolkit.
Copy Code code as follows:
protected void Creatatab_click (object sender, Ajaxeventargs e)
{
var tab = new Tab ("Add 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= "dynamically add Child label options" >
<AjaxEvents>
<click onevent= "Creatatab_click" >
<eventmask showmask= "true" msg= "Loading"/>
</Click>
</AjaxEvents>
</ext:Button>
Personally feel the creation of a page through synchronization will always shake, flashing people are very uncomfortable. It is recommended to create by dynamically adding child label options to the client, and TabPanel provides the appropriate client API to do so.
Copy Code code as follows:
<ext:button id= "btnclient" runat= "Server" text= "Add tab (Client)" >
<Listeners>
<click handler= "AddTab (#{tabpanel}, ' Tabcnblogs ', ' http://www.jb51.net ');"/>
</Listeners>
</ext:Button>
Dynamically created with the JavaScript Method AddTab () method, three parameters are: TabPanel control ID, newly created tab ID, the content path that is rendered by the tab created in the West.
Copy Code code 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 way the client is created is by pure ext, TabPanel provides an API to directly obtain the presence of the Child tab of the specified ID, which can be used to perfectly handle mutexes to create a unique tab tab option.
TabPanel is used to deal with multiple tag tabs, and most of the time is used as a container, its container function and Panel, window, etc. basically the same. Just take the tree you created in the previous article as an example, and now you need to display the tree in a tabpanel option of the TabPanel, you can call the client API method directly AddTab add an existing container type control to TabPanel. Make it the TabPanel tab.
