在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 }
需要的参数可以自行更改。
结果如下图所示:
解决办法，我想到的就这一个。如果你有不同的方法，可以告诉我。相互学习。