Extjs:在Grid上显示数据

时间:2015-04-11 19:48:35

标签: javascript extjs extjs4 extjs4.1 extjs4.2

虽然我在回复中获得了输出

  

响应

{
    "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
}

  

这是我的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()
 });

但它在grid上无法显示。

请帮忙

1 个答案:

答案 0 :(得分:1)

您需要定义reader

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

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