Coolite Toolkit学习笔记九:表单布局控件FormLayout与FromPanel
FormLayout在我们平时开发中使用频率非常高,使用它可快速、方便的实现表单界面布局,以及使用一些其他控件自身的特性组合起来实现丰富强大的UI界面。下面通过一个简单示例来体验FormLayout的强大功能。
<Body>
<ext:FormLayout ID="FormLayout1" runat="server" Width="150" >
<ext:Anchor Horizontal="100%">
<ext:TextField ID="tfUserName" runat="server" FieldLabel="用户名" />
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:TextField ID="tfPassword" runat="server" FieldLabel="用户密码" />
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:Button ID="btnLogin" runat="server" Text="登录"/>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
Coolite Toolkit规定FromLayout控件必须放置在一个容器控件里,如上则将其放置在Panel控件里,通过FormLayout布局了一个用户登录界面,运行效果如下所示:
如上只是实现了最基本的界面布局,而且效果并不是很理想。OK,下面基于这个上面来做一些调整。现在要实现文本框没有输入数据的时候则提示用户输入,并为其加上非空验证,通过AjaxEvents提供表单提交的事件处理函数,通过Listeners提供表单的提交前的客户端验证功能。相关代码如下:
<ext:FormLayout ID="FormLayout1" runat="server" Width="150" >
<ext:Anchor Horizontal="100%">
<ext:TextField ID="tfUserName" runat="server"
FieldLabel="用户名"
EmptyText="请输入用户名"
AllowBlank="false"
BlankText="用户名不能为空!"/>
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:TextField ID="tfPassword" runat="server"
FieldLabel="用户密码"
EmptyText="请输入登录密码"
InputType="Password"
AllowBlank="false"
BlankText="用户密码不能为空!"/>
</ext:Anchor>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button ID="btnLogin" Text="登录" runat="server" Icon="Accept">
<AjaxEvents>
<Click OnEvent="LoginClick">
<EventMask ShowMask="true" Msg="正在登录系统" MinDelay="500" />
</Click>
</AjaxEvents>
<Listeners>
<Click Handler="if(!#{tfUserName}.validate() || !#{tfPassword}.validate()) {
Ext.Msg.alert('错误提示','用户名和用户密码不能为空!');
return false;
}" />
</Listeners>
</ext:Button>
<ext:Button ID="btnCancel" Text="清空" runat="server" Icon="Cancel">
<AjaxEvents>
<Click OnEvent="CancelClick"/>
</AjaxEvents>
</ext:Button>
</Buttons>
</ext:Panel>
仔细看来FormLayout 控件使用是非常简单的,表单里面具体要设计为什么样子的,最终还得看使用的其他相关控件。在前面提到FormLayout控件需要放置在一个容器内部,其实Coolite Toolkit专们为FromLayout控件提供了一个容器控件FromPanel于之搭配,其使用方法和Panel基本相同,通过FromPanel+FromLayout组合设计出来的UI界面效果更佳。如下邮件发送表单示例:
Frame="true" Title="邮件发送表单" Width="450">
<Body>
<ext:FormLayout ID="FormLayout2" runat="server" LabelWidth="60">
<ext:Anchor Horizontal="100%">
<ext:TextField ID="tfTitle" runat="server" FieldLabel="邮件主题"
AllowBlank="false" BlankText="邮件主题不能为空"/>
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:TextArea ID="tfContent" runat="server" FieldLabel="邮件内容" Height="150"/>
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:FileUploadField ID="upAttachment" runat="server" FieldLabel="邮件附件"
ButtonText="选择附件" />
</ext:Anchor>
<ext:Anchor Horizontal="100%">
<ext:DateField ID="tfTime" runat="server" FieldLabel="发送时间"/>
</ext:Anchor>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button ID="btnSend" runat="server" Icon="WorldGo" Text="发送" >
<AjaxEvents>
<Click OnEvent="SendClick" />
</AjaxEvents>
</ext:Button>
</Buttons>
</ext:FormPanel>
需要注意的就是FormLayout 的LabelWidth属性,很多新手朋友在学习Coolite Toolkit的FromLayout的时候,都遇到字段名和TextBox中间存在很长的距离怎么也调不了,其实这个距离是可以调整的,通过设置LabelWidth属性值既可。
注:此文章转载至Bēniaǒ成长笔记
Coolite Toolkit学习笔记九:表单布局控件FormLayout与FromPanel相关推荐
- python嵌套html开发gui_python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例...
PyQt5布局控件QFormLayout简介 QFormLayout是label-field式的表单布局,顾明思议,就是实现表单方式的布局,表单是提示用户进行交互的一种模式,主要有两列组成,第一列用于 ...
- Coolite Toolkit学习笔记系列文章
Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件.它是基于跨浏览器的ExtJS 库开发而来的,并且简化了开发步骤,并且包含有丰富的Ajax运用,同ExtJS 一样都是开源 ...
- Coolite Toolkit学习笔记四:容器控件之FiledSet、Panel和Window
一.FieldSet控件 FieldSet控件在开发中使用率还是很高的,毕竟Web中微软没有提供Group控件,通常都是使用FieldSet来进行表单等界面布局分组.在Coolite To ...
- python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍 表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...
- ASP.NET MVC 2 学习笔记二: 表单的灵活提交
ASP.NET MVC 2 学习笔记二: 表单的灵活提交 前面说到有做到公司内部的一个请假系统,用的是ASP.NET MVC 2+Entity Framework.虽然EF(Entity Frame ...
- java学习笔记(三):前端miniUI控件库入门
java学习笔记(三):前端miniUI控件库入门 最近在一家公司实习学习,一上来就需要学习了解相关的前端内容--miniUI.而这个内容自己本身并没有了解学习过,上手也是遇到了不少的问题,于是想把自 ...
- asp.net夜话之三:表单和控件
在今天我主要要介绍的有如下知识点: HTML表单的提交方式 HTM控件 获取HTML表单内容 乱码问题 SQL注入 服务器端表单 HTML服务器控件 HTML表单的提交方式对于一个普通HTML表单来说 ...
- vs2010 学习Silverlight学习笔记(8):使用用户控件
概要: 这个类似于封装控件样式.不过封装的是整个或是多个控件罢了,然后用的时候就可以直接引用过来了. 创建用户控: 这个也很简单,不过有几个地方需要注意下.这个就不照抄了,咱们也自己写一个. 步骤: ...
- ASP.Net学习笔记002--ASP.Net服务端控件做了什么2
ASP.Net学习笔记002--ASP.Net服务端控件做了什么2 以前写的课程都没有附上源码,很抱歉! 课程中的源码可以加qq索要:1606841559 技术交流qq1群:251572072 技术交 ...
最新文章
- css3价格斜切_CSS3倾斜skew()方法_CSS3教程_绿叶学习网
- 23个CVPR 2020收录的新数据集,都在这里了!
- Eclipse中Java文件图标由实心J变成空心J的问题
- 删除input框type=number时,默认的上下小箭头
- 网上收集的关于iframe的自适应高度代码js的
- Google总裁:未来互联网要消失!物联网将无处不在。
- 事务的控制(保存点)
- Qracle学习:初识oracle
- jQuery 入口函数主要有4种写法
- html textarea 自动高度,HTML页面中textarea高度自适应解决方案
- 通用usb集线器驱动_多口充电、高速传输——ORICO晶锐系列7口集线器测评
- GIT上传下载报错:[You do not have permission to pull from the repository]的解决方案!
- iOS多线程:『pthread、NSThread』详尽总结
- 安装虚拟机时遇到的问题
- python源码中的学习笔记_第8章_函数
- 用css样式修改input控件和button控件
- Android ROM 小白普及
- Ubuntu 环境搭建系列--ubuntu20.04 tftp服务搭建
- 无线系列-WiFi信号波形产生器
- Java实现建行聚合支付对接及其回调
热门文章
- case when用法java_Oracle CASE WHEN 用法介绍
- Java高并发编程:取消和关闭
- 所长不会用计算机,梅州市公安局: 两派出所所长不会电脑被停职
- mac sublime html开发环境,在Mac下用Sublime Text 2 架设C开发环境
- python 断点下载_python多进程断点续传分片下载器
- java $ 用法_Java的Volatile实例用法及讲解
- 解一元二次方程的C++实现
- java 多线程 day12 读写锁
- 导入Scrapy 项目报错:no module named scrapy
- magento 修改产品类型的方法 change product type