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

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

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

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

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

首先简单的搭个页面:

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

 1       <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" Region="North" Title="North" Height="100"></ext:Panel>
                <ext:Panel runat="server" Region="West" Title="West" Width="200" Collapsible="true">
                    <Items>
                        <ext:MenuPanel runat="server">
                            <Menu runat="server">
                                <Items>
                                    <ext:MenuItem runat="server" Text="动态加载Tab">
                                        <Listeners>
                                            <Click Handler="AddPageTab(#{ContentTab},'id','Test.aspx',this,'动态加载的Tab');"></Click>
                                        </Listeners>
                                    </ext:MenuItem>
                                </Items>
                            </Menu>
                        </ext:MenuPanel>
                    </Items>
                </ext:Panel>
                <ext:TabPanel runat="server" Region="Center" Title="Center" ID="ContentTab">
                    <Items>
                        <ext:Panel runat="server" Title="首页"></ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
      </ext:Viewport>

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

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

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

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

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

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

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

var AddPageTab = function (tabPanelID, addTabID, pageUrl, menuItem, tabName) {
            var tab = tabPanelID.getComponent(addTabID);

            if (!tab) {
                tab = tabPanelID.add({
                    id: addTabID,
                    title: tabName,
                    closable: true,
                    menuItem: menuItem,
                    loader: {
                        url: pageUrl,
                        renderer: "frame",
                    }
                });
            }

            tabPanelID.setActiveTab(tab);
        }

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

结果如下图所示:

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