[原創]ExtAspNet秘密花園（十四） — 布局之垂直盒子布局和水平盒子布局

垂直盒子布局和水平盒子布局非常靈活易用，在很大程度上能夠取代錨點布局，行布局和列布局，因此希望大家能夠熟練掌握。

 

 

垂直盒子布局的結構

一個典型的垂直盒子布局的結構如下：

<ext:Panel Layout="VBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="5"
    BoxConfigChildMargin="0 0 5 0">
    <Items>
        <ext:Panel BoxFlex="1"></ext:Panel>
        <ext:Panel Height="100px"></ext:Panel>
        <ext:Panel BoxFlex="2" BoxMargin="0"></ext:Panel>
    </Items>
</ext:Panel>

有如下幾個關鍵點：

• 為父容器控件設置Layout屬性為VBox，還可以設置其他幾個屬性：
  • BoxConfigAlign：用來控制容器子控件的尺寸，有四種取值。
    • Start：所有子控件位於父容器的開始位置（默認值）
    • Center：所有子控件位於父容器的中間位置；
    • Stretch：所有子控件被拉伸至父容器的大小；
    • StretchMax：所有子控件被拉伸至最大子控件的大小。
  • BoxConfigPosition：用來控制子容器的位置，有三種取值。
    • Start：子控件靠父容器的開始位置排列（默認值）；
    • End：子控件靠父容器的結束位置排列；
    • Center：子控件靠父容器的中間位置排列；
  • BoxConfigChildMargin：每個子容器的外邊距。
    • 如果是四個數字組成的字符串，分別表示上邊距、右邊距、下邊距、左邊距；
    • 如果是三個數字組成的字符串，分別表示上邊距、右邊距、下邊距，左邊距同右邊距；
    • 如果是兩個數字組成的字符串，分別表示上邊距、右邊距，左邊距同右邊距，下邊距同上邊距；
    • 如果是一個數字組成的字符串，四個方面的邊距都為此值。
  • BoxConfigPadding：父容器的內邊距（規則同上）。
    • 此屬性和BodyPadding的作用相同，只不過此時BodyPadding失效了，需要使用此屬性設置內邊距。
• 對於需要固定高度的子容器控件，設置Height屬性；也可以設置Width屬性，其行為取決於父容器BoxConfigAlign屬性。
• 對於需要自適應高度的子容器控件，設置BoxFlex屬性（整型值）。
  • BoxFlex屬性是一個相對值，相對於其他具有BoxFlex屬性的子容器。
  • 在本例中，第一個子容器BoxFlex=1，第三個子容器BoxFlex=2。所以第一個子容器占據（除去第二個固定高度的子容器）1/3的高度，相應的第三個子容器占據2/3的高度。並且第一個和第三個子容器的高度隨着父容器的高度變化而變化。
• 對於需要自定義外邊距的子容器控件，設置BoxMargin屬性。
  • 這個屬性一般用來覆蓋父容器的BoxConfigChildMargin屬性。

 

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

 

這里有個小技巧，父容器設置了BoxConfigChildMargin=0 0 5 0，也即是說每個子容器的下邊距為5px，不過最后一個子容器通過BoxMargin=0覆蓋了這一屬性，從而保證最后一個子容器距離父容器下邊界也是5px。

 

為了讓大家對這些屬性有更深入的了解，下面通過幾個示例來展示。

 

垂直盒子布局示例一

<ext:Panel Layout="VBox" BoxConfigAlign="Stretch" BoxConfigPosition="End" BoxConfigPadding="5"
    BoxConfigChildMargin="0 0 5 0">
    <Items>
        <ext:Panel BoxFlex="1"></ext:Panel>
        <ext:Panel Height="100px"></ext:Panel>
        <ext:Panel BoxFlex="2" BoxMargin="0"></ext:Panel>
    </Items>
</ext:Panel>

 

 

垂直盒子布局示例二

<ext:Panel Layout="VBox" BoxConfigAlign="Start" BoxConfigPosition="Center" BoxConfigPadding="5"
    BoxConfigChildMargin="0 0 5 0">
    <Items>
        <ext:Panel BoxFlex="1"></ext:Panel>
        <ext:Panel Height="100px"></ext:Panel>
        <ext:Panel BoxFlex="2" BoxMargin="0"></ext:Panel>
    </Items>
</ext:Panel>

 

 

垂直盒子布局示例三

<ext:Panel Layout="VBox" BoxConfigAlign="StretchMax" BoxConfigPosition="Center" BoxConfigPadding="5"
    BoxConfigChildMargin="0 0 5 0">
    <Items>
        <ext:Panel BoxFlex="1"></ext:Panel>
        <ext:Panel Height="100px"></ext:Panel>
        <ext:Panel BoxFlex="2" BoxMargin="0"></ext:Panel>
    </Items>
</ext:Panel>

 

 

水平盒子布局的結構

一個典型的水平盒子布局的結構如下：

<ext:Panel Layout="HBox" BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="5"
    BoxConfigChildMargin="0 5 0 0">
    <Items>
        <ext:Panel BoxFlex="1"></ext:Panel>
        <ext:Panel Width="100px"></ext:Panel>
        <ext:Panel BoxFlex="2" BoxMargin="0"></ext:Panel>
    </Items>
</ext:Panel>

