[原創]ExtAspNet秘密花園（十一） — 布局概述

在ExtAspNet開發中，頁面中控件的合理布局是頁面美觀的基礎，因此非常重要。同時由於這一塊是普通Asp.Net控件所缺失的一環，因此也不大容易理解。本篇文章將對ExtAspNet控件中的各種布局做詳細說明，以期望開發者能夠屬性掌握這一基本知識。

 

使用布局的優勢

相對於為控件設置固定的寬度和高度，布局的重要意義在於子控件可以根據父控件的尺寸自動設置自己的尺寸，在頁面尺寸改變時同樣有效。如果你在項目中遇到類似如下的需求，就需要考慮布局了：

• 面板填充整個頁面，並根據頁面尺寸自動改變大小；
• 將整個頁面划分為上下左右中四塊；
• 一個子面板寬度固定，另一個子面板占據剩余的全部寬度；
• 一個子面板高度固定，另一個子面板占據剩余的全部高度；
• 將一個面板浮動到頁面的固定地方；
• ....

 

哪些控件可以參與布局?

凡是容器控件都可以參與布局，ExtAspNet中很多控件都是從Container中繼承下來的。這個從官方文檔中可以明顯看得出來。

 

ExtAspNet中有哪些布局?

ExtAspNet中有很多布局，通過Layout枚舉類型我們可以清楚的看到這些布局類型。

 

從上圖可以看出，很多布局類型以控件的形式表現出來，比如RegionPanel、Accordion、Form和SimpleForm以及TabStrip控件，這些控件會有單獨的篇幅介紹，這里只介紹可以用於所有容器控件的布局類型。

 

布局之填充整個頁面

讓整個容器填充整個頁面是一個常見需求，實現起來也很方便。設置PageManager的AutoSizePanelID為需要填充整個頁面的容器控件ID。

 

布局之填充整個容器（Fit）

讓一個控件充滿另一個容器控件也是一個常見的需求，此時只需要為父容器控件設置Layout屬性為Fit即可。

 

分析示例首頁所使用的布局

 

從上圖可以看出，這個首頁分別使用了如下布局相關知識：

• 通過PageManager的AutoSizePanelID屬性將RegionPanel控件充滿整個頁面空間；
• RegionPanel控件用來提供“上-左-中”的布局；
• RegionPanel中的三個Region控件分別應用Layout=Fit，來使其內部的控件（分別為ContentPanel，Tree，TabStrip）填充整個Region。

 

下面來看下簡化后的代碼結構：

<ext:PageManager AutoSizePanelID="RegionPanel1" >
</ext:PageManager>
<ext:RegionPanel ID="RegionPanel1">
    <ext:Region Position="Top" Layout="Fit">
        <Toolbars>
            <ext:Toolbar Position="Bottom"></ext:Toolbar>
        </Toolbars>
        <Items>
            <ext:ContentPanel></ext:ContentPanel>
        </Items>
    </ext:Region>
    <ext:Region Position="Left" Layout="Fit">
        <Items>
            <ext:Tree></ext:Tree>
        </Items>
    </ext:Region>
    <ext:Region Position="Center" Layout="Fit">
        <Items>
            <ext:TabStrip>
                <Tabs>
                    <ext:Tab></ext:Tab>
                    <ext:Tab></ext:Tab>
                    <ext:Tab></ext:Tab>
                </Tabs>
            </ext:TabStrip>
        </Items>
     </ext:Region>
</ext:RegionPanel>

 

 

小結

布局是ExtAspNet開發人員必須深入學習的知識，后面的幾篇文章會接着分析錨點布局、列布局、行布局、垂直盒子布局、水平盒子布局、絕對定位布局和表格布局，敬請期待。

 

 

 

注：《ExtAspNet秘密花園》系列文章由三生石上原創，博客園首發，轉載請注明出處。文章目錄 官方論壇