Advanced Search

EXTJS Base Form

/ Published in: JavaScript
Save to your folder(s)
This provides an easier way to handle exceptions and common form necessities.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. Ext.namespace('Namespace');
  2. Namespace.TheForm = Ext.extend(Ext.form.FormPanel, {
  3.  
  4. 		id: 'Namespace.TheForm'
  5. 		,title: 'Namespace.TheForm'
  6.                 ,url: '/some/url'
  7. 		,waitMessage: 'Please wait.'
  8.     ,initComponent: function() {
  9.  
  10.         var config = {
  11.         		items: [{
  12.         			xtype:'textfield'
  13.         			,id: 'StudentVerification.VerificationForm.PinField'
  14.         			,fieldLabel: 'PIN'
  15.         			,allowBlank:false
  16.         			,inputType:'password'
  17.         		}]
  18.         		,buttons: [{
  19.       				text:'Submit'
  20.       				,formBind:true
  21.       				,scope:this
  22.       				,handler: this.submit 
  23.       			}]
  24.         };
  25.  
  26.         // apply config
  27.         Ext.apply(this, config);
  28.         Ext.apply(this.initialConfig, config);
  29.  
  30.         Namespace.TheForm.superclass.initComponent.apply(this, arguments);
  31.  
  32.         // after parent code here, e.g. install event handlers
  33.         // this.on('beforerender', function(dis) {
  34.         // alert('before render');
  35.         // });
  36.     }
  37.  
  38.     ,onRender: function() {
  39.  
  40.         Namespace.TheForm.superclass.onRender.apply(this, arguments);
  41.  
  42. 	}
  43.  
  44. ,submit : function(url, waitMsg) {
  45.     	this.getForm().submit({
  46.     		url: url
  47.     		,scope: this
  48.     		,waitMsg: waitMsg
  49.     		,success: this.onSuccess
  50.     		,failure: this.onFailure
  51.     	})
  52.     }
  53.  
  54.     ,onSuccess: function(form, action) {
  55.     	Ext.Msg.show({
  56.             title: 'Success'
  57.             ,msg: 'Success!'
  58.             ,modal: true
  59.             ,icon: Ext.Msg.INFO
  60.             ,buttons: Ext.Msg.OK            
  61.         });
  62.     }
  63.  
  64.     ,onFailure: function(form, action) {
  65. 		switch (action.failureType) {
  66. 	    	case Ext.form.Action.CLIENT_INVALID:
  67. 	            this.onClientInvalid( form,action);
  68. 	        break;
  69. 	        case Ext.form.Action.CONNECT_FAILURE:
  70. 	            this.onConnectionFailure(form,action);
  71. 	        break;
  72. 	        case Ext.form.Action.SERVER_INVALID:
  73. 	        	this.onServerInvalid(form,action);
  74. 	        break;	        
  75.         };
  76.     }
  77.  
  78.     ,onClientInvalid: function(form,action) {
  79.    		Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values'); 	
  80.     }
  81.  
  82.     ,onConnectionFailure: function(form,action) {
  83.     	Ext.Msg.alert('Failure', 'Ajax communication failed');
  84.     }
  85.  
  86.     ,onServerInvalid: function(form,action) {
  87.     	Ext.Msg.alert('Failure', action.result.msg);
  88.     }
  89. });
  90.  
  91. Ext.reg('Namespace.TheForm', Namespace.TheForm);

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.