<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>Checkbox TreePanel</title> <link rel="stylesheet" type="text/css" href="/ext/docs/resources/ext-all.css" /> <script type="text/javascript" src="/ext/docs/resources/ext-base.js"></script> <script type="text/javascript" src="/ext/docs/resources/ext-all.js"></script> </head> <body>
<script type="text/javascript"> //1 form 与column 的布局 //2 tabPanel ， formPanel ，fitlayout ，表单元素 ，控件校验 表单提交的使用 Ext.onReady(function(){ Ext.QuickTips.init();// 浮动信息提示 Ext.form.Field.prototype.msgTarget = 'side';// 设置控件的错误信息显示位置，主要可选的位置有：qtip,title,under,side,[elementId] var formPanel = new Ext.FormPanel({ renderTo:document.body, title:'formPanel', frame:true, //渲染背景颜色 labelWidth : 60, //显示的标签宽度为45 labelAlign : "right", //标签内容右对齐 bodyStyle:'padding:2px 10px 10px 2px', //使内部元素和边框 有一定距离 width:600, items:[{ //总体上 用列布局 layout:'column', border:false, labelSeparator:':', items:[{ //第一行开始 columnWidth:.5, // 该列的宽度占总宽度的50% border:true, layout:'form',//第一列的布局用form ，并且占50%宽度 items:[{ xtype:'textfield', fieldLabel:'姓名', name:'name', anchor:'80%' //输入框的宽度是总宽度的80%,余下的显示错误信息图标 }] },{ columnWidth:.25,//添加2个radio 第一个有标题， 第二个没有标题 ，2个radio宽度和等于余下宽度的50% layout:'form', border:false, items:[{ style:'margin-top:5px', // 单选按钮和lable对齐 xtype:'radio', fieldLabel:'性别', // 单选按钮总的类别 name:'sex', checked:true, //默认选中这个radio boxLabel:'男' , //单选按钮对应显示的值 inputValue:'男Value', anchor:'80%' //input 宽度80% }] },{ //这个radio 没有标签,需要隐藏所有的标签信息 columnWidth:.25, layout:'form', labelWidth:0, //标签宽度为0 labelSeparator:'', //没有分隔符 hideLabels : true, // 隐藏这个radio的标签设置 border:false, items:[{ style:'margin-top:5px', xtype:'radio', fieldLabel:'', boxLabel : '女', name : 'sex', inputValue : '女', anchor : '80%' }] }]//第一行结束 },{ layout:'column', border:false, labelSeparator:':', items:[{ columnWidth:.5, layout:'form', items:[{ xtype:'datefield', fieldLabel:'出生日期', name:'birthday', anchor:'80%' }] },{ columnWidth:.5, layout:'form', items:[{ xtype:'combo', mode:'local',//数据是本地的 store:new Ext.data.SimpleStore({ fields:['returnValue','displayText'], data:[[1,'小学'],[2,'中学'],[3, '高中']] }), valueField:'returnValue',//下拉框传到后台的值 displayField:'displayText' ,//下拉框显示的数据 hiddenName : 'education',// 大家要注意的是hiddenName和name属性，name只是下拉列表的名称，作用是可通过，而hiddenName才是提交到后台的input的name。如果没有设置hiddenName，在后台是接收不到数据的，这个大家一定要注意。 name: 'education',// 再次提醒，name只是下拉列表的名称 forceSelection:true , //必须选择一个选项 allowBlank : false,// 该选项值不允许为空 ,如果为空则提示 blankText blankText: '请选择学历' , // 提交form时，该项如果没有选择，则提示错误信息"请选择学历" emptyText : '选择学历',// 在没有选择值时显示为“选择学历” editable : false,// 不允许编辑 triggerAction : 'all',// 因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。 fieldLabel : '学历', // 控件的标题是学历 anchor:'80%' }] }]//第二行结束 },{ //第三行开始i layout:'column', border:false, labelSeparator:':', items:[{ columnWidth:.35, layout:'form', border:false, items:[{ xtype:'checkbox', fieldLabel:'权限', boxLabel:'系统管理员', name:'manager', inputValue:'1', anchor:'80' }] },{ columnWidth:.2, layout:'form', labelWidth : 0, labelSeparator : '', hideLabels : true, items:[{ xtype:'checkbox', fieldLabel:'', name:'manager', boxLabel:'管理员', inputValue:'2', anchor:'80' }] },{ columnWidth:.2, layout:'form', labelWidth : 0, labelSeparator : '', hideLabels : true, items:[{ xtype:'checkbox', fieldLabel:'', boxLabel:'普通用户', name:'manager', inputValue:'3', anchor:'80%' }] }]//第三行结束 },{ //第四行开始 layout : 'column', border : false, labelSeparator : '：', items:[{ columnWidth : .5, layout : 'form', border : false, items : [{ xtype : 'textfield', fieldLabel : '电子邮件', name : 'email', vtype : 'email',// 这里的定义和普通的文本输入框没什么区别，只是多了一个vtypes的属性定义。Vtypes里总共定义了email、url、alpha和alphanum四种类型数据格式，email和url这个不用介绍了，呵呵。alpha是字母和下划线的组合，alphanum是字母、下划线和数字的组合。 allowBlank : false, anchor : '80%' }] }, { columnWidth : .5, layout : 'form', border : false, items : [{ xtype : 'textfield', fieldLabel : '个人主页', name : 'url', vtype : 'url', //验证信息 anchor : '80%' }] }] //第四行 结束 },{ //第五行 开始 xtype:'tabpanel', plain:true,// 将标签页头的背景设置为透明的 border : false, activeTab : 0, height : 235,// 高度设置为235px, bodyStyle : 'padding:10px', items:[{ //第一个tab title:'登陆', layout:'form', defaults:{ width:230 }, defaultType:'textfield', items:[{ fieldLabel : '登录名', name : 'loginID', allowBlank : false, vtype : 'alphanum', //校验 字符与数字混合 allowBlank : false },{ inputType : 'password',// 密码输入框需要定义input控件的类型为password fieldLabel : '密码', name : 'password', allowBlank : false }] },{ //第二个tab title:'数字时间字母', layout:'form', defaults:{ width:230 }, defaultType:'textfield', items : [{ xtype : 'numberfield',// 只能输入数字的输入控件 fieldLabel : '数字', name : 'number' },{ xtype : 'timefield',// 时间输入控件 fieldLabel : '时间', name : 'time' },{ fieldLabel : '纯字母', name : 'char', vtype : 'alpha' }] },{ title : '文本区域', layout : 'fit',// 为了让textarea自适应面板容器，使用了fitlayout作为它的布局 items : { xtype : 'textarea',// 设置类型为textarea id : 'area', fieldLabel : '' } }] //第五行结束 }], buttons:[{ text:'保存', handler:function(){ // 在formpanel类中，form属性指向的是formpanle里的basicform对象，可以通过formpanle.form 来使用该basicform对象 // 保存按钮要做的就是先做basicform的客户端验证，验证通过了则设置该按钮状态为disable，防止2次提交。然后调用formpanle.form.doAction方法提交数据 if(formPanel.form.isValid()){ this.disabled = true; // doAction方法的第一个参数“submit”的意思是表示执行的是提交操作，提交的后台页面是test.jsp（url:'test.asp'）， //提交方式是post（method:'post'），没有其它提交参数（params:''） formPanel.form.doAction('submit', { url : 'resForm.jsp', method : 'post', params : '', // 提交成功后执行success定义的函数，后台返回的数据格式是需要我们注意的，一定要json格式，而且必须包含“success:true”，不然不会执行success定义的函数。 // success定义的函数返回两个参数，第一是form本身，第二个是ajax返回的响应结果，在action.result这个json数组了保存了后台返回的数据。 success : function(form, action) { // 例如返回的json结构是"{success:true,data:'成功保存！'}"， Ext.Msg.alert('操作', action.result.data); this.disabled = false; }, // 定义failure函数，就是网络通讯存在问题的时候将显示错误信息。 failure : function() { Ext.Msg.alert('操作', '保存失败！'); this.disabled = false; } }); } } },{ // 取消按钮就是简单的reset一下form的控件 text : '取消', handler : function() { formPanel.form.reset(); } }] }); }); </script> </html>