javascript - Extjs : Show data on Grid

标签 javascript extjs extjs4 extjs4.1 extjs4.2

虽然我在响应中得到输出

Response

{
    "result": [{
        "date": "",
        "emailID": "",
        "name": ""
    }, {
        "date": "2007-04-04T00:00:00",
        "emailID": "fgffg",
        "name": "cvbgfv"
    }, {
        "date": "2009-07-15T00:00:00",
        "emailID": "hfgh",
        "name": "gjhgh"
    }, {
        "date": "2009-10-07T00:00:00",
        "emailID": "gdfd",
        "name": "dfgdf"
    }, {
        "date": "2010-02-10T00:00:00",
        "emailID": "vcvc",
        "name": "bvcb"
    }, {
        "date": "2011-04-08T00:00:00",
        "emailID": "dfgfdgd",
        "name": "fvdf"
    }, {
        "date": "2012-07-18T00:00:00",
        "emailID": "dgffdgfd",
        "name": "rgffdg"
    }, {
        "date": "2012-08-07T00:00:00",
        "emailID": "dsfsdfsd",
        "name": "sdfdsfdsf"
    }, { ... // skipped some lines
        "date": "2019-04-08T00:00:00",
        "emailID": "vcvbc",
        "name": "dg"
    }, {
        "date": "2019-11-05T00:00:00",
        "emailID": "dgfd",
        "name": "dfgfdg"
    }, {
        "date": "2019-11-21T00:00:00",
        "emailID": "dgfd",
        "name": "dfgfdg"
    }, {
        "date": "2020-01-01T00:00:00",
        "emailID": "fgf",
        "name": "vfdvf"
    }, {
        "date": "2020-01-14T00:00:00",
        "emailID": "nbvb",
        "name": "fgf"
    }, {
        "date": "2020-04-14T00:00:00",
        "emailID": "fdgdf",
        "name": "dgdf"
    }, {
        "date": "2020-06-09T00:00:00",
        "emailID": "sfdds",
        "name": "dsfsd"
    }, {
        "date": "2020-09-23T00:00:00",
        "emailID": "fdfgf",
        "name": "vcxv"
    }],
    "success": true,
    "totalcount": 84
}
<小时/>

Here is my store & grid

 var store = Ext.create('Ext.data.Store', {
     autoLoad: true,
     fields: [{
         name: 'date',
         type: 'string'
     }, {
         name: 'emailID',
         type: 'string'
     }, {
         name: 'name',
         type: 'string'
     }],
     pageSize: 10, // items per page
     id: 'date',
     proxy: {
         method: 'GET',
         url: 'rest/helloworld/submit',
         noCache: false,
         type: 'ajax',
         root: 'result',
         totalProperty: 'totalcount'
     }
 });

 // specify segment of data you want to load using params
 store.load({
     params: {
         start: 0,
         limit: 10
     }
 });

 var grid = Ext.create('Ext.grid.Panel', {
     title: 'Result',
     store: store,
     columns: [{
         header: 'Name',
         dataIndex: 'name'
     }, {
         header: 'Email',
         dataIndex: 'emailID',
         flex: 1
     }, {
         header: 'Date',
         dataIndex: 'date'
     }],
     width: 400,

     dockedItems: [{
         xtype: 'pagingtoolbar',
         store: store,
         dock: 'bottom',
         displayInfo: true
     }],
     renderTo: Ext.getBody()
 });
<小时/>

但它在网格上不可见。

请帮忙

最佳答案

您需要定义一个阅读器:

reader: {
    type: 'json',
    rootProperty: 'result',
    totalProperty: 'totalcount'
}

您的示例工作:https://fiddle.sencha.com/#fiddle/l3u

关于javascript - Extjs : Show data on Grid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29582288/

相关文章:

javascript - ExtJs4 - 相当于 ExtJs3 'tabPanel.getTabEl()' 方法?

extjs - Ext.ux.form.field.DateTime 问题

javascript - 如何在钛手机上从其他JS文件关闭模态窗口?

javascript - 高度使我的图像上出现了损坏的图像链接

javascript - 重新启动应用程序时数据存储的更改丢失

JavaScript 将元素另存为图像或 Extjs 4.x 另存为图像

javascript - ASK - jquery datepicker - 在文本输入中保留选定的日期

javascript - 使用带有 &lt;input&gt; 标签的 Angular 进行多选下拉菜单

javascript - 商店添加 - 不起作用

javascript - Ext JS 组合框 : how to fix item at the top of BoundList dropdown