Ext learning

Today,do some work with ext,have a simple knowledge for it,it is convenient to use,write a example for remembering.

/**
 * This JS is used to provide the user details information.
 *
 * @author 
 * @Date Mar 4, 2010
 * 
 */
Ext.apply(Ext.form.VTypes, 
{
  password: function(val, field) 
  {
	    if (field.confirmTo) 
	    {
	      	var pwd = Ext.get(field.confirmTo);
	      	return (val == pwd.getValue());	
	    }
    	return true;
  },
  passwordText:'The passwords inputted twice should be same!'
});
var userEditPanel = new Ext.FormPanel({
	id: 'userEditPanelId',
	labelAlign: 'left',
	title: 'User details',
	frame: true,
	width: 600,
	height: 340,
	
	submit: function(){
	  this.getEl().dom.action='/alba/permission/ManageUser.do?call=addUser';
	  this.getEl().dom.submit();
    },
	bodyStyle:'padding:5px 5px 0',
	layout: 'fit',
    collapsible: true,   
    autoHeight:false,   
    collapsed: false,
    
    items:[{
	    xtype:'tabpanel',
	    plain : false,  
	    activeTab: 0,   
	    defaults:{autoHeight:true, bodyStyle:'padding:10px'},
	    constrain:false,
	    deferredRender: false,
	    items: [{
	       id: 'commonInfoTabId',
	       title: 'User',
	       layout: 'form',
	       listeners: {
	    	activate: function(){
	    	   userEditPanel.doLayout();
	           }
	         },
	       items:[{
	    	 layout: 'column',
	    	 border: false,
	    	 labelseparator: ':',
	    	 style:'margin-top:5px; margin-bottom:5px; text-align:left;',
	    	 items:[{
	    		 columnWidth: 1,
	    		 layout: 'form',
	    		 border: false,
	    		 labelAlign: 'left',
	    		 items:[{
	    			 xtype: 'textfield',
	    			 fieldLabel: 'UserName',
	    			 maxLength: 100,
	    			 allowBlank: false,
	    			 blankText:'The username should not be empty!',
	    			 name: 'username',
	    			 anchor:'95%'
	    		 }]
	    	 },{
	    		 columnWidth: 1,
	    		 layout: 'form',
	    		 border: false,
	    		 items:[{
	    			 xtype: 'textfield',
	    			 inputType:'password',
	    			 fieldLabel: 'Password',
	    			 id: 'pass1',
	    			 maxLength: 12,
	    			 minLength:6,
	    			 allowBlank: false,
	    			 blankText:'The password should not be empty!',
	    			 name: 'password',
	    			 anchor:'60%'
	    		 }]
	    	 },{
	    		 columnWidth: 1,
	    		 layout: 'form',
	    		 border: false,
	    		 items:[{
	    			 xtype: 'textfield',
	    			 inputType:'password',
	    			 fieldLabel: 'Password Confirm',
	    			 id: 'pass2',
	    			 vtype:'password',
	    			 vtypeTest:'The passwords inputted twice should be same!',
	    			 confirmTo:'pass1',
	    			 maxLength: 12,
	    			 minLength:6,
	    			 allowBlank: false,
	    			 blankText:'The password should not be empty!',
	    			 name: 'password',
	    			 anchor:'60%'
	    		 }]
	    	 },{
	    		 columnWidth: .5,
	    		 layout: 'form',
	    		 border: false,
	    		 items:[{
	    			 xtype: 'textfield',
	    			 fieldLabel: 'Name',
	    			 maxLength: 100,
	    			 allowBlank: true,
	    			 name: 'name',
	    			 anchor:'90%'
	    		 }]
	    	 },{
	    		 columnWidth: .5,
	    		 layout: 'form',
	    		 border: false,
	    		 items:[{
	    			 xtype: 'textfield',
	    			 fieldLabel: 'ChineseName',
	    			 maxLength: 100,
	    			 allowBlank: true,
	    			 name: 'chineseName',
	    			 anchor:'90%'
	    		 }]
	    	 },{
	    		 columnWidth: .5,
	    		 layout: 'form',
	    		 border: false,
	    		 items:[{
	    			 xtype: 'numberfield',
	    			 fieldLabel: 'Type',
	    			 allowBlank: false,
	    			 maxLength: 1,
	    			 name: 'type',
	    			 anchor:'90%'
	    		 }]
	    	 },{
	    		 columnWidth: .5,
	    		 layout: 'form',
	    		 border: false,
	    		 items:[{
	    			 xtype: 'numberfield',
	    			 fieldLabel: 'Enabled',
	    			 maxLength: 1,
	    			 allowBlank: false,
	    			 name: 'enabled',
	    			 anchor:'90%'
	    		 }]
	    	 },{
	    		 columnWidth: 1,
	    		 layout: 'form',
	    		 border: false,
	    		 items:[{
	    			 xtype: 'textarea',
	    			 fieldLabel: 'Description',
	    			 allowBlank: true,
	    			 maxLength: 255,
	    			 name: 'description',
	    			 anchor:'95%'
	    		 }]
	    	 }]
	       }]
	    }]
    }],
       
    buttons:[{
    	text:'update',
        handler:function(){
    	  userEditPanel.form.submit();
        }	
    }]
});