Search code examples
javascriptextjsextjs4sencha-touchextjs4.2

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

I have JSON data which is stored in one object.

Now I have to show data on UI in Grid View. When I click on the button one new window should be open and in that window the JSON data will be shown.

I am not able to iterate JSON and put the data into grid view.

Here is my code

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

My json data

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

Can any one help how will I iterate this JSON data and put the data into this new Window in extJS?

Solution

  • Example, based on your question:

    <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>

    Notes: Tested with ExtJS 4.2