[原創]ExtAspNet秘密花園（十三） — 布局之行布局和列布局

行布局和列布局相對比較簡單，下面會詳細分析這兩種布局。

 

行布局的結構

一個典型的行布局的結構如下：

<ext:Panel Layout="Row">
  <Items>
      <ext:Panel Height="50px" Width="200px" ></ext:Panel>
      <ext:Panel RowHeight="30%"></ext:Panel>
      <ext:Panel RowHeight="70%"></ext:Panel>
  </Items>
</ext:Panel>

有三個關鍵點：

• 為父容器控件設置Layout屬性為Row；
• 對於需要固定高度的子容器控件，設置Height屬性；如果不設置Width屬性，則自適應父容器的寬度。
• 對於需要自適應高度的子容器控件，設置RowHeight屬性（表示其占據除了固定高度子容器的剩余高度的百分比）。

 

來看下上面結構生成的界面截圖：

 

為行布局的子控件增加間隙

在上例中，三個子容器與父容器之間的間隙（5px）是通過父容器的BodyPadding=5px設置的，但是由於各個子容器之間沒有間隙，看起來很不美觀。

如何為子面板之間也增加5px的間隙，讓最終的效果看起來如下呢？

 

這就需要使用CSS的一點小技巧了。通過向前兩個子容器增加5px的底部外邊距（margin-bottom）來實現，首先在head標簽中定義我們要用到的CSS類：

<style type="text/css">
    .rowpanel
    {
        margin-bottom: 5px;
    }
</style>

 

然后在ASPX標簽中使用這個預定義的CSS類：

<ext:Panel Layout="Row" BodyPadding="5px">
  <Items>
      <ext:Panel Height="50px" Width="200px" CssClass="rowpanel"></ext:Panel>
      <ext:Panel RowHeight="30%"  CssClass="rowpanel"></ext:Panel>
      <ext:Panel RowHeight="70%"></ext:Panel>
  </Items>
</ext:Panel>

當然你也可以直接使用CssStyle，不妨自己動手試下。

 

 

列布局的結構

一個典型的列布局的結構如下：

<ext:Panel Layout="Column">
  <Items>
      <ext:Panel Height="150px" Width="200px" ></ext:Panel>
      <ext:Panel ColumnWidth="60%"></ext:Panel>
      <ext:Panel ColumnWidth="40%"></ext:Panel>
  </Items>
</ext:Panel>

有三個關鍵點：

• 為父容器控件設置Layout屬性為Column；
• 對於需要固定寬度的子容器控件，設置Width屬性；如果不設置高度屬性，則高度自動。
• 對於需要自適應寬度的子容器控件，設置ColumnWidth屬性（表示其占據除了固定寬度子容器的剩余寬度的百分比）。

來看下上面結構生成的界面截圖：

 

 

如何為列布局的子控件之間增加間隙呢？

實現方法類似於行布局中的實現，先來看CSS定義和ASPX標簽的定義：

<style type="text/css">
    .columnpanel
    {
        margin-right: 5px;
    }
</style>

<ext:Panel Layout="Column" BodyPadding="5px">
    <Items>
        <ext:Panel Height="150px" Width="200px" CssClass="columnpanel"></ext:Panel>
        <ext:Panel ColumnWidth="60%" CssClass="columnpanel"></ext:Panel>
        <ext:Panel ColumnWidth="40%"></ext:Panel>
    </Items>
</ext:Panel>

 

最終效果圖：

 

每列包含多個子容器的布局

上面的例子中每列只有一個子容器，那么如果實現每列包含多個子容器呢？

其實道理也很簡單，無非是設置列容器無邊框和無標題，然后在這些列容器中添加子容器。先來看下最終實現的效果：

 

要特別注意列之間的間隙，列與父容器之間的間隙，以及列中每個子容器之間的間隙是如何實現的，下面來看ASPX標簽：

<ext:Panel Height="350px" Width="750px" Layout="Column" BodyPadding="5px">
    <Items>
        <ext:Panel ColumnWidth="50%" CssClass="columnpanel" ShowBorder="false" ShowHeader="false">
            <Items>
                <ext:Panel Height="150px" CssClass="rowpanel"></ext:Panel>
                <ext:Panel Height="100px" CssClass="rowpanel"></ext:Panel>
            </Items>
        </ext:Panel>
        <ext:Panel ColumnWidth="50%" ShowBorder="false" ShowHeader="false">
            <Items>
                <ext:Panel Height="100px" CssClass="rowpanel"></ext:Panel>
                <ext:Panel Height="150px" CssClass="rowpanel"></ext:Panel>
            </Items>
        </ext:Panel>
    </Items>
</ext:Panel>

 

注意，外部容器使用了列布局，而列內部沒有應用布局，所以列中各個子容器的高度取決於其內容的高度（也即是自動高度），當然你也可以指定高度。

 

 

小結

列布局和行布局相對比較容易掌握，不過如何為各列或者各行容器之間增加間隙卻需要一定的技巧，這一技巧也希望大家能熟練掌握，在實際項目中非常有用。下面的幾篇文章，我們會接着學習垂直盒子布局、水平盒子布局、絕對定位布局和表格布局，請繼續關注。

 

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