无法在网格面板中显示 JSON 数据。在 Grid 中只显示一个空白行

Posted 2023-02-26

【中文标题】无法在网格面板中显示 JSON 数据。在 Grid 中只显示一个空白行

【英文标题】：Unable to show JSON data into Grid Panel. Shows only one blank row in Grid

【发布时间】：2011-09-21 14:24:35

【问题描述】：

无法将 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 控制台。它返回如上的响应，但它是 type(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

【参考方案1】：

问题在于您的组件定义不正确。例如，extjs4 中的 reader 配置不属于 store，它属于 proxy 参见 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'
          )
)

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

【讨论】：

感谢 nscrob 的回复。我会看看你的建议。现在我正在删除现有的网格并添加一个带有新存储和数据对象的新网格。由于交货时间紧迫，我稍后会尝试您的建议。不管怎么说，还是要谢谢你。欣赏它。