decoding Ajax Response

Question

I am new to ext Js.

I have a ajax call. I could see the response text on the alert but the next line, that is assumed to decode the responseText, does not produce any result in the alert Box.

My function goes like this :

function openToRecipients()
{

    Ext.Ajax.request({
        url: "Redirector?id=ClinicalInitiateForm&wfid=CLINICALONGOINGWFINITIATE",
        method: 'POST',                 
            success: function(response, opts) 
            {
                alert(response.responseText);
                var dataCurrent = Ext.util.JSON.decode(response.responseText);
                alert(dataCurrent );
                var jsonStr = dataCurrent.cData;
                recipientJsonResponse = dataCurrent.dataGrid;
                var myObject = eval('(' + jsonStr + ')');
                gridStore = new Ext.data.JsonStore({
                    id : 'gridStore',
                    autoLoad : true,
                    data : myObject,
                    root : 'data',
                    fields:['NAME',
                               'CLIENT',
                               'DESCRIPTION'
                         ],
                    listeners :{
                        load  : gridDisplay
                    }
                });
                },
            failure: function(response, opts) {
                alert("fail");
            }

    });

}

This is my json after coverting to string

"formFields" : [ {
    "id" : "NAME",
    "set" : "",
    "label" : "Name",
    "dataType" : "string",
    "editType" : "static",
    "clientConfig" : "",
    "hide" : "False",
    "required" : "",
    "mask" : "",
    "maxValue" : "",
    "maxLength" : "",
    "minValue" : "",
    "value" : "",
    "showIf" : "",
    "options" : "",
    "prePopulate" : "",
    "shortForm" : "",
    "comments" : "",
    "optionsValue" : "",
    "currentValue" : "",
    "disabled" : "",
    "qTip" : "",
    "hover" : ""
  }, {
    "id" : "CLIENT",
    "set" : "",
    "label" : "Client",
    "dataType" : "string",
    "editType" : "static",
    "clientConfig" : "",
    "hide" : "False",
    "required" : "",
    "mask" : "",
    "maxValue" : "",
    "maxLength" : "",
    "minValue" : "",
    "value" : "",
    "showIf" : "",
    "options" : "",
    "prePopulate" : "",
    "shortForm" : "",
    "comments" : "",
    "optionsValue" : "",
    "currentValue" : "",
    "disabled" : "",
    "qTip" : "",
    "hover" : ""
  }, {
    "id" : "DESCRIPTION",
    "set" : "",
    "label" : "Description",
    "dataType" : "string",
    "editType" : "static",
    "clientConfig" : "",
    "hide" : "False",
    "required" : "",
    "mask" : "",
    "maxValue" : "",
    "maxLength" : "",
    "minValue" : "",
    "value" : "",
    "showIf" : "",
    "options" : "",
    "prePopulate" : "",
    "shortForm" : "",
    "comments" : "",
    "optionsValue" : "",
    "currentValue" : "",
    "disabled" : "",
    "qTip" : "",
    "hover" : ""
  } ],

And this is my data

{'data':[{"NAME":"Shan","CLIENT":"CSC","DESCRIPTION":"Computer science"}]}

How can i have this data in my grid

Answer 1

Here is the code that you can use:

var myStore = Ext.create( "Ext.data.JsonStore", {
    fields: [ "firstname", "lastname" ], // the fields of each item (table line)
    proxy: {
        type: "ajax",    // the proxy uses ajax
        actionMethods: { // this config is not necessary for you. I needed to use it to be able to work with the echo service of jsFiddle. if you want to use post (as I saw in your post, you can skip this)
            create: "POST",
            read: "POST",
            update: "POST",
            destroy: "POST"
        },
        url: "/echo/json/", // here will come your URL that returns your JSON (in your case "Redirector?id..."
        reader: {
            type: "json",  // this store reads data in json format
            root: "items"  // the itens to be read are inserted in a "items" array, in you case "formFields"
        }
    }
});

// in jsFiddle, we need to send the JSON that we want to read. In your case, you will just call .load() or set the autoLoad config of the store to true. If you want send adition parameters, you can use the sintax below.
myStore.load({
    params: {
        // everything inside the encode method will be encoded in json (this format that you must send to the store)
        json: Ext.encode({
            items: [{
                "firstname": "foo",
                "lastname": "bar"
            }, {
                "firstname": "david",
                "lastname": "buzatto"
            }, {
                "firstname": "douglas",
                "lastname": "adams"
            }]
        })
    }
});

// creatin the grid, setting its columns and the store
Ext.create( "Ext.grid.Panel", {
    title: "My Grid",
    columns: [{
        header: "First Name",
        dataIndex: "firstname"   // the dataIndex config is used to bind the column with the json data of each item
    }, {
        header: "Last Name",
        dataIndex: "lastname"
    }],
    store: myStore,           // the store created above
    renderTo: Ext.getBody()   // render the grid to the body
});

You can access a fiddle here: http://jsfiddle.net/cYwhK/1/ The documentation:

• JsonStore: http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.data.JsonStore
• Ajax proxy: http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.data.proxy.Ajax
• Grid: http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.grid.Panel

Another think that I forgot to tell is that you can use Models in your store instead of an array of fields. The Models are like a class in a OO language. Take a look: http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.data.Model