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>

效果如下图：