Extjs. Net controls -- tabcontainer and tabpanel

Tabcontainer is usually used in combination with the tabpanel control. Currently, many control libraries and control products basically have these two controls, though not in standard controls, in ASP. net Ajax provides these two controls, which can be used to conveniently customize the development of tabs. However, different controls have their advantages and disadvantages.

For example, Asp. net Ajax I personally think that the interface effect is too ugly, even if CSS is used, it is difficult to control the development flexibility is not good enough; if you look at the interface, I think the radcontrols control product works very well, there are nearly 20 skin sets, and the development flexibility is relatively high. However, the disadvantage of this control is that it runs too slowly and will continuously download the image files required by the skin. In contrast, I personally prefer tabiner iner and tabpanel of extjs, which are highly flexible in development. extjs itself provides a set of nice skins. Unless we have special requirements, we do not need to make any changes. Let's take a look:

The result is developed using the. NET control of extjs. Below I will briefly introduce the use of common attributes of the. Net Control tabcontainer and tabpanel controls of extjs and several common client methods.

With the extjs. Net version control, you do not need to write too much JavaScript to develop extjs applications.CodeTo component the interface elements, such as using standard controls, you just need to drag from the toolbox to the page to OK. Note that extjs. net control requires ASP.. Net Ajax scriptmanager support, so you are using extjs. net Control is like using ASP. like the. NET Ajax control, you need to place a scriptmanager control on the page.

I. register controls

To use the. NET control of extjs, you must first register the control library. The best way is to add it to the vs toolbar and drag it to the page to use it. You can also copy the Library to the project bin by referencing the registration, and then register it on the page:

1 <% @ register Assembly = "extextenders" namespace = "extextenders" tagprefix = "PC3" %>
OK. Now we can use the. NET control of extjs.

Ii. tabcontainer Control

The tabcontainer control is just used as an option container. Just like a bowl, it is just a simple play. We can load rice into it. As follows:

1 <PC3: tabcontainer id = "tabs" runat = "server" activetabindex = "0">
2 </PC3: tabcontainer>
Common attributes of the tabcontainer control are as follows:
Activetabindex ---- The tabindex of the currently activated tabpanel
Enabletabscroll ---- true, false
Height
Width
Id ----- needless to say.

3. tabpanel Control
Tabpanel is used inside tabcontainer. Multiple tabpanels are customized to form the tab effect. Common attributes include tabindex and closable. closable indicates whether to enable or disable the function. tabindex is used for dynamic control and operation. ID is not required. As follows:

1 <PC3: tabpanel runat = "server" headertext = "My workbench"
2 closable = "false"
3 id = "tabpanel1"
4 tabindex = "0">
5 <contenttemplate>
6 <IFRAME src = "home/1. aspx" frameborder = "0"> </iframe>
7 </contenttemplate>
8 </PC3: tabpanel>

Iv. Demo

For the running effect of this example, see the reference figure above.
1 <PC3: tabcontainer id = "tabs" runat = "server" activetabindex = "0"
2 Height = "400px" width = "500px" enabletabscroll = "true">
3 <PC3: tabpanel runat = "server" headertext = "My workbench" closable = "false" id = "tabpanel1" tabindex = "0">
4 <contenttemplate>
5 <IFRAME src = "home/1. aspx" frameborder = "0"> </iframe>
6 </contenttemplate>
7 </PC3: tabpanel>
8 <PC3: tabpanel runat = "server" headertext = "My workbench" closable = "false" id = "tabpanel2">
9 <contenttemplate>
10 <IFRAME src = "home/2. aspx" frameborder = "0"> </iframe>
11 </contenttemplate>
12 </PC3: tabpanel>
13 <PC3: tabpanel runat = "server" headertext = "My workbench" closable = "true" id = "tabpanel3">
14 <contenttemplate>
15 <IFRAME src = "home/3. aspx" frameborder = "0"> </iframe>
16 <asp: textbox id = "textbox1" runat = "server"> </ASP: textbox>
17 </contenttemplate>
18 </PC3: tabpanel>
19 <PC3: tabpanel runat = "server" headertext = "My workbench" closable = "true" id = "tabpanel4">
20 <contenttemplate>
21 <IFRAME src = "home/4. aspx" frameborder = "0"> </iframe>
22 <asp: textbox id = "textbox2" runat = "server"> </ASP: textbox>
23 </contenttemplate>
24 </PC3: tabpanel>
25 <PC3: tabpanel runat = "server" headertext = "remove this" closable = "false" id = "tabremove">
26 </PC3: tabpanel>
27 <PC3: tabpanel runat = "server" headertext = "Disable" closable = "false" id = "tabenable">
28 </PC3: tabpanel>
29 <PC3: tabpanel runat = "server" headertext = "My workbench" closable = "false" id = "tabpanel7">
30 </PC3: tabpanel>
31 <PC3: tabpanel runat = "server" headertext = "My workbench" closable = "false" id = "tabpanel8">
32 </PC3: tabpanel>
33 <PC3: tabpanel runat = "server" headertext = "My workbench" closable = "false" id = "tabpanel9">
34 </PC3: tabpanel>
35 <PC3: tabpanel runat = "server" headertext = "My workbench" closable = "false" id = "tabpanel10">
36 </PC3: tabpanel>
37 <PC3: tabpanel runat = "server" headertext = "My workbench" closable = "false" id = "tabpanel11">
38 </PC3: tabpanel>
39 </PC3: tabcontainer>

1. dynamically add options

1 // Add a tabpanel dynamically
2 function addtabpanel ()
3 {
4 var tabs = find ("tabs ");
5 var tabpanel = tabs. tabpanel;
6 tabpanel. Add (
7 {
8 title: "Creating a tab ",
9 iconcls: "tabs ",
10 HTML: "content ",
11 closeble: True
12}
13). Show ();
14}
You can call this method to add a tabpanel dynamically.

2. delete option

You can delete a selected project by using JavaScript, or enable the disable function (set closable to true.

1 function removetabpanel ()
2 {
3 var tabs = find ("tabs ");
4 // remove tabpanel by ID
5 tabs. removetab ("tabremove ");
6}

3. Disable Option
The usage of this function is not very high. You can use the enabletab () method in JavaScript to control it based on the tabpanel ID.

Download the sample code in this article

Source: http://beniao.cnblogs.com