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

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

image

FieldLabel

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

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

image

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

image

Icon

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

<ext:TextField runat="server" 
    ID="txtName" FieldLabel="用户名" 
    Icon="User"></ext:TextField>

效果如图:

image

默认空白显示的文字

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

<ext:TextField runat="server" 
    ID="txtName" FieldLabel="用户名" 
    Icon="User"
    EmptyText="用户名/邮箱">
</ext:TextField>

效果如下:

image

Note属性

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

<ext:TextField runat="server" 
    ID="txtName" FieldLabel="用户名" 
    Icon="User"
    Note="用户名/邮箱"
    NoteAlign="Down">
</ext:TextField>

效果如下:

image

TextField初始值

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

<ext:TextField runat="server" 
    ID="txtName" FieldLabel="用户名" 
    Icon="User"
    Text="初始化值">
</ext:TextField>

效果如下:

image

登陆窗口完整代码

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

<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>

OK,很简单吧~

本文由起飞网原创首发,感谢您的关注,转载请注明出处。




本文转自齐师傅博客园博客,原文链接:http://www.cnblogs.com/youring2/p/3568370.html,如需转载请自行联系原作者

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值