Ext.Net學習筆記20：Ext.Net FormPanel 復雜用法

在上一篇筆記中我們介紹了Ext.Net的簡單用法，並創建了一個簡單的登錄表單。今天我們將看一下如何更好是使用FormPanel，包括使用字段默認值、Checkbox Grouping和Radio Button Grouping等。

為FormPanel設置默認值

在Form中設置FieldDefaults標簽可以設置字段屬性的默認值。來看一下我們的用法：

<FieldDefaults LabelWidth="60" LabelAlign="Right">
</FieldDefaults>

在這段代碼中，我設置了LabelWidth和LabelAlign屬性，那么在Form中的所有字段的Label寬度都設置為60，而對齊方式都是右對齊。

Checkbox Grouping和RadioButton Grouping

checkbox和radiobutton是比較特殊的字段，它們通常不是單獨出現的，因此我們需要在Form中使用Checkbox組和RadioButton組來組織多個項。

首先來看一下RadioButton的用法：

<ext:RadioGroup runat="server" Width="400" ColumnsNumber="3" Vertical="true">
    <Items>
        <ext:Radio BoxLabel="Item 1" />
        <ext:Radio BoxLabel="Item 2" Checked="true" />
        <ext:Radio BoxLabel="Item 3" />
        <ext:Radio BoxLabel="Item 4" />
        <ext:Radio BoxLabel="Item 5" />
    </Items>
</ext:RadioGroup>

我們定義了一個RadioGroup，它的子項為Radio的集合，效果如下圖：

它的ColumnsNumber屬性控制顯示的列數，Vertical屬性控制顯示的方向，為true表示縱向排列，如果吧Vertical屬性設置為false，相應的效果圖如下：

CheckboxGroup的用法與RadioGroup相同，不再贅言。

FieldSet用法

FieldSet顯示一個fieldset html元素，但與html元素不同的是它可折疊。

代碼如下：

<ext:FieldSet runat="server" Collapsible="true" Collapsed="false" Title="基本信息">
    <Items>
        <ext:TextField runat="server" FieldLabel="姓名"></ext:TextField>
        <ext:TextField runat="server" FieldLabel="密碼"></ext:TextField>
    </Items>
</ext:FieldSet>

FieldContainer 用法

FieldContainer組件用來將字段組合起來顯示，效果如下：

代碼如下：

<ext:FieldContainer runat="server" FieldLabel="地址" Layout="HBoxLayout">
    <Items>
        <ext:TextField runat="server" EmptyText="河南" IndicatorText="省" Width="100"></ext:TextField>
        <ext:TextField runat="server" EmptyText="洛陽" IndicatorText="市" Width="100"></ext:TextField>
        <ext:TextField runat="server" EmptyText="洛龍區" IndicatorText="區" Width="120"></ext:TextField>
    </Items>
</ext:FieldContainer>

FormPanel布局

下面演示一個FormPanel常用的布局，代碼如下：

<ext:Window runat="server" Title="Form 布局" Width="500" Height="300" Layout="FitLayout">
    <Items>
        <ext:FormPanel runat="server" BodyPadding="5" Layout="VBoxLayout">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch"></ext:VBoxLayoutConfig>
            </LayoutConfig>
            <FieldDefaults LabelWidth="60" LabelAlign="Right">
            </FieldDefaults>
            <Items>
                <ext:FieldContainer runat="server" Layout="HBoxLayout">
                    <Items>
                        <ext:TextField runat="server" ID="txtOrderNO" FieldLabel="訂單編號" Flex="1"></ext:TextField>
                        <ext:TextField runat="server" ID="txtLocation" FieldLabel="簽訂地點" Flex="1"></ext:TextField>
                    </Items>
                </ext:FieldContainer>
                <ext:TextArea runat="server" ID="txtRemark" FieldLabel="備注"></ext:TextArea>
            </Items>
            <Buttons>
                <ext:Button runat="server" ID="btnOK" Icon="Accept" Text="確定"></ext:Button>
                <ext:Button runat="server" ID="btnCancel" Icon="Cancel" Text="取消"></ext:Button>
            </Buttons>
        </ext:FormPanel>
    </Items>
</ext:Window>

效果如下圖：