간단한 폼 패널 하나.

4075 단어 htmlextF#

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

좋은 웹페이지 즐겨찾기