《CooliteToolkit学习笔记九表单布局控件FormLayout与FromPanel.doc》由会员分享，可在线阅读，更多相关《CooliteToolkit学习笔记九表单布局控件FormLayout与FromPanel.doc（6页珍藏版）》请在三一文库上搜索。
1、Coolite Toolkit学习笔记九：表单布局控件FormLayout与FromPanel 本系列笔记的前面几篇分别介绍了Coolite Toolkit的常用控件，从这一篇起将介绍Coolite Toolkit所提供的各种不同的界面布局控件，本篇将要介绍的布局控件是FormLayout和FormPanel，通常使用他们来进行表单界面的布局。 FormLayout在我们平时开发中使用频率非常高，使用它可快速、方便的实现表单界面布局，以及使用一些其他控件自
2、身的特性组合起来实现丰富强大的UI界面。下面通过一个简单示例来体验FormLayout的强大功能。<ext:Panel ID="Panel1" runat="server" Title="用户登录" Width="300" BodyStyle="padding:5px;" > <Body>
3、0; <ext:FormLayout ID="FormLayout1" runat="server" Width="150" > <ext:Anchor Horizontal="100%">
4、0; <ext:TextField ID="tfUserName" runat="server" FieldLabel="用户名" /> </ext:Anchor> &#
5、160; <ext:Anchor Horizontal="100%"> <ext:TextField ID="tfPassword" runat="server" FieldLabel="用户密码" />
6、60; </ext:Anchor> <ext:Anchor Horizontal="100%">
7、; <ext:Button ID="btnLogin" runat="server" Text="登录"/> </ext:Anchor> </ext:FormLayout> <
8、/Body></ext:Panel> Coolite Toolkit规定FromLayout控件必须放置在一个容器控件里，如上则将其放置在Panel控件里，通过FormLayout布局了一个用户登录界面，运行效果如下所示： 如
9、上只是实现了最基本的界面布局，而且效果并不是很理想。OK，下面基于这个上面来做一些调整。现在要实现文本框没有输入数据的时候则提示用户输入，并为其加上非空验证，通过AjaxEvents提供表单提交的事件处理函数，通过Listeners提供表单的提交前的客户端验证功能。相关代码如下： <Body> <ext:FormLayout ID="FormLayout1" runat="server&q
10、uot; Width="150" > <ext:Anchor Horizontal="100%"> <ext:TextField ID="tfUserNa
11、me" runat="server" FieldLabel="用户名" EmptyText="请输入用户名"
12、0; AllowBlank="false" BlankText="用户名不能为空！"/> &
13、#160; </ext:Anchor> <ext:Anchor Horizontal="100%"> <ext:TextField ID=&
14、quot;tfPassword" runat="server" FieldLabel="用户密码" EmptyText="请输
15、入登录密码" InputType="Password" AllowBlank="false"
16、60; BlankText="用户密码不能为空！"/> </ext:Anchor> </ext:FormLayout> <
17、;/Body> <Buttons> <ext:Button ID="btnLogin" Text="登录" runat="server" Icon="Accept">
18、<AjaxEvents> <Click OnEvent="LoginClick"> <EventMask
19、0;ShowMask="true" Msg="正在登录系统" MinDelay="500" /> </Click> </AjaxEvents>
20、60; <Listeners> <Click Handler="if(!#tfUserName.validate() | !#tfPassword.validate()
21、60; Ext.Msg.alert('错误提示','用户名和用户密码不能为空！'); return false;
22、60; " /> </Listeners> </ext:Button>
23、60; <ext:Button ID="btnCancel" Text="清空" runat="server" Icon="Cancel"> <AjaxEvents>
24、60; <Click OnEvent="CancelClick"/> </AjaxEvents> </ext:Button> </Buttons></ext:Panel>
25、 仔细看来FormLayout 控件使用是非常简单的，表单里面具体要设计为什么样子的，最终还得看使用的其他相关控件。在前面提到FormLayout控件需要放置在一个容器内部，其实Coolite Toolkit专们为FromLayout控件提供了一个容器控件FromPanel于之搭配，其使用方法和Panel基本相同，通过FromPanel+FromLayout组合设计出来的UI界面效果更佳。如下邮件发送表单示例：<ext:FormPanel
26、 ID="FormPanel1" runat="server" BodyStyle="padding:5px;" ButtonAlign="Right" Frame="true" Title="邮件发送表单" Width="450"> <Body>
27、60; <ext:FormLayout ID="FormLayout2" runat="server" LabelWidth="60"> <ext:Anchor Horizontal="100%">
28、; <ext:TextField ID="tfTitle" runat="server" FieldLabel="邮件主题" Allow
29、Blank="false" BlankText="邮件主题不能为空"/> </ext:Anchor> <ext:Anchor Horizontal="100%">
30、0; <ext:TextArea ID="tfContent" runat="server" FieldLabel="邮件内容" Height="150"/> </ext:Anc
31、hor> <ext:Anchor Horizontal="100%"> <ext: ID="upAttachment" runat="server"
32、60;FieldLabel="邮件附件" ButtonText="选择附件" /> </ext:Anchor>
33、60; <ext:Anchor Horizontal="100%"> <ext:DateField ID="tfTime" runat="server" FieldLabel="
34、;发送时间"/> </ext:Anchor> </ext:FormLayout> </Body> <Buttons>
35、0;<ext:Button ID="btnSend" runat="server" Icon="WorldGo" Text="发送" > <AjaxEvents>
36、; <Click OnEvent="SendClick" /> </AjaxEvents> </ext:Button> </Buttons></ext:FormPanel>
37、 需要注意的就是FormLayout 的LabelWidth属性，很多新手朋友在学习Coolite Toolkit的FromLayout的时候，都遇到字段名和TextBox中间存在很长的距离怎么也调不了，其实这个距离是可以调整的，通过设置LabelWidth属性值既可。6 / 6文档可自由编辑打印