1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    52
    Vote Rating
    2
    exo is on a distinguished road

      0  

    Default Form binding

    Form binding


    I'm sort of surprised noone has asked this before (or: I'm just really bad at searching the forums, in that case I apologize) but is there a simple, clean way to facilitate form binding within Ext? What I'm looking for is a standardized easy way of connecting a form to the back-end. I've noticed forms support 'actions' but I couldn't quite make out what they do or how they work. Some simple examples will be greatly appreciated.

  2. #2
    Ext User amon's Avatar
    Join Date
    Apr 2007
    Location
    Budapest
    Posts
    109
    Vote Rating
    1
    amon is on a distinguished road

      0  

    Default


    HTML Code:
    var loginObj = Class.create();
    loginObj.prototype = {
    	
    	initialize : function() {
    		
    		Ext.onReady(this.create.bind(this), this, true);
    	},
    	
    	create : function() {
    		
    	   Ext.QuickTips.init();
    	   Ext.form.Field.prototype.msgTarget = 'side';
    	    this.fs = new Ext.form.Form({
    	        labelAlign: 'right',
    	        labelWidth: 85,
    	        url:'index.php',
    	        method: 'POST',
    	        buttonAlign: 'right',
    	        baseParams: {module:'login'}
    	    });
    	
    	    this.fs.fieldset(
    	        {legend:'Login'},
    	        new Ext.form.TextField({
    	            fieldLabel: 'Username',
    	            name: 'username',
    	            id: 'username',
    	            allowBlank:false,
    	            blankText: 'Required!',
    	            width:190
    	        }),
    	
    	        new Ext.form.Field({
    	            autoCreate : {tag: "input", type: "password", autocomplete: "off"},
    	            cls: 'x-form-text',
    	            fieldLabel: 'Password',
    	            name: 'password',
    	            id: 'password',
    	            allowBlank:false,
    	            blankText: 'Required!',
    	            width:190
             	})
    	    );
    	
    	    this.fs.addButton('Login',this.doLogin.bind(this));
    	    this.fs.render('form-ct3');
    	},
    	
    	doLogin : function() {
    		this.fs.submit({
    			success: function(){
    			    // do something?
    			    window.location.reload();
    			},
    			waitMsg : 'Logging in...',
    			method: 'POST'
    		});
    	}
    };
    var login = new loginObj();
    Note: this.<functionname>.bind(this) is prototype feature.
    But in this case: this.fs.submit() posts (over XHR) the form data to the 'url' URL. (See the form constructor!).


    Or, here is another example:
    http://extjs.com/forum/showthread.php?t=4403
    Last edited by amon; 16 Apr 2007 at 4:28 AM. Reason: example added

Thread Participants: 1