在上一篇笔记中我们介绍了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>

效果如下图：