Ext.Net学习笔记19：Ext.Net FormPanel 简单用法

FormPanel是一个常用的控件，Ext.Net中的FormPanel控件同样具有非常丰富的功能，在接下来的笔记中我们将一起见证FormPanel的强大。

FieldLabel

FieldLabel属性是每一个Field都具有的属性，它为我们的字段显示一个标签，例如上面登陆窗口中的“用户名”和“密码”。

我们可以通过LabelWidth控制标签的长度，例如我们设置用户名字段的LabelWidth="80"：

LabelAlign可以控制标签的显示位置，可以设置为Top、Left、Right三种，效果如下：

Icon

对于TextField字段来说，我们可以设置它的图标，例如我们输入框中显示的小图标，只需要设置icon属性即可：

<ext:TextField runat="server"

    ID="txtName" FieldLabel="用户名"

    Icon="User"></ext:TextField>

效果如图：

默认空白显示的文字

我们可以通过设置属性来实现在输入框没有输入内容（空白）时显示的文字，代码如下：

<ext:TextField runat="server"

    ID="txtName" FieldLabel="用户名"

    Icon="User"

    EmptyText="用户名/邮箱">

</ext:TextField>

效果如下：

Note属性

Note是字段的一个描述文字，可以通过NoteAlign控制显示的位置。

<ext:TextField runat="server"

    ID="txtName" FieldLabel="用户名"

    Icon="User"

    Note="用户名/邮箱"

    NoteAlign="Down">

</ext:TextField>

效果如下：

TextField初始值

设置Text属性可以为TextField设置初始值：

<ext:TextField runat="server"

    ID="txtName" FieldLabel="用户名"

    Icon="User"

    Text="初始化值">

</ext:TextField>

效果如下：

登陆窗口完整代码

接下来我们给出笔记开始时所看到的登陆窗口的代码：

<ext:Window runat="server" Title="用户登录" Width="300" Height="200" Layout="FitLayout" Icon="UserGo">

    <Items>

        <ext:FormPanel ID="FormPanel1" runat="server" Layout="FormLayout" BodyPadding="5">

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

            <Items>

                <ext:TextField runat="server"

                    ID="txtName"

                    FieldLabel="用户名"

                    Icon="User">

                </ext:TextField>

                <ext:TextField runat="server"

                    ID="txtPassword"

                    FieldLabel="密码"

                    Icon="Key"

                    InputType="Password">

                </ext:TextField>

            </Items>

            <Buttons>

                <ext:Button runat="server" Text="登陆" Icon="Accept"></ext:Button>

                <ext:Button runat="server" Text="注册" Icon="UserAdd"></ext:Button>

            </Buttons>

        </ext:FormPanel>

    </Items>

</ext:Window>