如何将数据从 json 放入 ext window 中的 extjs 网格视图

Question

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

现在我必须在网格视图中显示 UI 上的数据。当我单击按钮时，应该会打开一个新的 window，其中 window 将显示 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 中的这个新 Window 中？

Answer 1

例子，根据你的问题：

<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

测试

Answer 2

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

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

如何将数据从 json 放入 ext window 中的 extjs 网格视图

How to put data from json to extjs grid view in ext window

javascript

extjs

sencha-touch

extjs4

extjs4.2