Monday, July 26, 2010

ExtJS FormPanel sending JSON data


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.


 * 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) {, 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), {
                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

//props here

use this

//props here

Friday, July 23, 2010

Clone an ExtJS Component


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


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"},
          change: function(field, newValue, oldValue){