Ext学习_FormPanel2

/**
Ext.onReady(function(){
	var f = new Ext.form.FormPanel({
		title: "欢迎登陆", //表单面板的标题
		width: 300, //面板宽度
		height: 130,
		bodyStyle: "padding: 6px", //正文区域的样式
		labelAlign: "right", //统一的提示信息对齐方式，此处为右对齐
		frame: true, //此处为true可以得到更好的效果
		items: [
		    new Ext.form.TextField({
		    	name: "userName", //用于访问的name
		    	allowBlank: false, //不允许为空
		    	fieldLabel: "用户名" //表单域提示信息
		    }),
		    {
		    	name: "password",
		    	xtype: "textfield", //表示表单域的类型，此处即为Ext.form.TextField
		    	inputType: "password", //输入框类型，有三种类型：文本框、密码框、文件域
		    	fieldLabel: "密码", //提示信息
		    	allowBlank: false //不允许为空
		    }
		],
		buttons: [
		     {
		    	 text: "确定",
		    	 handler: function(){
		    		 //得到name为userName的表单域控件的值
		    		 var userName = f.getForm().findField("userName").getValue();
		    		 var password = f.getForm().findField("password").getValue();
		    		 Ext.Msg.alert("提示","用户名：" + userName +",密码：" + password);
		    	 }
		     },
		     {
		    	 text: "重置",
		    	 handler: function(){
		    		 f.getForm().reset();//重置表单面板中所有表单组件的值
		    	 }
		     
		     }
		]
	});
	f.render("a");
});