如何将数据从 json 到 ext 窗口中的 extjs 网格视图答案

【问题标题】：How to put data from json to extjs grid view in ext window如何将数据从 json 到 ext 窗口中的 extjs 网格视图
【发布时间】：2018-09-25 05:59:15
【问题描述】：

我有存储在一个对象中的 JSON 数据。

现在我必须在网格视图中的 UI 上显示数据。当我点击按钮时，应该会打开一个新窗口，在该窗口中将显示 JSON 数据。

我无法迭代 JSON 并将数据放入网格视图中。

这是我的代码

var data = response.responseText;
var win = new Ext.Window({
    modal : true,
    height: 410,
    width: 700,
    style: 'background: #fff',
    insetPadding: 60,
    closable    : true,
    closeAction : 'destroy',
    title       : 'API Usage',
    autoScroll  : true,
    buttonAlign : 'center',
    items: //What should I write?
    }]
}).show();

我的 json 数据

[
  "list",
  [
    {
      "apiName": "List",
      "action": "GET",
      "count": 24
    },
    {
      "apiName": "Test",
      "action": "GET",
      "count": 8
    }
  ]
]

谁能帮助我如何迭代这个 JSON 数据并将数据放入 extJS 中的这个新窗口中？

【问题讨论】：

你必须设置一个 store 才能将 json 数据绑定到网格：docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store
@Sharvil 更新示例。

标签： javascript extjs extjs4 sencha-touch extjs4.2

【解决方案1】：

以下是您的答案的详细信息和修改代码

Ext.onReady(function() {

var myData = [
                {'apiName':'List', 'action':'GET','count':'23'}, 
                {'apiName':'Test', 'action':'GET','count':'24'}
            ];

    var store = new Ext.data.JsonStore({
        fields: [
            { name: 'apiName', type: 'string' },
            { name: 'action', type: 'string' },
            { name: 'count', type: 'string' }
        ]
    });

    store.loadData(myData);

    var grid = new Ext.grid.GridPanel({
        store: store,
        loadMask: true,
        columns: [
            { header: 'apiName', dataIndex: 'apiName' },
            { header: 'action', dataIndex: 'action' },
            { header: 'count', dataIndex: 'count' }
        ],
        viewConfig: {
            forceFit: true
        }
    });

    var myWin = new Ext.Window({
        layout: 'fit',
        title: 'API Usage',
        width: 400,
        height: 300,
        closable: true,
        buttonAlign: 'center',
        items: [grid],
        modal: true
    });
    myWin.show();});


**I created a fiddle using your store values in a popup. Go through this link for details code.**

Click here for Fiddle link

【讨论】：

【解决方案2】：

示例，根据您的问题：

<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.onReady(function(){

    /** This sounds more like JSON object
    * var data = {
    *   "list": [
    *       {
    *           "apiName": "List",
    *           "action": "GET",
    *           "count": 24
    *       },
    *       {
    *           "apiName": "Test",
    *           "action": "GET",
    *           "count": 8
    *       }
    *   ]   
    * };
    */
    var data = [
        "list",
        [
            {
                "apiName": "List",
                "action": "GET",
                "count": 24
            },
            {
                "apiName": "Test",
                "action": "GET",
                "count": 8
            }
        ]   
    ];

    var win = new Ext.Window({
        modal : true,
        layout: 'fit',
        height: 410,
        width: 700,
        style: 'background: #fff',
        insetPadding: 60,
        closable    : true,
        closeAction : 'destroy',
        title       : 'API Usage',
        autoScroll  : true,
        buttonAlign : 'center',
        items: [
            {
            xtype: 'gridpanel',
            autoScroll: true,
            stripeRows: true,
            width: 420,
            height: 200,
            columnLines: false,
            store: new Ext.data.Store({
                fields: ['apiName', 'action', 'count'],
                /**
                * data: data.list
                */  
                data: data[1]
            }),
            columns : [
                {header : 'API Name', sortable : true, width: 100, dataIndex : 'apiName'},
                {header : 'Action', sortable : true, width : 100, dataIndex : 'action'},
                {header : 'Count', sortable : true, width : 100, dataIndex : 'count'}
            ]
            }
        ]
    }).show();  
});
    </script>   
    <title>Test</title>
    </head>
    <body>
    </body>
</html>

注意事项： 使用 ExtJS 4.2 测试

【讨论】：