《Ext2.0form使用实例》由会员分享，可在线阅读，更多相关《Ext2.0form使用实例（29页珍藏版）》请在金锄头文库上搜索。
1、Ext2.0 form使用实例Ext2.0的form不单增加了时间输入控件、隐藏输入控件，还修改了创建方法，通过formpanel代替了原来form，column也根据新的布局定义更新了定义方式。总体来说，定义一个form更简单便捷了。本文将通过一个实例介绍一下2.0的form的创建以及其大部分控件的使用方法，因水平有限，错漏难免，忘大家多多谅解！我们先来看看我们将要设计的form的情况： 呵呵，form有点杂乱，不过在这个form里包含了绝大部分Ext2.0的控件，我将会和大家一起探讨一下这些控件的使用。在创建一个form之前，我们先增加以下语句： Ext.QuickTips.init();
2、 Ext.form.Field.prototype.msgTarget = side;推荐精选第一句的目的是为需要的元件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息了。第二句的目的就是设置控件的错误信息显示位置，主要可选的位置有：位置值描述qtip当鼠标移动到控件上面时显示提示title在浏览器的标题显示，但是测试结果是和qtip一样的under在控件的底下显示错误提示side在控件右边显示一个错误图标，鼠标指向图标时显示错误提示element id错误提示显示在指定id的HTML元件中这个大家可以根据各人喜好设置，我习惯使用“side”，这里有一点要注意的，就是注意控制控
3、件的宽度，以防不够宽度显示错误图标，这个下面会说到。好了，现在创建我们的form，2.0的方法就是直接创建一个formpanel：var simpleForm = new Ext.FormPanel( labelAlign: left, title: 表单例子, buttonAlign:right, bodyStyle:padding:5px, width: 600, frame:true, labelWidth:80,items: ,buttons: );simpleForm.render(document.body);推荐精选在formpanle里，我们定义了form控件的标题是在左边的（
4、labelAlign: left）；form的标题栏显示标题“表单的例子”；它的按钮位置是在右对齐的（buttonAlign:right）；边的类型设置了内补丁5px（bodyStyle:padding:5px）；总宽度是600px；设置了面板的边角是圆弧过度的（frame:true），我设置这个属性主要目的不是因为边角，而是因为背景，如果不设置这个，背景颜色将为白色，设置了这个将会加入海蓝色的背景图，好看点；还设置了form控件的标题宽度是80px（labelWidth:80）。还有一些其它的设置选项，我这里就不多说，大家可以参看2.0的API。items数组的设置是我们的重点了，form上
5、的所有控件都是在这里设置的。从form的结构图中看到，form整体上是分了两列的（实际上不是的，呵呵）。因为要分列，所以要使用columnLayout类。在使用columnLayout类之前，我们需要了解一下CSS中float属性的作用，改属性主要作用是设置对象是否及如何浮动，属性值为none、left和right三个。column设置是left，意思就是对象浮在左边的。那这个有什么作用呢？其实这个和我们在word中输入文字，默认文字是左对齐的，当一行文字的宽度超过页面的宽度时将自动换行是一样的。 我们通过一个例子来说明一下。首先我们定义一个div，背景色是黑色，宽度和高度都是200： 然后在
6、里面加入2个div，每个宽度和高度都是200，背景色一个是红色，一个是绿色： 我们来看看效果：推荐精选 在没有使用float之前，两个子div是分别各占一行的。好，现在我们在两个子div中加入“float:left”在看看效果： 推荐精选 两个子div出现在同一行了。我们复制一下两个子div，粘贴两次，然后看看效果： 推荐精选 6个子div有序的按左对齐方式排列在一起了，当一行的子div的宽度超过了父div的宽度时，子div自动换行到了第二行。不知道大家是否看得明白？看不明白自己再动手改变一下子div的宽度和高度，看看效果。column的工作方式就是这样的。明白这个很重要，因为在定义check
7、box和radio的时候，如果想它们的选项在同一行，就要注意column的宽度，不然就无法让他们在同一行。不过现在column是通过百分比来定义宽度的，我们只要控制好百分比就行了。好了，我们继续写form，因为要用到column，所以我们先在formpanel的itmes加入一个column的定义： layout:column, border:false, labelSeparator:：, items:推荐精选代码里定义了在这里使用的是columnlayout（layout:column）；没有边（border:false）；标题的分隔符号我们用中文冒号代替英文的冒号（labelSepara
8、tor:：）。coulmnLayout里的控件将定义在items里。我们首先在items里加入一个常用输入控件，是用来输入姓名的： columnWidth:.5, layout: form, border:false, items: xtype:textfield, fieldLabel: 姓名, name: name, anchor:90% 我们设置了该列的宽度占总宽度的50%（columnWidth:.5）；在布局里放了一个formlayout用来放置控件（layout: form）；formlayout也是没有边的（border:false）。在formlayout里有一个类型为text
9、field（xtype:textfield）的输入控件。控件标题为姓名（fieldLabel: 姓名），输入框（input）的name属性设置“name”（name: name），输入框的长度为列宽减去标题的宽度后的90%（anchor:90%），余下的10%的是给显示错误信息图标用的。在加入性别的radio控件时就要注意了，这里需要加入两个radio，第一radio是有标题的，第二是没有的，而且两个radio加起来的宽度应该正好是余下的列宽（50%）：推荐精选 columnWidth:.25, layout: form, border:false, items: style:margin-top:5px, xtype:radio, fieldLabel: 性别, boxLabel:男, name: sex, checked:true, inputValue:男, anchor:95% , columnWidth:.25, layout: form, labelWidth:0, labelSeparator:, hideLabels:true, border:false, items: style:margin-top:5px,推荐精选 xtype:radio,
