Ext2.0 form使用实例

yesjavame

浏览: 687777 次
性别:
来自: 杭州

最近访客更多访客>>

superages

zjut_wyj

zjzouxu

jcyanfan

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1234)

社区版块

存档分类

EXT F#prototype CSS 数据结构

Ext2.0的form不单增加了时间输入控件、隐藏输入控件，还修改了创建方法，通过formpanel代替了原来form，column也根据新的布局定义更新了定义方式。总体来说，定义一个form更简单便捷了。本文将通过一个实例介绍一下2.0的form的创建以及其大部分控件的使用方法，因水平有限，错漏难免，忘大家多多谅解！

我们先来看看我们将要设计的form的情况：

<!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600"
   o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"
   stroked="f">
   <v:stroke joinstyle="miter" />
   <v:formulas>
    <v:f eqn="if lineDrawn pixelLineWidth 0" />
    <v:f eqn="sum @0 1 0" />
    <v:f eqn="sum 0 0 @1" />
    <v:f eqn="prod @2 1 2" />
    <v:f eqn="prod @3 21600 pixelWidth" />
    <v:f eqn="prod @3 21600 pixelHeight" />
    <v:f eqn="sum @0 0 1" />
    <v:f eqn="prod @6 1 2" />
    <v:f eqn="prod @7 21600 pixelWidth" />
    <v:f eqn="sum @8 21600 0" />
    <v:f eqn="prod @7 21600 pixelHeight" />
    <v:f eqn="sum @10 21600 0" />
   </v:formulas>
   <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" />
   <o:lock v:ext="edit" aspectratio="t" />
  </v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:414.75pt;
   height:292.5pt'>
   <v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\04\clip_image001.jpg"
    o:title="form-1" />
  </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

呵呵，form有点杂乱，不过在这个fomr里包含了绝大部分Ext2.0的控件，我将会和大家一起探讨一下这些控件的使用。

在创建一个form之前，我们先增加以下语句：

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

第一句的目的是为需要的元件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息了。

第二句的目的就是设置控件的错误信息显示位置，主要可选的位置有：

位置值	描述
qtip	当鼠标移动到控件上面时显示提示
title	在浏览器的标题显示，但是测试结果是和qtip一样的
under	在控件的底下显示错误提示
side	在控件右边显示一个错误图标，鼠标指向图标时显示错误提示
[element id]	错误提示显示在指定id的HTML元件中

这个大家可以根据各人喜好设置，我习惯使用“side”，这里有一点要注意的，就是注意控制控件的宽度，以防不够宽度显示错误图标，这个下面会说到。

好了，现在创建我们的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控件的标题是在左边的（labelAlign: 'left'）；form的标题栏显示标题“表单的例子”；它的按钮位置是在右对齐的（buttonAlign:'right'）；边的类型设置了内补丁5px（bodyStyle:'padding:5px'）；总宽度是600px；设置了面板的边角是圆弧过度的（frame:true），我设置这个属性主要目的不是因为边角，而是因为背景，如果不设置这个，背景颜色将为白色，设置了这个将会加入海蓝色的背景图，好看点；还设置了form控件的标题宽度是80px（labelWidth:80）。还有一些其它的设置选项，我这里就不多说，大家可以参看2.0的API。

items数组的设置是我们的重点了，form上的所有控件都是在这里设置的。

从form的结构图中看到，form整体上是分了两列的（实际上不是的，呵呵）。因为要分列，所以要使用columnLayout类。在使用columnLayout类之前，我们需要了解一下CSS中float属性的作用，改属性主要作用是设置对象是否及如何浮动，属性值为none、left和right三个。column设置是left，意思就是对象浮在左边的。那这个有什么作用呢？其实这个和我们在word中输入文字，默认文字是左对齐的，当一行文字的宽度超过页面的宽度时将自动换行是一样的。我们通过一个例子来说明一下。

首先我们定义一个div，背景色是黑色，宽度和高度都是200：

</div>

然后在里面加入2个div，每个宽度和高度都是200，背景色一个是红色，一个是绿色：

</div>

我们来看看效果：

<!--[if gte vml 1]><v:shape id="_x0000_i1026" type="#_x0000_t75"
   style='width:209.25pt;height:210.75pt'>
   <v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\04\clip_image003.jpg"
    o:title="form-2" />
  </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

在没有使用float之前，两个子div是分别各占一行的。好，现在我们在两个子div中加入“float:left”在看看效果：

</div>

<!--[if gte vml 1]><v:shape id="_x0000_i1027" type="#_x0000_t75"
   style='width:212.25pt;height:207.75pt'>
   <v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\04\clip_image005.jpg"
    o:title="form-3" />
  </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

两个子div出现在同一行了。我们复制一下两个子div，粘贴两次，然后看看效果：

</div>

