`

一个简单的formPanel

EXTF#HTML 
阅读更多 
<html>
<head>
<meta charset="UTF-8" />
<title>FormPanel</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/src/locale/ext-lang-zh_CN.js"></script>
</head>

<body>

 <script>
 
  Ext.onReady(function(){
    Ext.QuickTips.init();
	var form = new Ext.form.FormPanel({
		title : "FormPanel",
		url:"FormPanel.html",
		width :300,
		height : 300,
		frame : true, //设置成true 可以得到更好的效果
		labelAlign : "right",//信息对齐方式
		labelWidth : 65,
		defaults : {
		   width : 150,//信息输入区宽度
		   msgTarget : 'side'//默认错误提示方法
		}, 
		bodyStyle : "padding: 5px 0px 0px 0px",
		items : [
			{
				name : "name",
				fieldLabel : "姓名",
				xtype:"textfield"
                //anchor:"80%" //控制信息输入区宽度 			
			},{
			    name : "sex",
				fieldLabel : "性别",
				xtype : "radiogroup",
				width:80,
				items :[{
				  name : "sex1",
				  xtype : "radio",
				  boxLabel:"男",
				  inputValue:"1",
				  checked:true
				},{
				   name : "sex2",
				   xtype : "radio",
				   boxLabel:"女",
				   inputValue:"1"
				}]
			},{
				name : "sex",
				fieldLabel : "性别",
				xtype : "combo",
				hiddenName : "sex",
				valueField : "id",
				displayField : "name",
				triggerAction : "all",
				mode : "local",
				store : new Ext.data.ArrayStore({
					fields : ["id","name"],
					data : [[1,"男"],[2,"女"]]
				})
			},{
				name : "birthday",
				fieldLabel : "生日",
				xtype : "datefield",
				format : "Y-m-d"
			},{
				name :"password",
				xtype:"textfield",
				fieldLabel : "密码",
				inputType : "password",
				allowBlank:false
			},{
				name : "address",
				fieldLabel : "地址",
				xtype:"textfield"						
			},{
				name : "email",
				fieldLabel : "E-mail",
				xtype:"textfield",
				vtype : "email"						
			},{
				name : "remark",
				xtype:"textarea",
				fieldLabel : "备注"						
			}
		],
		renderTo : Ext.getBody(),
		buttonAlign : "center",
		buttons : [{
		   text:"提交",
		   handler: subForm
		},{
		   text:"重置",
		   handler:function(){
		       form.getForm().reset();
		   }
	  }]
	});	
	
  function subForm(){
    var f = form.getForm();
	getValue();
	if(f.isValid()){
	    
	   	f.submit({
				waitMsg : '保存中，请稍候...',
				success : function(form, action) {
				
				},
				failure : function(form, action) {

				}
			});
	   
	}
  
  }
	
  function getValue(){
	 var name = form.getForm().findField("name").getValue();
	 var sex = form.getForm().findField("sex").getValue();
	 Ext.Msg.alert("提示","name = "+name+"<br/>"+"sex = "+sex);
  }
	
});




</script>


</body>
</html>
分享到：
| 几个extjs 常用操作
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics