Posted By

JimBarrows on 07/22/10

Tagged

Versions (?)

Last Edited at 07/22/10 06:00am

Statistics

Viewed 373 times

Favorited by 0 user(s)

Related snippets

EXTJS Base Form

/ Published in: JavaScript

This provides an easier way to handle exceptions and common form necessities.

Highlighted TextExpand

Ext.namespace('Namespace');
Namespace.TheForm = Ext.extend(Ext.form.FormPanel, {
    
		id: 'Namespace.TheForm'
		,title: 'Namespace.TheForm'
                ,url: '/some/url'
		,waitMessage: 'Please wait.'
    ,initComponent: function() {

var config = {
        		items: [{
        			xtype:'textfield'
        			,id: 'StudentVerification.VerificationForm.PinField'
        			,fieldLabel: 'PIN'
        			,allowBlank:false
        			,inputType:'password'
        		}]
        		,buttons: [{
      				text:'Submit'
      				,formBind:true
      				,scope:this
      				,handler: this.submit 
      			}]
        };

// apply config
        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);

Namespace.TheForm.superclass.initComponent.apply(this, arguments);

// after parent code here, e.g. install event handlers
        // this.on('beforerender', function(dis) {
        // alert('before render');
        // });
    }
    
    ,onRender: function() {

Namespace.TheForm.superclass.onRender.apply(this, arguments);
	
	}
	
,submit : function(url, waitMsg) {
    	this.getForm().submit({
    		url: url
    		,scope: this
    		,waitMsg: waitMsg
    		,success: this.onSuccess
    		,failure: this.onFailure
    	})
    }
    
    ,onSuccess: function(form, action) {
    	Ext.Msg.show({
            title: 'Success'
            ,msg: 'Success!'
            ,modal: true
            ,icon: Ext.Msg.INFO
            ,buttons: Ext.Msg.OK            
        });
    }
    
    ,onFailure: function(form, action) {
		switch (action.failureType) {
	    	case Ext.form.Action.CLIENT_INVALID:
	            this.onClientInvalid( form,action);
	        break;
	        case Ext.form.Action.CONNECT_FAILURE:
	            this.onConnectionFailure(form,action);
	        break;
	        case Ext.form.Action.SERVER_INVALID:
	        	this.onServerInvalid(form,action);
	        break;	        
        };
    }
    
    ,onClientInvalid: function(form,action) {
   		Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values'); 	
    }
    
    ,onConnectionFailure: function(form,action) {
    	Ext.Msg.alert('Failure', 'Ajax communication failed');
    }
    
    ,onServerInvalid: function(form,action) {
    	Ext.Msg.alert('Failure', action.result.msg);
    }
});

Ext.reg('Namespace.TheForm', Namespace.TheForm);

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.