<!--[if gte vml 1]><v:shape id="_x0000_i1028" type="#_x0000_t75"
   style='width:209.25pt;height:209.25pt'>
   <v:imagedata src="file:///C:\DOCUME~1\ADMINI~1\LOCALS~1\Temp\msohtml1\04\clip_image007.jpg"
    o:title="form-4" />
  </v:shape><![endif]--><!--[if !vml]--><!--[endif]-->

6个子div有序的按左对齐方式排列在一起了，当一行的子div的宽度超过了父div的宽度时，子div自动换行到了第二行。

不知道大家是否看得明白？看不明白自己再动手改变一下子div的宽度和高度，看看效果。column的工作方式就是这样的。明白这个很重要，因为在定义checkbox和radio的时候，如果想它们的选项在同一行，就要注意column的宽度，不然就无法让他们在同一行。不过现在column是通过百分比来定义宽度的，我们只要控制好百分比就行了。

好了，我们继续写form，因为要用到column，所以我们先在formpanel的itmes加入一个column的定义：

{

layout:'column',

border:false,

labelSeparator:'：',

items:[]

}

代码里定义了在这里使用的是columnlayout（layout:'column'）；没有边（border:false）；标题的分隔符号我们用中文冒号代替英文的冒号（labelSeparator:'：'）。coulmnLayout里的控件将定义在items里。

我们首先在items里加入一个常用输入控件，是用来输入姓名的：

{

columnWidth:.5,

border:false,

items: [{

xtype:'textfield',

fieldLabel: '姓名',

anchor:'90%'

}]

}

我们设置了该列的宽度占总宽度的50%（columnWidth:.5）；在布局里放了一个formlayout用来放置控件（layout: 'form'）；formlayout也是没有边的（border:false）。在formlayout里有一个类型为textfield'（xtype:'textfield'）的输入控件。控件标题为姓名（fieldLabel: '姓名'），输入框（input）的name属性设置“name”（name: 'name'），输入框的长度为列宽减去标题的宽度后的90%（anchor:'90%'），余下的10%的是给显示错误信息图标用的。

在加入性别的radio控件时就要注意了，这里需要加入两个radio，第一radio是有标题的，第二是没有的，而且两个radio加起来的宽度应该正好是余下的列宽（50%）：

{

columnWidth:.25,

border:false,

items: [{

style:'margin-top:5px',

xtype:'radio',

fieldLabel: '性别',

boxLabel:'男',

checked:true,

inputValue:'男',

anchor:'95%'

}]

},{

columnWidth:.25,

labelWidth:0,

labelSeparator:'',

hideLabels:true,

border:false,

items: [{

style:'margin-top:5px',

xtype:'radio',

fieldLabel: '',

boxLabel:'女',

inputValue:'女',

anchor:'95%'

}]

}

从代码中可以看到，除了列宽设置为25%外，其它的列设置和第一控件是一样。Formlayout里加入了一个类型为radio的控件。控件的标题是性别，控件的选择显示文本是男（boxLabel:'男），input的name属性值是sex（name: 'sex'），该控件默认是已选的（checked:true），控件的值（value）是男（inputValue:'男'），input的宽度是95%。在这里我还设置一个css属性，顶部的外补丁为5px（style:'margin-top:5px'），原因是为了选择按钮和标题对齐，大家可以将该属性去掉然后看看效果。

第二个raido控件的列设置就有所不同，因为它不需要标题，所以要设置隐藏标题（hideLabels:true），标题的宽度设置为0（labelWidth:0）,还要设置其标题分隔符号为空（labelSeparator:''）。其余的设置和第一个radio的设置没有不同，只是input的值不同了。

我们已经设置了3列，3列的列宽分别为50%、25%、25%，根据float的原则，下一列将从第二行开始。

在第二行第一列我们要增加的是一个日期选择控件：

{

columnWidth:.5,

border:false,

items: [{

xtype:'datefield',

fieldLabel: '出生日期',

anchor:'90%'

}]

}

日期控件的列宽也是50%，列的其它设置没有变化。控件的类型为datefield，标题是出生日期，input的name属性是birthday，intput宽度也是设置了90%，出来留出空位给错误信息外，还可以让控件与上一行的姓名的宽度相同，整列看起来比较整齐。

日期控件的设置和普通文本输入的设置一样简单，这里就不多说了。不过要说到的是汉化的问题。在2.0版自带的本地化文件ext-lang-zh.js中存在一些小bug，我们需要自己修改一下。

首先要修改的是周的显示，原来的定义是：

Date.dayNames = [

"周日",

"周一",

"周二",

"周三",

"周四",

"周五",

"周六"

];

因为在日期选择中显示的区域不够宽，只能显示一个汉字，所以需要将上面定义的把“周”去掉，修改为：

Date.dayNames = [

"日",

"一",

"二",

"三",

"四",

"五",

"六"

];

在年份和月份选择中的按钮文字还是英文“ok”和“cancel”的，这里我们也需要修改一下：

