表单面板的综合

1、表单面板的综合我们先来看看前台 JS： Ext.onReady(function() Ext.QuickTips.init();/ 浮动信息提示 Ext.form.Ftotype.msgTarget= 'side'/设置控件的错误信息显示位置，主要可选的位置有： qtip,title,under,side,elementIdExt.BLANK_IMAGE_URL = 'resources/images/default/s.gif'/ 替换图片文件地址为本地 var simpleForm = new Ext.FormPanel(renderTo :

2、 document.body, labelAlign : 'left', title : '表单例子 ',buttonAlign : 'right', bodyStyle : 'padding:5px', width : 600, frame : true, labelWidth : 80, items : layout : 'column',/ columnlayoutborder : false,/没有边框labelSeparator : '： ',/标题的分隔符号我们用中文冒号代替英文的冒号

3、(labelSeparator:' ： ' )。/ coulmnLayout里的控件将定义在 items 里items : columnWidth : .5,/设置了该列的宽度占总宽度的 50%columnWidth:.5 )layout : 'form',/ formlayout用来放置控件border : false,/没有边框items : xtype : 'textfield',/在 formlayout 里有一个类型为 textfield'( xtype:'textfield' )的输入控件fieldLabel

4、: '姓名 ',/控件标题为姓名name : 'n ame',输入框(in put )的 n ame属性设置“ n ameanchor : '90%'/ 输入框的长度为列宽减去标题的宽度后的 90% (anchor:'90%' )，余下的 10%的是给显示错误信息图标用的。, columnWidth : .25,/ 在加入性别的 radio 控件时就要注意了，这 里需要加入两个 radio ，第一 radio 是有标题的，第二是没有的，而 且两个 radio 加起来的宽度应该正好是余下的列宽( 50%)layout : '

5、form',border : false, items : style : 'margin-top:5px',/设置一个 css 属性，顶部的外补丁为5px(style:'margin-top:5px')，原因是为了选择按钮和标题对齐，大家可以将该属性去掉然后看看效果。xtype : 'radio',/ Formlayout 里加入了一个类型为 radio 的控件fieldLabel : ' 性别 ',/ 控件的标题是性别boxLabel : '男',/控件的选择显示文本是男n ame : 'sex

6、',/ in put 的 n ame属性值是 sexchecked : true,/ 该控件默认是已选的inputValue : ' 男',/ 控件的值( value )是男anchor : '95%'/ input 的宽度是 95%, columnWidth : .25,/ 我们已经设置了 3列，3 列的列宽分别为 50%、 25%、25%layout : 'form',labelWidth : 0,/ 标题的宽度设置为 0labelSeparator : '',/标题分隔符号为空hideLabels : true,/第

7、二个 raido 控件的列设置就有所不同，因为它不需要标题，所以要设置隐藏标题border : false,items : style : 'margin-top:5px',xtype : 'radio',fieldLabel : '', boxLabel : ' 女', name : 'sex', inputValue : ' 女 ', anchor : '95%'/ 上面是第一行 , 以下每行布局同 上！, layout : 'column',border : f

8、alse,labelSeparator : '： ',items : columnWidth : .5,layout : 'form', border : false, items : xtype : 'datefield',/ 控件的类型为 datefield fieldLabel : '出生日期 ',name : 'birthday', anchor : '90%', columnWidth : .5, layout : 'form', border : false, items

9、 : xtype : 'combo',/ 控件的类型设置成 combo / 这里定义了一个 sotre 属性，就是选择值存储的地方，因为是在 客户端的数据，所以使用了一个简单存储( SimpleStore )。store : new Ext.data.SimpleStore( / 通过一个数组定义了 returnValue 和 displayText 两个字段。 retrunValue 字段指定是提交给后台的值， displayText 字段指定是 在下拉中显示的选择值。fields : "returnValue", "displayText&qu

10、ot;,/ 定义了几组数据 . 每组数据都是根据 fiedls 的定义来组成的，数 组里第一个值就是 retrunValue 的值，第二个值就是 displayText 的 值，例如 1,' 小学 ' ，就表示 retrunValue 是 1，displayText 是小 学。data : 1, '小学', 2, '初中',3, ' 高中', 4, '中专',5, ' 大专', 6, '大学'),valueField : "returnValue",/设置下拉选择

11、框的值displayField : "displayText",/设置下拉选择框的显示文本mode : 'local',/数据是在本地forceSelection : true,/ 必须选择一个选项blankText : ' 请选择学历 ',/ 提交 form 时，该项如果没有选择，则提示错误信息 "请选择学历 " emptyText : ' 选择学历 ',/ 在没有选择值时显示为选择学历hiddenName : 'education',/大家要注意的是 hiddenName禾口 name属

12、性，name只是下拉列表的名称，作用是可通过，而 hiddenName才 是提交到后台的in put的name如果没有设置hidde nName在后台 是接收不到数据的，这个大家一定要注意。editable : false,/ 该下拉列表只允许选择，不允许输入triggerAction : 'all',/因为这个下拉是只能选择的，所以一定要设置属性 triggerAction 为 all ，不然当你选择了某个选项后，你 的下拉将只会出现匹配选项值文本的选择项， 其它选择项是不会再显 示了，这样你就不能更改其它选项了。allowBlank : false,/该选项值不允许为空fi

13、eldLabel : ' 学历',/ 控件的标题是学历name : 'education',/再次提醒，n ame只是下拉列表的名称anchor : '90%'/ input的宽度是 90% /上面是第二行，下面我们要创建一个checkbox选项输入。checkbox的设置和radio的设置大同小异, 大家注意列宽的定义就行。, layout : 'column',border : 'false', labelSeparator : items : columnWidth : .35, layout : '

14、form', border : false, items : xtype : 'checkbox', fieldLabel : ' 权限组 ', boxLabel : ' 系统管理员 ', name : 'popedom', inputValue : '1', anchor : '95%', columnWidth : .2, layout : 'form',labelWidth : 0, labelSeparator : '', hideLabels : t

15、rue, border : false, items : xtype : 'checkbox', fieldLabel : '', boxLabel : ' 管理员 ', name : 'pepedom', inputValue : '2', anchor : '95%', columnWidth : .2, layout : 'form', labelWidth : 0,labelSeparator : '' hideLabels : true,border : f

16、alse,items : xtype : 'checkbox',fieldLabel : '',boxLabel : ' 普通用户 ',name : 'pepedom',inputValue : '3',anchor : '95%', columnWidth : .25,layout : 'form', labelWidth : 0, labelSeparator : '',hideLabels : true, border : false,items : xtype

17、 : 'checkbox',fieldLabel : '', boxLabel : ' 访客 ', name : 'pepedom', inputValue : '4', anchor : '95%'/ 上面是第三行，下面的两个输入 框主要是测试通过 vtypes 属性来验证输入框的输入的, layout : 'column', border : false, labelSeparator : '： ',items : columnWidth : .5,layout

18、: 'form', border : false,items : xtype : 'textfield',fieldLabel : ' 电子邮件 ',name : 'email',vtype : 'email',/ 这里的定义和普通的文本输入框没什么区别， 只是多了一个vtypes的属性定义。Vtypes里总共定义了 email、url、 alpha和alpha num四种类型数据格式，email和url这个不用介绍了， 呵呵。alpha是字母和下划线的组合，alpha num是字母、下划线和数 字的组合。allo

19、wBlank : false,anchor : '90%', columnWidth : .5,layout : 'form', border : false,items : xtype : 'textfield',fieldLabel : '个人主页 ',name : 'url', vtype : 'url',anchor : '90%'/上面是第四行 , 下面要加入一个tabpanel ，加入 3 个 tab 页。 , xtype : 'tabpanel',/注意

20、将 xtype 类型设置为 'tabpanel'plain : true,/将标签页头的背景设置为透明的activeTab: 0,/ 当前活动的标签页是第一页height : 235,/高度设置为 235pxdefaults : bodyStyle :'padding:10px',/ tab页的面板使用内补丁 10pxitems : / 第一页 主要有两个输入控件， 一个是 vtypes 类型 alphanum 的登录输入框和 一个密码输入框。title : '登录信息',/ 标签标题是登录信息layout : 'form',/

21、控件容器是 formlayoutdefaults : width : 230,/ 控件的默认宽 度是 230pxdefaultType : 'textfield',/ 默认控件类型是 textfielditems : fieldLabel : '登录名 ',name : 'loginID', allowBlank : false, vtype : 'alphanum', allowBlank : false,inputType : 'password',/ 密码输入框需要定义 input 控件的类型 为 passw

22、ordfieldLabel : '密码 ',name : 'password',allowBlank : false,/ 第二个 标签页里有 numberfield 、timefield 和 textfield 三个控件title : '数字时间字母 ',layout : 'form',defaults : width : 230,defaultType : 'textfield',只能输入数字的输入控件items : xtype : 'numberfield',/fieldLabel :数字

23、9;,name : 'number', xtype : 'timefield',/ 时间输入控件fieldLabel : '时间 ',name : 'time', fieldLabel : '纯字母 ',name : 'char',vtype : 'alpha', title : '文本区域 ',layout : 'fit',/为了让 textarea 自适应面板容器，使用了fitlayout 作为它的布局items : xtype : 'te

24、xtarea',/ 设置类型为 textareaid : 'area', fieldLabel : '',/ 为 form 添加按钮了，在 formpanel 的 buttons 属 性中我们加入了一个保存按钮和取消按钮buttons : / 在 buttons 里定义的按 钮默认是 Ext.Button ，所以按钮的属性定义可以查看 Ext.Button 的 API。在这里两个按钮都没用到其它属性，只是设置了显示文本(text ) 和单击事件。text : '保存 ',handler : function() /在 formpanel

25、类中， form 属性指向的是 formpanle 里的 basicform 对象，我们可通 过 formpanle.form 来使用该 basicform 对象。在被例子，我们已经 将 formpanel 对象赋值给了 simpleForm 这个变量，所以我们可以通 过 simpleForm.form 访问面板里的 basicform 对象。if (simpleForm.form.isValid() /保存按钮要做的就是先做 basicform 的客户端验证， 验证通过了则设置该按 钮状态为 disable ，防止 2 次提交。然后调用 simpleForm.form.doAction 方法

26、提交数据this.disabled = true;/doAction 方法的第一个参数“ submit ”的意思是表示执行的是提交 操作，提交的后台页面是 test.jsp ( url:'test.asp' )，提交方式是 post ( method:'post' )，没有其它提交参数( params:'' ) simpleForm.form.doAction('submit', url : 'resForm.jsp', method : 'post', params : '',/

27、提交成功后执行 success 定义的函数，后台返回的数据格式是需 要我们注意的， 一定要 json 格式，而且必须包含“ success:true ”， 不然不会执行 success 定义的函数。/ success 定义的函数返回两个参数，第一是 form 本身，第二个是 ajax 返回的响应结果，在 action.result 这个 json 数组了保存了后 台返回的数据。success : function(form, action) / 例如返回的 json 结构是 "success:true,data:' 成功保存！ '" ， Ext.Msg.al

28、ert(' 操作 ',action.result.data);this.disabled = false;,/ 定义 failure 函数，就是网络通讯存在问题的时候将显示错误信failure : function() Ext.Msg.alert(' 操作', ' 保存失败！ ');this.disabled = false;);/ 如果想 form 按 以前的老办法提交，可以在 formpanel 的定义中加入一下设置：/ onSubmit:Ext.emptyFn,/ submit: function() / this.getEl().dom.

29、submit();/ 第一个设置的目 的是取消 formpanel 的默认提交函数。 第二就是设置新的提交方式为 旧方式提交。 , / 取消按钮就是简单的 reset 一下 form 的控件text : '取消 ',handler : function() simpleForm.form.reset(); ););再来看看前台HTM文件：<!DOCTYPEhtml PUBLIC"-/W3C/DTD HTML4.01 Transitional/EN" ""><html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title> <link rel="stylesheet" type=&qu