PDA

View Full Version : Grid Displaying Only A Single Result



kylemhall
19 Apr 2011, 5:02 AM
Hello All,
I've run into a strange problem trying to display data from my REST service in a data grid. When I load the grid, it will only display the first row of the results. If I reorder the results ( server side sorting ), I it will display the correct first row, but only the first row. My grid is an extended version of Ext.grid.GridPanel. What is really strange is that if I introduce an error into my grid's onRender method, all the data will then display, but the grid's title bar disappears.

Here is my class:


Ext.namespace('BizWerks.grid');

BizWerks.grid.DocumentsGrid = Ext.extend(Ext.grid.GridPanel, { title: 'Documents', border: true,

initComponent: function() {
var proxy = new Ext.data.HttpProxy({
url: '/api/rest/documents',
headers: {
'Accept' : 'application/json'
},
});

var reader = new Ext.data.JsonReader(
{
idProperty: 'id',
totalProperty: 'totalCount',
successProperty: 'success',
messageProperty: 'message',
root: 'items',
fields: [
{name: 'id', mapping: 'id'},
{name: 'name', mapping: 'name'}
],
}
);

var store = new Ext.data.Store({
restful: true,
remoteSort: true,
proxy: proxy,
reader: reader,
baseParams: {
limit: 100
},
});

Ext.apply(this, {
loadMask: true,
store: store,
colModel: new Ext.grid.ColumnModel(
[
{
header: 'ID',
dataIndex: 'id',
sortable: true
},
{
header: 'Name',
dataIndex: 'name',
sortable: true
}
]
)
});

BizWerks.grid.DocumentsGrid.superclass.initComponent.apply(this, arguments);
},

onRender: function() {
this.store.load();
BizWerks.grid.DocumentsGrid.superclass.onRender.apply(this, arguments);
alert(); //This causes an error that makes all the rows display, but the grid title disappear
}
});

Ext.reg('documentsgridpanel', BizWerks.grid.DocumentsGrid);


The JSON it receives looks like this ( formatted for clarity ):
{
"totalCount":"6",
"success":"true",
"items":[
{"name":"aaaaaaaaaaaaaaaaaa","id":"23"},
{"name":"asdf","id":"20"},
{"name":"test1","id":"21"},
{"name":"test2","id":"22"},
{"name":"testing","id":"16"},
{"name":"zzzzzzzzzzzzzzz","id":"24"}
]
}

Any ideas? I've been searching for an answer for days and have come up empty handed.

Thanks in advance,
Kyle

Screamy
19 Apr 2011, 6:33 AM
You might just be having a layout problem. Try setting "layout: 'fit'" on the container into which you're placing your grid and see what happens.

I mention this because I've had a grid only display one row when I placed the grid into a container with no layout and no specific height...

kylemhall
19 Apr 2011, 7:04 AM
That's it! Thanks! I have my grid in the center of a border layout, but it is not 'fitting' to the center. I was able to get the entire grid to shwo by using autoHeight: true.

Thanks again.


You might just be having a layout problem. Try setting "layout: 'fit'" on the container into which you're placing your grid and see what happens.

I mention this because I've had a grid only display one row when I placed the grid into a container with no layout and no specific height...