ExtJS FormPanel sending JSON data

Hi!

If you want your Ext.form.FormPanel sends JSON, you must extends Ext.form.Action.Submit and create a new action that format and send the data as JSON. Here's how to do this.

Ext.namespace("Ext.ux.Action");


/**
 * The JSON Submit is a Submit action that send JSON instead of send URL Encoded data... You MUST specify the jsonRoot
 * property...
 * @param form The form to submit
 * @param options The options of the HTTP Request
 */
Ext.ux.Action.JsonSubmit = function(form, options) {
    Ext.ux.Action.JsonSubmit.superclass.constructor.call(this, form, options);
};

/**
 * We are extending the default Action Submit...
 */
Ext.extend(Ext.ux.Action.JsonSubmit, Ext.form.Action.Submit, {
    type: 'jsonsubmit',

    run : function() {
        var o = this.options;
        var method = this.getMethod();
        var isGet = method == 'GET';
        if (o.clientValidation === false || this.form.isValid()) {
            var encodedParams = Ext.encode(this.form.getValues());

            Ext.Ajax.request(Ext.apply(this.createCallback(o), {
                url:this.getUrl(isGet),
                method: method,
                waitMsg: "Please wait while saving",
                waitTitle: "Please wait",
                headers: {'Content-Type': 'application/json'},
                params: String.format('{{0}: {1}}', o.jsonRoot.toLowerCase(), Ext.encode(this.form.getValues())),
                isUpload: this.form.fileUpload
            }));
        } else if (o.clientValidation !== false) { // client validation failed
            this.failureType = Ext.form.Action.CLIENT_INVALID;
            this.form.afterAction(this, false);
        }
    }
});

/**
 * We register the new action type...
 */
Ext.apply(Ext.form.Action.ACTION_TYPES, {
    'jsonsubmit' : Ext.ux.Action.JsonSubmit
});

When you are submitting the form, instead of using

myForm.getForm().submit({
//props here
})

use this

myForm.getForm().doAction("jsonsubmit",{
//props here
});

Clone an ExtJS Component

Hi!

If you want to clone an ExtJS Component, you must you the cloneConfig() method from the Ext.form.Field object. For example,

//Component 1
var comp1 = new Ext.form.TextField({});

//Component cloning...
var comp2 = comp1.cloneConfig();

Ext.form.TextField value in uppercase

Hi!

if you want to have a Ext.form.TextField only in uppercase, you can use the following code:

new Ext.form.TextField({
     style : {textTransform: "uppercase"},
     listeners:{
          change: function(field, newValue, oldValue){
                       field.setValue(newValue.toUpperCase());
                  }
     }
});