extjs4.2 弹出注册用户界面实例

var form2;
         Ext.onReady(function () {
             var form = new Ext.form.FormPanel({
                 frame: true,
                 title: '表单标题',
                 style: 'margin:10px',
                 html: '<div style="padding:10px">表单内容</div>'
            });
            
             var win = new Ext.Window({
                title: '标题',
                 width: 555,
                 height: 444,
                html: '<div>内容</div>',
                 resizable: true,
                 modal: true,
                 closable: true,
                  maximizable: true,
                 minimizable: true,
                 
                 items:form,
                  buttons: [{
		            text: '注册',
		            handler: login
		        },{
		        	text:'重置',
		        }]
             });
             
             win.show();
        
	function login(){
	
	
	var txtaccount = new Ext.form.TextField({
      		itemId: 'account',
      		anchor:'100%',
      		allowBlank:false,
      		maxLength:10,
      		name:'username',
      		fieldLabel:'帐号',
      		blankText:'请输入帐号',
      		maxLengthText:'用户名不超过10字'
      	});
	
	var txtusername = new Ext.form.TextField({
      		itemId: 'name',
      		anchor:'100%',
      		allowBlank:false,
      		maxLength:10,
      		name:'username',
      		fieldLabel:'姓名',
      		blankText:'请输入帐号',
      		maxLengthText:'用户名不超过10字'
      	});
	var txtpassword = new Ext.form.TextField({
      		anchor:'100%',
      		itemId: 'password',
      		allowBlank:false,
      		maxLength:10,
      		inputType:'password',
      		name:'password',
      		fieldLabel:'密码',
      		blankText:'请输入密码',
      		maxLengthText:'密码不超过10字'
      	});
      	
      	var txtpassword2 = new Ext.form.TextField({
      		anchor:'100%',
      		itemId: 'password2',
      		allowBlank:false,
      		maxLength:10,
      		inputType:'password',
      		name:'password',
      		fieldLabel:'重复密码',
      		blankText:'请输入密码',
      		maxLengthText:'密码不超过10字'
      	});
	
	var txtphone = new Ext.form.NumberField({
<span style="white-space:pre">		</span>                 fieldLabel:'手机号码',
<span style="white-space:pre">		</span>                 itemId: 'phone',
<span style="white-space:pre">		</span>                 anchor:'100%',
<span style="white-space:pre">		</span>                 decimalPrecision: 1,
<span style="white-space:pre">		</span>                 allowBlank: false,
<span style="white-space:pre">		</span>                 blankText: '请输入号码',
<span style="white-space:pre">		</span>                 value:user.phone,
<span style="white-space:pre">		</span>                 hideTrigger: true,
<span style="white-space:pre">		</span>       <span style="white-space:pre">			</span> keyNavEnabled: false,
<span style="white-space:pre">		</span>      <span style="white-space:pre">			</span> mouseWheelEnabled: false
<span style="white-space:pre">		</span>             });
      	var datefield = new Ext.form.DateField({
      		     itemId: 'createTime',
                 fieldLabel: '创建日期',
                 format: 'Y-m-d',
                 editable: false,
                 allowBlank: false,
                 blankText: '请选择日期'
             });
    form2 = new Ext.FormPanel({
      bodyStyle: 'padding:5px 5px 0',
      layout: 'form',
      items: [
      txtaccount,
      txtusername,
      txtpassword,
      txtpassword2,
      txtphone,
      datefield
      ],
      buttonAlign: 'center',
      buttons: [
    {
      text: '保存',
      handler:aa
    }, {
      text: '关闭',
      handler:function(){
      win2.hide();}
    }
    ]
    });
    var win2 = Ext.create("Ext.window.Window", {
      title: "添加用户",
      draggable: false,
      height: 300,	
      width: 300,
      layout: "fit",
      modal: true,
      resizable: false,
      items: [form2],
      closable: true,
      closeAction:'hide'
    });
    win2.show();
  }
  
  });
  
  
 function aa(){
 form2.getForm();
 	alert(form2.getComponent('password2').getValue());//获得输入的值,随便举个例子
 }
 

效果: