coolite Tablepanel Use _ Practical Tips

Source: Internet
Author: User
Tags autoload
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:

<style type= "Text/css" >
TabPanel Control Learning

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"); = "TabID";
tab. Autoload.url = "Http://";
tab. Autoload.nocache = true;
tab. Autoload.mode = Loadmode.iframe;
This.tabPanel.ActiveTab = tab;
<ext:button id= "Btncreatetab" runat= "Server" text= "dynamically add Child label options" >
<click onevent= "Creatatab_click" >
<eventmask showmask= "true" msg= "Loading"/>

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)" >
<click handler= "AddTab (#{tabpanel}, ' Tabcnblogs ', ' ');"/>

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 ({
AutoLoad: {
Mode: ' iframe ',
Maskmsg: ' Loading '
Tabpanel.setactivetab (tab);

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.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.