if(Ext.DatePicker){

Ext.apply(Ext.DatePicker.prototype, {

todayText : "今天",

minText : "日期在最小日期之前",

maxText : "日期在最大日期之后",

disabledDaysText : "",

disabledDatesText : "",

monthNames : Date.monthNames,

dayNames : Date.dayNames,

nextText : '下月 (Control+Right)',

prevText : '上月 (Control+Left)',

monthYearText : '选择一个月 (Control+Up/Down 来改变年)',

todayTip : "{0} (Spacebar)",

okText : "确定",

cancelText : "取消",

format : "y年m月d日"

});

}

上面定义中黑色字体部分就是要加入的代码。如果不喜欢默认格式是“y年m月d日”，需要修改：

if(Ext.form.DateField){

Ext.apply(Ext.form.DateField.prototype, {

disabledDaysText : "禁用",

disabledDatesText : "禁用",

minText : "该输入项的日期必须在 {0} 之后",

maxText : "该输入项的日期必须在 {0} 之前",

invalidText : "{0} 是无效的日期 - 必须符合格式： {1}",

format : "Y-m-d"

});

}

修改DatePicker不会改变DateField的格式的，这个自己根据情况决定，呵呵。

我们继续，现在需要加入一个学历的下拉选择控件。下来选择控件最重要的一个定义就是数据的定义的，数据定义错误，可能得不到我们需要的效果，也是很多朋友感觉最麻烦的地方。

{

columnWidth:.5,

border:false,

items: [{

xtype:'combo',

store: new Ext.data.SimpleStore(

{

fields: ["retrunValue", "displayText"],

data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]

}),

valueField :"retrunValue",

displayField: "displayText",

mode: 'local',

forceSelection: true,

blankText:'请选择学历',

emptyText:'选择学历',

hiddenName:'education',

editable: false,

triggerAction: 'all',

allowBlank:false,

fieldLabel: '学历',

anchor:'90%'

}]

}

列的定义就不说了，没变化。在items里，类型设置成combo了，在这里定义了一个sotre属性，就是选择值存储的地方，因为是在客户端的数据，所以使用了一个简单存储（SimpleStore）。在存储里，我们通过一个数组定义了retrunValue和displayText两个字段。retrunValue字段指定是提交给后台的值，displayText字段指定是在下拉中显示的选择值。然后我们在data里定义了几组数据（data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[3,'大学']]），我们可以看到，每组数据都是根据fiedls的定义来组成的，数组里第一个值就是retrunValue的值，第二个值就是displayText的值，例如[1,'小学']，就表示retrunValue是1，displayText是小学。

下面就是很重要的一步了，设置下拉选择框的值和显示文本。本例中设置了下拉选择框的提交值对象的是存储中的retrunValue字段（valueField :"retrunValue"），显示文本是存储中的displayText字段（displayField: "displayText"），通过这两个设置就可将存储中的数据和下拉框对应起来。

因为数据是在本地，所以设置了模式为local（mode: 'local'）。该下拉列表只允许选择，不允许输入（editable: false），而且是必须选择一个选项（forceSelection: true）。在没有选择值时显示为选择学历（emptyText:'选择学历'）。提交form时，该项如果没有选择，则提示错误信息“请选择学历”（blankText:'请选择学历'）。该选项值不允许为空（allowBlank:false）。大家要注意的是hiddenName和name属性，name只是改下拉的名称，作用是可通过，而hiddenName才是提交到后台的input的name。如果没有设置hiddenName，在后台是接收不到结构的，这个大家一定要注意。

因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。

如果要为控件设置默认值，就设置属性value，value的值要设置为提交给后台的值，不要设置为显示文本。例如本例要设置大学为默认值得，则设置value的值为6。

现在到第三行了，我们要创建一个checkbox选项输入：

{

columnWidth:.35,

border:false,

items: [{

xtype:'checkbox',

fieldLabel: '权限组',

boxLabel:'系统管理员',

inputValue:'1',

anchor:'95%'

}]

},{

columnWidth:.2,

labelWidth:0,

labelSeparator:'',

hideLabels:true,

border:false,

items: [{

xtype:'checkbox',

fieldLabel: '',

boxLabel:'管理员',

inputValue:'2',

anchor:'95%'

}]

},{

columnWidth:.2,

labelWidth:0,

labelSeparator:'',

hideLabels:true,

border:false,

items: [{

xtype:'checkbox',

fieldLabel: '',

boxLabel:'普通用户',

inputValue:'3',

anchor:'95%'

}]

},{

columnWidth:.25,

labelWidth:0,

labelSeparator:'',

hideLabels:true,

border:false,

items: [{

xtype:'checkbox',

fieldLabel: '',

boxLabel:'访客',

inputValue:'4',

anchor:'95%'

}]

}

checkbox的设置和radio的设置大同小异，大家注意列宽的定义就行。

第四行的两个输入框主要是测试通过vtypes属性来验证输入框的输入的：

<sp

分享到：

解释一个struts2抛出的异常 | 一个用ext做的登录页面

2007-10-02 00:41
浏览 462
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论