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(); } }] });