Ext.Net学习笔记之动态加载TabPanel

浏览数：181 / 时间：2015年06月09日

在Asp.net中，我们常常用母版页来布局，避免重复的代码。在内容页中只显示相关的信息。

可是，在Ext.Net的布局中，是否也可以这样呢？

答案是肯定的，不然也不会写这篇文章了。

我的决解办法是，在TabPanel中动态添加一个Tab，这个Tab就是内容页。

首先简单的搭个页面:

West是一个简单的导航栏，单击上面的一个选项，就会在Center中增加一个Tab。如下代码:

 1       <ext:Viewport runat="server" Layout="BorderLayout">
 2             <Items>
 3                 <ext:Panel runat="server" Region="North" Title="North" Height="100"></ext:Panel>
 4                 <ext:Panel runat="server" Region="West" Title="West" Width="200" Collapsible="true">
 5                     <Items>
 6                         <ext:MenuPanel runat="server">
 7                             <Menu runat="server">
 8                                 <Items>
 9                                     <ext:MenuItem runat="server" Text="动态加载Tab">
10                                         <Listeners>
11                                             <Click Handler="AddPageTab(#{ContentTab},‘id‘,‘Test.aspx‘,this,‘动态加载的Tab‘);"></Click>
12                                         </Listeners>
13                                     </ext:MenuItem>
14                                 </Items>
15                             </Menu>
16                         </ext:MenuPanel>
17                     </Items>
18                 </ext:Panel>
19                 <ext:TabPanel runat="server" Region="Center" Title="Center" ID="ContentTab">
20                     <Items>
21                         <ext:Panel runat="server" Title="首页"></ext:Panel>
22                     </Items>
23                 </ext:TabPanel>
24             </Items>
25       </ext:Viewport>

可以看到，在菜单中有个Listeners的Click事件。它就是动态加载的关键，调用的事Script中的AddPageTab函数，其中包含5个参数，分别是

#{ContentTab}:即TabPanel的ID属性；

‘id‘:表示动态加载的ID属性，唯一性；

‘Test.aspx‘:表示要加载的url；

this:不用说啦，当前的这个MenuItem；

‘动态加载的Tab‘:表示标题；

参考下面的js可能会更清楚点:

 1 var AddPageTab = function (tabPanelID, addTabID, pageUrl, menuItem, tabName) {
 2             var tab = tabPanelID.getComponent(addTabID);
 3 
 4             if (!tab) {
 5                 tab = tabPanelID.add({
 6                     id: addTabID,
 7                     title: tabName,
 8                     closable: true,
 9                     menuItem: menuItem,
10                     loader: {
11                         url: pageUrl,
12                         renderer: "frame",
13                     }
14                 });
15             }
16 
17             tabPanelID.setActiveTab(tab);
18         }