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>

效果如下图：

 

本文由起飞网原创首发，转载请注明出处。

原文链接：Ext.Net学习笔记20：Ext.Net FormPanel 复杂用法