PDA

View Full Version : GridPanel only displays one row of data.



kmooney
2 Feb 2010, 5:25 PM
Hi, first post on the forums. I am working on a project using ExtJS (my first experience with it). Within a page I am displaying some data in a grid panel, using an JsonStore. The store is loaded via Http. Previously I was using ExtJS 2.3, as that is what the project was using before. However I am attempting to upgrade to 3.1. Before moving to 3.1, the grid rendered without issue. Now after moving to 3.1, the grid will only display one row of data. I can see in firebug that the correct data is coming in to the store upon a GET request. However, the grid will only display the last row from the data that is retrieved. If I try to sort, it only shows the same row, so I now that it is more than just the fact that only one row is visible. Below is my code for the store and for the panel.



var scenarioDataStore = new Ext.data.JsonStore({
autoLoad: true,
autoDestroy: true,
url: '/scenarios',
idProperty: 'name',
fields: [
'name', 'date', 'type',
'spread', 'price', 'pnl', 'rpv01', 'defaultProbability'
]
});

var grid = new Ext.grid.GridPanel({
title: 'Data',
header: false,
store: scenarioDataStore,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 1200,
sortable: true
},
columns: [
{header: 'Name', width: 300, sortable: true, dataIndex: 'name'},
{header: 'Date', width: 90, sortable: true,
renderer: function(dt) {
return Ext.util.Format.date(new Date(dt), 'm/d/Y')
},
dataIndex: 'date'},
{header: 'Scenario Type', width: 150, sortable: true, dataIndex: 'type'},
{header: 'Spread', width: 90, sortable: true, dataIndex: 'spread',
renderer: function(dt) {
var num = dt * 10000;
return num .toFixed(2);
}},
{header: 'Price', width: 90, sortable: true, dataIndex: 'price',
renderer: function(dt) {
return dt == null ? null : dt.toFixed(6);
}},
{header: 'Scenario PnL', width: 90, sortable: true, dataIndex: 'pnl'},
{header: 'RPV01', width: 90, sortable: true, dataIndex: 'rpv01',
renderer: function(dt) {
return dt == null ? null : dt.toFixed(6);
}},
{header: 'Default Probability', width: 115, sortable: true, dataIndex: 'defaultProbability',
renderer: function(dt) {
return dt == null ? null : dt.toFixed(6);
}}

]
}),
viewConfig: {
forceFit: true
},
stripeRows: true,
columnLines: true,
width: 1200,
frame: true
});


Any help would be greatly appreciated. Also, please let me know if I have not provided enough information. Thanks!!

-Kevin

kmooney
2 Feb 2010, 6:23 PM
Hi,

I have solved my issue. In the store I had idProperty set to name. For a given set of data, (it changes based on the selection of a combobox, which updates the proxy url, and reloads the store), that field is always the same. I changed the id to various fields and if the value of the field for certain records are the same, it takes the last record of the group. This behavior is not existent in 2.3

-Kevin

novus744
16 Mar 2010, 9:12 AM
Thanks, Kevin, for posting a follow-through.

This solved my problem.

atifoxon
11 Feb 2011, 5:01 AM
Thanks for the answer

idProperty should be set to a column which is unique in set of records. I was setting it to a non-unique column.

Windekewaai
12 Feb 2011, 5:27 AM
I have the same problem, however I did set the idProperty as the unique id field.
Somehow only the first record is shown in the grid.

Here is my code:



var reader = new Ext.data.DataReader({
totalProperty: 'total',
successProperty: 'success',
messageProperty: 'message'
});

var writer = new Ext.data.DataWriter({
encode: true,
writeAllFields: true
});

var news_store = new Ext.data.JsonStore({
reader: reader,
writer: writer,
proxy: new Ext.data.HttpProxy({
api: {
read: '<?php echo site_url('news/read'); ?>',
create: '<?php echo site_url('news/create'); ?>',
update: '<?php echo site_url('news/update'); ?>',
destroy: '<?php echo site_url('news/delete'); ?>'
},
method: 'POST'
}),
idProperty: 'id',
root: 'data',
fields: [
{name: 'id'},
{name: 'title', type: 'string'},
{name: 'author', type: 'string'},
{name: 'date', type: 'date', dateFormat: "Y-m-d H:i:s"}
],
autoLoad: false,
autoSave: false
});

new Ext.grid.GridPanel({
id: 'grid-news',
border: false,
store: news_store,
colModel: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{header: 'Titel', dataIndex: 'title'},
{header: 'Auteur', dataIndex: 'author'},
{header: 'Datum', dataIndex: 'date', renderer: Ext.util.Format.dateRenderer("d/m/Y H:i:s")}
]
}),
viewConfig: {
forceFit: true
}
})
This is the JSON that is returned from my back-end:



{
"total": 2,
"data": [{
"id":"1",
"userId":"1",
"title":"Dit is een test",
"message":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"date":"2011-02-10 22:06:03",
"author":"XYZ"
},{
"id":"2",
"userId":"1",
"title":"Dit is nog een test",
"message":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"date":"2011-02-12 14:25:04",
"author":"XYZ"
}],
"success": true
}

Windekewaai
12 Feb 2011, 6:56 AM
I solved the problem.
It was just a height issue on the gridpanel: setting the property autoHeight to true did the trick.

RSA
22 Feb 2011, 6:32 PM
Thanks! I had the same issue, setting 'autoHeight: true' did the trick!

mikesmichael
16 Sep 2013, 10:12 AM
Solved my problem of only one row display with autoHeight: true

=D>