書接上回，在系統登入之後，就要顯示主頁面了，先看下效果：

介面效果



點選“退出系統”按鈕：






整個頁面被分為了三部分，上面的是頁面標題和工具欄；左側的是系統選單；右側的主內容區域。

需要特別注意的是，在主內容區域我們使用了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 下載全部原始碼。