其中參數的含義和垂直盒子布局的類似，這里就不再贅述。

 

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

 

水平盒子布局示例一

<ext:Panel Layout="HBox" BoxConfigAlign="Stretch" BoxConfigPosition="End" BoxConfigPadding="5"
    BoxConfigChildMargin="0 5 0 0">
    <Items>
        <ext:Panel Width="200px"></ext:Panel>
        <ext:Panel Width="200px"></ext:Panel>
        <ext:Panel Width="200px" BoxMargin="0"></ext:Panel>
    </Items>
</ext:Panel>

 

水平盒子布局示例二

<ext:Panel Layout="HBox" BoxConfigAlign="Center" BoxConfigPosition="Center" BoxConfigPadding="5"
    BoxConfigChildMargin="0 5 0 0">
    <Items>
        <ext:Panel Width="200px" Height="100px"></ext:Panel>
        <ext:Panel Width="200px" Height="150px"></ext:Panel>
        <ext:Panel Width="200px" Height="200px" BoxMargin="0"></ext:Panel>
    </Items>
</ext:Panel>

 

水平盒子布局示例三

<ext:Panel Layout="HBox" BoxConfigAlign="StretchMax" BoxConfigPosition="Center" BoxConfigPadding="5"
    BoxConfigChildMargin="0 5 0 0">
    <Items>
        <ext:Panel Width="200px" Height="100px"></ext:Panel>
        <ext:Panel Width="200px" Height="150px"></ext:Panel>
        <ext:Panel Width="200px" Height="200px" BoxMargin="0"></ext:Panel>
    </Items>
</ext:Panel>

 

 

使用垂直盒子布局替代錨點布局示例

還記得我們在講解錨點布局時最后一個示例嗎？

當時我們提到需要為下面的表格設置AnchorValue=”100% -62”，其中62這個數值是通過Firebug查看渲染后的HTML得到的。

這種做法令人有點尷尬，類似莫名其妙的常數也給項目的維護帶來一定的麻煩。

 

下面使用垂直盒子布局來輕松解決這個問題：

<ext:Panel EnableBackgroundColor="true" Layout="VBox"
    BoxConfigAlign="Stretch" BoxConfigPosition="Start" BoxConfigPadding="3" BoxConfigChildMargin="0"
    ShowBorder="True" ShowHeader="True" Width="750px" Height="350px" >
    <Items>
        <ext:Form ShowBorder="False" BodyPadding="5px" EnableBackgroundColor="true" ShowHeader="False">
            <Rows>
                <ext:FormRow>
                    <Items>
                        // 此處省略...
                    </Items>
                </ext:FormRow>
                <ext:FormRow>
                    <Items>
                        // 此處省略...
                    </Items>
                </ext:FormRow>
            </Rows>
        </ext:Form>
        <ext:Panel ShowBorder="True" ShowHeader="false" BoxFlex="1" Layout="Fit">
            <Toolbars>
                <ext:Toolbar ID="Toolbar3">
                    <Items>
                        // 此處省略...
                    </Items>
                </ext:Toolbar>
            </Toolbars>
            <Items>
                <ext:Grid Title="Grid3" PageSize="3" ShowBorder="false" ShowHeader="False"
                    EnableCheckBoxSelect="True" DataKeyNames="Id,Name" EnableRowNumber="True">
                    <Columns>
                        // 此處省略...
                    </Columns>
                </ext:Grid>
            </Items>
        </ext:Panel>
    </Items>
</ext:Panel>

使用垂直盒子布局避免了錨點布局時引入的常數，同時產生的界面效果和之前的一模一樣。

 

 

使用水平盒子布局替代列布局示例

還記得我們在講解列布局時最后一個示例嗎？

 

為了實現各列之間的間隔，我們需要為列容器設置CssClass="columnpanel"，其中columnpanel是預先定義的CSS類。

 

而使用水平盒子布局，ASPX標簽將更加簡單直觀：

<ext:Panel Height="350px" Width="750px" Layout="HBox" BoxConfigAlign="Stretch"
    BoxConfigPosition="Start" BoxConfigPadding="5" BoxConfigChildMargin="0 5 0 0">
    <Items>
        <ext:Panel BoxFlex="1" ShowBorder="false" ShowHeader="false">
            <Items>
                <ext:Panel Height="150px" CssClass="rowpanel" BodyPadding="5px"></ext:Panel>
                <ext:Panel Height="100px" BodyPadding="5px"></ext:Panel>
            </Items>
        </ext:Panel>
        <ext:Panel BoxFlex="1" BoxMargin="0" ShowBorder="false" ShowHeader="false">
            <Items>
                <ext:Panel Height="100px" CssClass="rowpanel" BodyPadding="5px"></ext:Panel>
                <ext:Panel Height="150px" BodyPadding="5px"></ext:Panel>
            </Items>
        </ext:Panel>
    </Items>
</ext:Panel>

 

小結

垂直盒子布局和水平盒子布局非常靈活，在實際項目中出鏡率也很高，在某些情況甚至可以取代錨點布局、列布局等其他布局，因此需要大家熟練掌握。關於布局就先介紹到這里，剩下的絕對定位布局和表格布局相對簡單，大家可以仿照官方示例自己學習。

接下來，我們將學習ExtAspNet的重頭戲 - 數據表格控件。

 

 

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