Question

我是ext Js的新手。

我有一个ajax电话。我可以看到警报上的响应文本，但下一行（假设解码responseText）不会在警报框中产生任何结果。

我的功能是这样的：

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");
            }

    });

}

在转换为字符串

后，这是我的json

"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" : ""
  } ],

这是我的数据

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

如何在网格中显示此数据

Answer 1

以下是您可以使用的代码：

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
});

您可以在此处访问小提琴：http://jsfiddle.net/cYwhK/1/ 文档：

另一个认为我忘了告诉你的是你可以在你的商店中使用Models而不是一系列字段。模型就像一个OO语言的类。看看：http://dev.sencha.com/deploy/ext-4.1.0-gpl/docs/index.html#!/api/Ext.data.Model

解码Ajax响应

1 个答案: