EXTJS Base Form - JavaScript Snipplr Social Repository

Revision: 29117

at February 9, 2011 05:55 by JimBarrows

Updated Code

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);

Revision: 29116

at February 9, 2011 05:42 by JimBarrows

Updated Code

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, scope, waitMsg) {
    	this.getForm().submit({
    		url: url
    		,scope: scope
    		,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);

Revision: 29115

at February 9, 2011 05:27 by JimBarrows

Updated Code

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, scope, waitMsg) {
    	this.getForm().submit({
    		url: url
    		,scope: scope
    		,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:
	            onClientInvalid( form,action);
	        break;
	        case Ext.form.Action.CONNECT_FAILURE:
	            onConnectionFailure(form,action);
	        break;
	        case Ext.form.Action.SERVER_INVALID:
	        	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);

Revision: 29114

at February 9, 2011 05:26 by JimBarrows

Updated Code

Ext.namespace('Namespace');
Namespace.TheForm = Ext.extend(Ext.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, scope, waitMsg) {
    	this.getForm().submit({
    		url: url
    		,scope: scope
    		,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:
	            onClientInvalid( form,action);
	        break;
	        case Ext.form.Action.CONNECT_FAILURE:
	            onConnectionFailure(form,action);
	        break;
	        case Ext.form.Action.SERVER_INVALID:
	        	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);

Revision: 29113

at February 9, 2011 05:25 by JimBarrows

Updated Code

Ext.Namespace('Namespace');
Namespace.TheForm = Ext.extend(Ext.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, scope, waitMsg) {
    	this.getForm().submit({
    		url: url
    		,scope: scope
    		,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:
	            onClientInvalid( form,action);
	        break;
	        case Ext.form.Action.CONNECT_FAILURE:
	            onConnectionFailure(form,action);
	        break;
	        case Ext.form.Action.SERVER_INVALID:
	        	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);

Revision: 29112

at February 9, 2011 05:22 by JimBarrows

Updated Code

Ext.Namespace('Namespace');
Namespace.TheForm = Ext.extend(Ext.FormPanel, {
    
		id: 'Namespace.TheForm'
		,title: 'Namespace.TheForm'
    ,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, scope, waitMsg) {
    	this.getForm().submit({
    		url: url
    		,scope: scope
    		,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:
	            onClientInvalid( form,action);
	        break;
	        case Ext.form.Action.CONNECT_FAILURE:
	            onConnectionFailure(form,action);
	        break;
	        case Ext.form.Action.SERVER_INVALID:
	        	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);

Revision: 29111

at July 22, 2010 06:00 by JimBarrows

Initial Code

Ext.Utils('Utils');
Utils.BaseForm = Ext.extend(Ext.FormPanel, {
    
    initComponent: function() {

        var config = {};

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

        Utils.BaseForm.superclass.initComponent.apply(this, arguments);

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

        Utils.BaseForm.superclass.onRender.apply(this, arguments);
	
	}
	
	,submit : function(url, scope, waitMsg) {
    	this.getForm().submit({
    		url: url
    		,scope: scope
    		,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:
	            onClientInvalid( form,action);
	        break;
	        case Ext.form.Action.CONNECT_FAILURE:
	            onConnectionFailure(form,action);
	        break;
	        case Ext.form.Action.SERVER_INVALID:
	        	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('Utils.BaseForm', Utils.BaseForm);

Initial URL

Initial Description

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

Initial Title

EXTJS Base Form

Initial Tags

Initial Language

JavaScript

Choose a language for easy browsing: