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

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

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

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

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

首先简单的搭个页面:

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

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

 

Ext.Net学习笔记之动态加载TabPanel
 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>
Ext.Net学习笔记之动态加载TabPanel

 

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

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

‘id‘:表示动态加载的ID属性,唯一性;

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

this:不用说啦,当前的这个MenuItem;

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

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

Ext.Net学习笔记之动态加载TabPanel
 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         }
Ext.Net学习笔记之动态加载TabPanel

 

需要的参数可以自行更改。

结果如下图所示:

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

 

解决办法,我想到的就这一个。如果你有不同的方法,可以告诉我。相互学习。

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

上一篇:与众不同 windows phone (21) - Device(设备)之摄像头(拍摄照片, 录制视频)


下一篇:Ext.net学习笔记之ViewPort布局