一个简单的formPanel

最新推荐文章于 2021-02-01 20:20:59 发布

czhaozhi3758

最新推荐文章于 2021-02-01 20:20:59 发布

阅读量186

点赞数

分类专栏： extjs 文章标签： EXT F# HTML

本文链接：https://blog.csdn.net/czhaozhi3758/article/details/83839517

版权

extjs 专栏收录该内容

17 篇文章 0 订阅

订阅专栏


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

czhaozhi3758

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的formPanel

[code="java"]FormPanel Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.form.FormPanel({ title : "FormPanel", url:"FormPanel.html", wid...
复制链接

扫一扫

专栏目录