无法将 JSON 数据显示到网格面板中。在网格中仅显示一个空白行

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

我得到了 Store Count = 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'
          })
})

我认为通过这个修改它应该可以工作