开发者

Unable to show JSON data into Grid Panel. Shows only one blank row in Grid

Unable to show JSON data into Grid. I got blank grid but you can see sequence no "1" and blank row, though number 1 is auto generated, it is not a JSON data.

code

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 Response is as follow

{"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","开发者_JS百科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}]}

I checked the FireBug Console. It returns the response as above but it is of type(actionmethod) 'GET'

When I did

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

I got Store Count = 1.

-Ankit


the problem is that your components aren't defined correctly. for instance, the reader config in extjs4 doesn't belong to store, it belongs to proxy see http://dev.sencha.com/deploy/ext-4.0.2a/docs/#/api/Ext.data.proxy.Ajax so for the proxy you should have

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

I think with this modification it should work

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