ExtAspNet应用技巧（十三） 后台主页面（IFrame框架）

书接上回，在系统登录之后，就要显示主页面了，先看下效果：

界面效果



点击“退出系统”按钮：






整个页面被分为了三部分，上面的是页面标题和工具栏；左侧的是系统菜单；右侧的主内容区域。

需要特别注意的是，在主内容区域我们使用了IFrame，这也是ExtAspNet提倡的一种做法。
这种IFrame框架不仅加快了页面的加载速度，而且代码逻辑以页面的形式组织划分，对于代码编写调试以及多人开发都极其有利。


ASPX标签

    <ext:PageManager ID="PageManager1" AutoSizePanelID="BorderLayout1" HideScrollbar="true"
        runat="server" />
    <ext:BorderLayout ID="BorderLayout1" ShowBorder="false" runat="server">
        <Regions>
            <ext:Region ID="regionTop" Height="60px" ShowBorder="false" ShowHeader="false" Position="Top"
                Layout="Fit" runat="server">
            </ext:Region>
            <ext:Region ID="regionLeft" Split="true" Width="200px" Margins="0 0 0 0" ShowHeader="true"
                Title="菜单" EnableCollapse="true" Layout="Fit" Position="Left" runat="server">
            </ext:Region>
            <ext:Region ID="regionCenter" ShowHeader="false" EnableIFrame="true" IFrameUrl="~/admin/default.aspx"
                IFrameName="main" Margins="0 0 0 0" Position="Center" runat="server">
            </ext:Region>
        </Regions>
    </ext:BorderLayout>
    

在这段ASPX标签中，还是有一些ExtAspNet的技巧的：

• PageManager的AutoSizePanelID用来指定自动全屏的容器
• BorderLayout的ShowBorder="false"用来去除此容器的外边框（1px的蓝色边框）
• regionTop通过Position="Top"设置显示在页面的上部（同理regionLeft显示在左侧，regionCenter显示在中间）
• regionTop和regionLeft容器通过Layout="Fit"来标示只有一个子控件，并且这个子控件充满父容器
• regionCenter通过EnableIFrame,IFrameUrl,IFrameName三个属性来指定其内部是一个Iframe

下面我们来仔细看下regionTop的声明：

    <ext:Region ID="regionTop" Height="60px" ShowBorder="false" ShowHeader="false" Position="Top"
        Layout="Fit" runat="server">
        <Toolbars>
            <ext:Toolbar ID="Toolbar1" Position="Bottom" runat="server">
                <Items>
                    <ext:ToolbarFill ID="ToolbarFill1" runat="server">
                    </ext:ToolbarFill>
                    <ext:ToolbarText ID="tbtWelcome" runat="server">
                    </ext:ToolbarText>
                    <ext:ToolbarSeparator ID="ToolbarSeparator3" runat="server">
                    </ext:ToolbarSeparator>
                    <ext:Button ID="Button1" runat="server" Text="首页" EnablePostBack="false" OnClientClick="window.open('./admin/default.aspx', 'main');">
                    </ext:Button>
                    <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server">
                    </ext:ToolbarSeparator>
                    <ext:Button ID="btnSysConfig" runat="server" Text="系统设置" EnablePostBack="false" OnClientClick="window.open('./admin/config.aspx', 'main');">
                    </ext:Button>
                    <ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server">
                    </ext:ToolbarSeparator>
                    <ext:Button ID="btnExit" runat="server" Text="退出系统" ConfirmText="确定退出系统？" OnClick="btnExit_Click">
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </Toolbars>
        <Items>
            <ext:ContentPanel ShowBorder="false" ShowHeader="false" BodyStyle="background-color:#1C3E7E;"
                ID="ContentPanel1" runat="server">
                <div style="font-size: 20px; color:White; font-weight:bold; padding: 5px 10px; ">
                    <a href="./main.aspx" style="color:White;">AppBox</a>
                </div>
            </ext:ContentPanel>
        </Items>
    </ext:Region>
    

可以看到regionTop有一个Position="Bottom"的工具栏（我们会在这个工具栏放置一些常用的按钮），和仅有的一个子控件ContentPanel1。
此子控件会填充整个regionTop区域而不必设置宽度和高度，这得益于regionTop的Layout="Fit"属性（你也可以试着把这个属性去掉看会发生什么）。

regionLeft控件留空是因为我们以后会通过动态的方式为其添加树形的菜单。

注：ContentPanel是ExtAspNet中唯一一个可以放置非ExtAspNet控件（比如html标签，asp.net控件）的控件。



两个需要关注的地方

1. 点击按钮在Iframe中打开页面，这是很多人经常遇到的问题

    <ext:Button ID="Button1" runat="server" Text="首页" EnablePostBack="false" OnClientClick="window.open('./admin/default.aspx', 'main');">
    </ext:Button>
    

首先设置EnablePostBack="false"来禁用点击按钮回发的行为，然后注册点击按钮的客户端脚本OnClientClick，通过JavaScript函数window.open来指定在名称为name的IFrame中打开新页面。
而这个IFrame正是regionCenter所定义的（IFrameName="main"），所以点击此按钮新页面会在主内容区域打开。

2. 点击按钮弹出确认对话框，这个实现是如此的简单以至于只需要配置一下Button的属性

    <ext:Button ID="btnExit" runat="server" Text="退出系统" ConfirmText="确定退出系统？" OnClick="btnExit_Click">
    </ext:Button>
    

后台代码

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadData();
        }
    } 
    private void LoadData()
    {
        tbtWelcome.Text = String.Format("欢迎您，<span style=\"font-weight:bold;\">{0}</span>", User.Identity.Name);
    }
    
    protected void btnExit_Click(object sender, EventArgs e)
    {
        FormsAuthentication.SignOut();
        FormsAuthentication.RedirectToLoginPage();
    }
    

如果你想运行本章中使用的代码，可以从 http://appbox.codeplex.com/SourceControl/ListDownloadableCommits.aspx 下载全部源代码。