Unable to setup show JSON data into simple Grid

[onlyitj]

I'm trying to use simple Grid, my server process return response like this

({"results":[{"author":"Stepan","title":"Animal Planet","isbn":"11-234-56","bookId":"10"},{"author":"Stepan","title":"Animal Planet","isbn":"11-234-56","bookId":"10"}]})

and the js is as follows, please help me what is wrong nothing is showing....

Ext.onReady(function(){
Ext.get('okButton').on('click', function(){

myRecordObj = Ext.data.Record.create([
{name: 'author'},
{name: 'title'},
{name: 'isbn'},
{name: 'bookId'}
]);

myReader = new Ext.data.JsonReader({ //creates array from JSON response
root: 'results'
},
myRecordObj
);

ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'getResponsec',
method: 'POST'
}),
reader: myReader,
sortInfo:{field: 'title', direction: "ASC"},
baseParams:{task: "read"}//this parameter is passed for any HTTP request
});

ds.load();

var grid = new Ext.grid.GridPanel({
store: ds,
columns: [
{header: "AUTHOR", width: 90, sortable: true, dataIndex: 'author'},
{header: "Title", width: 120, sortable: true, dataIndex: 'title'},
{header: "ISBN", width: 90, sortable: true, dataIndex: 'isbn'},
{header: "BOOK ID", width: 90, sortable: true, dataIndex: 'bookId'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true
});

grid.getSelectionModel().selectFirstRow();

});

});

[tryanDLS]

Post your code in CODE tags so others can read it. What debugging steps have you tried? There are many threads here about grids and tutorials - have you read any of them to understand common problems?

[onlyitj]

I've seen that response object is coming from Server like below from FireFox's Firebug

({"results":[{"author":"Stepan","title":"Animal Planet","isbn":"11-234-56","bookId":"10"},{"author":"Stepan","title":"Ani mal Planet","isbn":"11-234-56","bookId":"10"}]})

Please clarify below point to me

1) Is totalProperty and id parameters are important to Ext.data.JsonReader construction? since I'm not currently passing them while construction.

2) depends on above, is it necessary for each record in JSON to have an ID field?

 
Ext.onReady(function(){
Ext.get('okButton').on('click', function(){

myRecordObj = Ext.data.Record.create([
{name: 'author'},
{name: 'title'},
{name: 'isbn'},
{name: 'bookId'}
]);

myReader = new Ext.data.JsonReader({ //creates array from JSON response
root: 'results'
},
myRecordObj
);

ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'getResponsec',
method: 'POST'
}),
reader: myReader,
sortInfo:{field: 'title', direction: "ASC"},
baseParams:{task: "read"}//this parameter is passed for any HTTP request
});

ds.load();

var grid = new Ext.grid.GridPanel({
store: ds,
columns: [
{header: "AUTHOR", width: 90, sortable: true, dataIndex: 'author'},
{header: "Title", width: 120, sortable: true, dataIndex: 'title'},
{header: "ISBN", width: 90, sortable: true, dataIndex: 'isbn'},
{header: "BOOK ID", width: 90, sortable: true, dataIndex: 'bookId'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true
});

grid.getSelectionModel().selectFirstRow();

});

});

[onlyitj]

Everything was fine, just height was not set and I think bcoz there was no Id field it was not adjusting, but I put autoHeight to true, now its fine...

[Ankit.Desai]

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.

Below is the 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","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},{"charterBoat":1,"timePeriod":"0800-1400","KOD":"WEEKDAY","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":1,"timePeriod":"1400-2000","KOD":"WEEKDAY","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"2000-0200","KOD":"WEEKDAY","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":9,"timePeriod":"0200-0800","KOD":"WEEKEND","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":1,"timePeriod":"0800-1400","KOD":"WEEKEND","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9},{"charterBoat":1,"timePeriod":"1400-2000","KOD":"WEEKEND","beachBank":9,"month":"MAR","privateRentalBoat":9,"manMade":9}]}




-Ankit