如何將數據從json放入ext窗口中的extjs網格視圖

Question

我有存儲在一個對象中的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的新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.**

單擊此處獲取小提琴鏈接

如何將數據從json放入ext窗口中的extjs網格視圖

問題描述

2 個解決方案

解決方案1
1 已采納 2018-04-16 06:39:40

解決方案2
-1 2018-05-15 13:29:31

如何將數據從json放入ext窗口中的extjs網格視圖

問題描述

2 個解決方案

解決方案1 1 已采納 2018-04-16 06:39:40

解決方案2 -1 2018-05-15 13:29:31

解決方案1
1 已采納 2018-04-16 06:39:40

解決方案2
-1 2018-05-15 13:29:31