无法将JSON数据显示到Grid Panel中。在网格中只显示一个空白行

Question

无法将JSON数据显示到网格中。我得到了空白的网格，但是您可以看到序列号“1”和空白行，尽管编号1是自动生成的，但它不是JSON数据。

代码

Ext.onReady(function(){ 

// PRESSURE GRID - PRESSURE TAB // 

     var proxy=new Ext.data.HttpProxy({url:'',method: 'POST'}); 

    Ext.define('pressureModel', { 
    extend: 'Ext.data.Model', 
    fields: ['month', 'KOD', 'timePeriod', 'beachBank', 'manMade', 'charterBoat', 'privateRentalBoat'] 
    }); 

    var pressureGridStore=new Ext.data.Store({ 
     id: "pressureG", 
     model: 'pressureModel', 
     proxy: proxy, 
     reader:new Ext.data.JsonReader({ 
      type : 'json', 
      root: 'pressureFi', 
      totalProperty: 'pressureResultLength' 
     },[{name:'month'},{name:'KOD'},{name:'timePeriod'},{name:'beachBank'},{name:'manMade'},{name:'charterBoat'},{name:'privateRentalBoat'}] 
    )   
    }); 



    // Generic fields array to use in both store defs. 
    var pressureFields = [ 
     {name: 'month', mapping: 'month', type: 'string'}, 
     {name: 'KOD', mapping: 'KOD', type: 'string'}, 
     {name: 'timePeriod', mapping: 'timePeriod', type: 'string'}, 
     {name: 'beachBank', mapping: 'beachBank', type: 'string'}, 
     {name: 'manMade', mapping: 'manMade', type: 'string'}, 
     {name: 'charterBoat', mapping: 'charterBoat', type: 'string'}, 
     {name: 'privateRentalBoat', mapping: 'privateRentalBoat', type: 'string'} 
    ]; 



    var pressureGrid = new Ext.grid.GridPanel({ 
     id    : "pressure-grid", 
     ddGroup   : 'gridDDGroup', 
     store   : pressureGridStore, 
     columns: [new Ext.grid.RowNumberer(), 
     { 
      text: 'Month', 
      width: 70, 
      dataIndex: 'month' 
     },{ 
      text: 'Kind of Day', 
      width: 85, 
      dataIndex: 'KOD' 
     },{ 
      text: 'Time Period', 
      width: 95, 
      dataIndex: 'month' 
     },{ 
      text: 'Beach/Bank', 
      width: 65, 
      dataIndex: 'beachBank' 
     },{ 
      text: 'Man/Made', 
      width: 65, 
      dataIndex: 'manMade' 
     },{ 
      text: 'Charter Boat', 
      width: 75, 
      dataIndex: 'charterBoat' 
     },{ 
      text: 'Private/Rental Boat', 
      width: 105, 
      dataIndex: 'privateRentalBoat' 
     }], 
     enableDragDrop : true, 
     stripeRows  : true, 
     autoExpandColumn : 'name', 
     width   : 624, 
     height   : 325 
    }); 

    function handleActivate(tab){ alert("in handle "); 

    pressureGridStore.proxy.url='siteUtil.jsp'; 

    pressureGridStore.load({params: 
     {'method':'getSitePressureInfo'} 
    }); 
    } 

tabPanelObject = { 
getTabPanel: function(siteId) { 

var infoPanel = new Ext.tab.Panel({ 
       id: 'tabPan', 
       xtype: 'tabpanel', 
       title: 'Site Information', 
       height: 1000, 
       width: '50.4%', 
       items:[ 
       { 
        title: 'Pressure', 
        id: 'pressureTab', 
        listeners: {activate: handleActivate}, 
        items:[ 

        {  
         xtype: "panel", 
         width : '100%', 
         height : 300, 
         layout: 'fit', 
         items: [ 
         pressureGrid 
         ] }  
        ]} 
       ] 
      }); 

      return infoPanel; 
     } 
    } 
}); 

JSON响应是遵循

{"pressureResultLength":"96","pressureFi":[{"charterBoat":9,"timePeriod":"0200-  0800","KOD":"WEEKDAY","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9}, {"charterBoat":0,"timePeriod":"0800-1400","KOD":"WEEKDAY","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"1400-2000","KOD":"WEEKDAY","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"2000-0200","KOD":"WEEKDAY","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKEND","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"0800-1400","KOD":"WEEKEND","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"1400-2000","KOD":"WEEKEND","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"2000-0200","KOD":"WEEKEND","beachBank":9,"month":"JAN","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKDAY","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"0800-1400","KOD":"WEEKDAY","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"1400-2000","KOD":"WEEKDAY","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"2000-0200","KOD":"WEEKDAY","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKEND","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"0800-1400","KOD":"WEEKEND","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":0,"timePeriod":"1400-2000","KOD":"WEEKEND","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"2000-0200","KOD":"WEEKEND","beachBank":9,"month":"FEB","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKDAY","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9}]} 

我检查Firebug控制台。它返回的响应上面一样，但它的类型是（actionmethod） 'GET'

当我做

pressureGridStore.on({ 
     'load':{ 
    fn: function(store, records, options){ 
     //store is loaded, now you can work with it's records, etc. 

     console.info('store load, arguments:', arguments); 
     console.info('Store count = ', store.getCount()); 
    }, 
     scope:this 
    } 
    }); 

的我被储存次数= 1

-Ankit

Answer 1

问题是你的组件没有被正确定义。例如，在extjs4读卡器的配置不属于存储，它属于代理看到http://dev.sencha.com/deploy/ext-4.0.2a/docs/#/api/Ext.data.proxy.Ajax所以对于代理，你应该有

var proxy=new Ext.data.HttpProxy({ 
      url:'', 
      reader:new Ext.data.JsonReader({ 
        type : 'json', 
        root: 'pressureFi', 
        totalProperty: 'pressureResultLength' 
      }) 
}) 

我觉得这个修改它应该工作