如何在ajax成功时使用json数据加载网格数据答案

【问题标题】：How to load grid data with json data on ajax sucess如何在ajax成功时使用json数据加载网格数据
【发布时间】：2018-06-13 02:53:21
【问题描述】：

在我的 ajax 成功中，我调用了这个函数，并从响应中提取我需要加载的数据。

   success: function(response){
     StoreloadData(this,response);
    },

在 StoreloadData 函数中，我试图像这样在我的网格中加载数据，但没有获取数据。

StoreloadData(me,response){
        var myGrid = Ext.getCmp('#myGrid');
        var myGridStore = myGrid.getStore();
        var gridData = response.myData.data;
        var total = gridData[0].recordsCount;
        myGridStore.load(gridData); // Not loading
        myGridStore.loadData(gridData); // Not loading
        myGrid.refresh(); // Error. 
    }

我在这一行有 myJSon 数据var gridData = response.myData.data; 这是一个像这样的简单 json 对象。

[{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"}]

谁能建议我如何克服这个问题。

【问题讨论】：

我将首先记录到控制台成功回调中返回的任何内容。 success: function(response){ console.log(response); }, 它应该让您了解数据的结构，您也可以将其粘贴到您的问题中，以便我们更好地帮助您。
@Pheonix2105 我更新了我的问题。提供数据样本。
为什么不设置ajax url来存储代理并加载存储？
@HesamFaridmehr 因为我必须加载的数据是`response.myData.data;`
这样您就可以将代理阅读器的rootProperty设置为myData.data

标签： javascript extjs extjs6

【解决方案1】：

我建议你这个解决方案。只需使用字段定义定义空存储，然后使用Ext.JSON.decode() 和store.loadData() 加载数据。

工作示例：

文件grid_json_load.json：

{
    "data": [
    {
        "dataIndex1": "Value1",
        "dataIndex2": "Value2"
    },
    {
        "dataIndex1": "Value1",
        "dataIndex2": "Value2"
    }
    ],
    "success": true
}

文件grid_json_load.html：

<html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"> 
    <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
    <script type="text/javascript">

Ext.define('Test.TestWindow', {
    extend: 'Ext.window.Window',

    closeAction: 'destroy',
    border: false,
    width: 560,
    height: 500,
    modal: true,
    closable: true,
    resizable: false,
    layout: 'fit',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);

        me.store = Ext.create('Ext.data.ArrayStore', {
            data: [],
            fields: [
                {name: "dataIndex1", type: "string"},
                {name: "dataIndex2", type: "string"}
            ]
        });

        me.grid = Ext.create('Ext.grid.Panel', {
            autoScroll: true,
            stripeRows: true,
            width: 420,
            height: 200,
            store: me.store,
            columnLines: false,
            columns : [
                {header : 'Data Index 1', width: 100, dataIndex : 'dataIndex1'},
                {header : 'Data Index 2', width: 100, dataIndex : 'dataIndex2'}
            ]
        });
        me.add(me.grid);
    }

}); 


Ext.onReady(function(){

    var win = Ext.create('Test.TestWindow', {
    });


    Ext.Ajax.request({
        url: 'grid_json_load.json',
        method: 'POST',
        timeout: 1200000,
        params: {
        },

        success: function (response, opts) {
            var win = new Test.TestWindow({

            });

            var r = Ext.JSON.decode(response.responseText);
            if (r.success == true) { 
                win.show();
                win.store.loadData(r.data);     
            } else {
                Ext.Msg.alert('Attention', 'Error');        
            };
        }
    });

});
    </script>   
    <title>Test</title>
    </head>
    <body>
    </body>
</html>

注意事项：

使用 ExtJS 4.2 和 ExtJS 6.6 测试。

【讨论】：

Ext JS 6（不是4.2版）的问题
@mynameisVý 感谢您的留言。我将尝试使用 ExtJS 6 或更高版本对其进行测试。