PDA

View Full Version : Question: How to load Grid with dynamic JsonStore data



guyza
27 Sep 2010, 1:05 PM
I'm trying to identify why my Grid will not display data. I've implemented numerous types of grids, but for some reason, I'm not sure what I'm missing in this particular example. Any help would be appreciated.

OK, within my application, within my Ext.onReady function, I load my set of JSON data from a servlet using the following. The pertinent object is highlighted in red:


var url = "ajax/DataServlet";
var conn = new Ext.data.Connection();

conn.request({
url: url,
method: 'GET',
success: function(responseObject) {
var resp = Ext.decode(responseObject.responseText);

//viewport, filtergroup object is defined elsewhere
var viewport = new Ext.Viewport({
layout: 'border',
items: [map,
{
xtype:'panel',
baseCls: 'x-plain',
region: 'west',
layout: 'vbox',
split: true,
collapsible: true,
width: exadata.util.getWindowWidth() * .20 + 20,
height: exadata.util.getWindowHeight(),
border: false,
items: [filtersGroup, companyGrid(resp)
]
}]
});
viewport.on('resize', function() {
//window.location = location.href;
});
},
failure: function(responseObject) {
alert('ajax failure');
return;
}
});
Firebug indicates that this JSON object retrieved is successfully retrieved.

The obstacle I'm running into is when I try to load my GridPanel with a portion of this data. I get no errors in firebug, the GridPanel is visible, but no data loads. Here is my code:



//Global var
var datastore = new Ext.data.JsonStore({
//data: 'ajax/ExadataMapServlet',
root: 'datapoints',
fields: [
{
name: 'id',
type: 'int'
},

{
name: 'count',
type: 'int'
},
{
name: 'address',
type: 'string'
},
{
name: 'parent',
type: 'string'
},
{
name: 'lng',
type: 'float'
},
{
name: 'lat',
type: 'float'
}
]
});
datastore.on('loadexception', function(proxy, o, response) {
// cannot load the data
exadata.util.handleFailure(response, 'Unable to load data.');
});
datastore.on('load', function(store) {
var count = store.getCount();
});
datastore.setDefaultSort('parent', 'asc');

//variable/function returns GridPanel
var companyGrid = function(resp) {
datastore.loadData(resp);

//This loop shows me that the datastore is loaded with data
datastore.each(function(record) {
console.log(record.data.address);
})

return new Ext.grid.GridPanel({
id: 'grid-1',
frame: true,
title: 'Companies',
store: datastore,
//data: datastore.,
width: exadata.util.getWindowWidth() * .20,
cm: new Ext.grid.ColumnModel(
{
header: 'Company',
width: 15,
sortable: true,
dataIndex: 'address',
id: 'address'
}
viewConfig: {
forceFit: true
},
split: true,
stripeRows: true
});
}