Threaded View

  1. #1
    Ext User
    Join Date
    Apr 2007
    Posts
    7
    Vote Rating
    0
    Caolga is on a distinguished road

      0  

    Default TextField with remote validation

    TextField with remote validation


    Hello,

    This is a TextField class with remote validation possibility. You can specify if the validation must occur on blur or on validate.
    The server must return a JSON object or boolean exactly like form validation.

    true // it's all good
    or
    { success: true } // it's all good
    or
    {success:false,
    errors:'Explication text' // text display on error
    }

    Example
    Code:
            new Ext.form.TextFieldRemoteVal({
                ... // Config object from TextField
                // New possibility
    	   remoteValidation: 'onValidate', 		// When start remote validation, value: 'onBlur' or 'onValidate'
    	   urlRemoteVal: 'url', 					// Url for remote validation
    	   method: 'POST', 						// Optional, method for remote validation 'GET' or 'POST', default POST 
    	   paramsRemoteVal: { w: 'testPseudo' }, 	// Optional, additional parameter(s) (Object or String)
    	   timeout: 30, 							// Optional, timeout for validation request, default 30	
    	   badServerRespText: 'My text', 			// Optional, text showing after bad server response, default: 'Error: bad server response during validation'
    	   badComText: 'My text' 					// Optional, text showing after incorrect comunication, default: 'Error: validation unavailable'
            }),
    The class:
    Code:
    Ext.form.TextFieldRemoteVal = function(config){
        Ext.form.TextFieldRemoteVal.superclass.constructor.call(this, config);
    	if( this.urlRemoteVal ) {
    		if( this.remoteValidation == 'onValidate' ) {
    			this.on('valid', this.startRemoteVal.createDelegate(this));
    		}else if( this.remoteValidation == 'onBlur' ) {
    			this.on('blur', this.startRemoteVal.createDelegate(this));
    		}
    	}
    };
    
    Ext.extend(Ext.form.TextFieldRemoteVal, Ext.form.TextField, {
    	remoteValidation: null, /* 'onValidate' or 'onBlur' */
    	urlRemoteVal: null,
    	timeout: 30,	
    	method: 'POST',
    	badServerRespText: 'Error: bad server response during validation',
    	badComText: 'Error: validation unavailable',
    	
    	// redefinition 
    	onRender : function(ct){
    		Ext.form.TextFieldRemoteVal.superclass.onRender.call(this, ct);
    		
    		this.remoteCheckIcon = ct.createChild({tav:'div', cls:'x-form-remote-wait'});
    		this.remoteCheckIcon.hide();
    	},
    	
    	// private
    	alignRemoteCheckIcon : function(){
            this.remoteCheckIcon.alignTo(this.el, 'tl-tr', [2, 2]);
        },
    	
    	// private
    	getParams: function() {
            var tfp = (this.name||this.id)+'='+this.getValue();
            var p = (this.paramsRemoteVal?this.paramsRemoteVal:'');
            if(p){
                if(typeof p == "object")
                    tfp += '&' + Ext.urlEncode(p);
                else if(typeof p == 'string' && p.length)
                    tfp += '&' + p;
            }
    		return tfp;
    	},
    	
    	// public
    	startRemoteVal: function() {
    		var v = this.getValue();
    		if( this.lastValue != v ) { // don't start a remote validation if the value doesn't change (getFocus/lostFocus for example)
    			this.lastValue = v;
    			if( this.transaction ) {
    				this.abort();
    			}
    			this.alignRemoteCheckIcon();
    			this.remoteCheckIcon.show();
    			var params = this.getParams();
    			this.transaction = Ext.lib.Ajax.request(
    					            this.method,
    					            this.urlRemoteVal + (this.method=='GET' ? '?' + params : ''),
    					            {success: this.successRemoteVal, failure: this.failureRemoteVal, scope: this, timeout: (this.timeout*1000)},
    					            params);
    		}
    	},
    	
    	// public
    	abort : function(){
    		if(this.transaction){
    			Ext.lib.Ajax.abort(this.transaction);
    		}
    	},
    	
    	// private
    	successRemoteVal: function(response) {
    		this.transaction = null;
    		this.remoteCheckIcon.hide();
    		var result = this.processResponse(response);
    		if(result) {
    			if(result.errors) {
    				this.markInvalid(result.errors);
    				this.isValid = false;
    			}
    		}else{
    			this.markInvalid(this.badServerRespText);
    			this.isValid = false;
    		}
    	},
    	
    	// private
    	failureRemoteVal: function(response) {
    		this.transaction = null;
    		this.remoteCheckIcon.hide();
    		this.markInvalid(this.badComText);
    		this.isValid = false;
    	},
    	
    	// private
    	processResponse: function(response) {
            return (!response.responseText ? false : Ext.decode(response.responseText));
        }
    
    });
    Needed CSS class:
    Code:
    .x-form-remote-wait {
    	width:100%;
    	height:19px;
    	width:19px;
    	background-image:url(../../resources/images/default/grid/wait.gif);
    	background-repeat:no-repeat;
    	display:block;
    	position:absolute;
    }
    Attached Images

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar