form 与column 的布局 ,tabPanel ， formPanel ，fitlayout ，表单元素，控件校验表单提交的使用

username2

浏览: 743024 次
性别:
来自: 黑龙江

最近访客更多访客>>

dsh_oliver

杭州007

loginboot

xmmdream

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Extjs

<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>

分享到：

extjs mask 蒙版 confirm对话框使用 | 布局 anchor

2013-09-25 13:53
浏览 2200
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

form 与column 的布局 ,tabPanel ， formPanel ，fitlayout ，表单元素，控件校验表单提交的使用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

form 与column 的布局 ,tabPanel ， formPanel ，fitlayout ，表单元素 ，控件校验 表单提交的使用

评论

发表评论

相关推荐

Extjs store的操作整理

extjs 日期修改数据不显示

在grid的某一格中添加操作一列

extjs form 表单提交的几种方式

extjs 增删改查

Extjs 与struts2配合文件上传

textfield 全属性学习

combox 使用

extjs mask 蒙版 confirm对话框 使用

布局 anchor

布局 border 与 form

Ext json tree

get 与 getCmp等总结

form 校验与布局

最近访客更多访客>>

form 与column 的布局 ,tabPanel ， formPanel ，fitlayout ，表单元素，控件校验表单提交的使用

extjs mask 蒙版 confirm对话框使用