PDA

View Full Version : One row from JSON store displays in Grid



Adamw
5 Mar 2010, 1:23 PM
I have an odd issue were only the first row from my JSON store is displaying in the Grid. Can any one see why?



/**
* Create data record
*/
var dataRecord = Ext.data.Record.create([
{name: 'UserName'},
{name: 'FullName'},
{name: 'Role'},
{name: 'Email'},
{name: 'Deleted'}
]); //eo datarecord [header_leftmenu_itemUsers]

/**
* Create a Column Model
*/
var colModel = new Ext.grid.ColumnModel([
{
id: 'FullName', //by placing an id on this column we can later reference the column specifically
header: 'Full Name', //header = text that appears at top of column
width: 150, //column width
sortable: true, //false (default) to disable sorting by this column
locked: true,
dataIndex: 'FullName' //the DataStore field "name" this column draws its data from
},{
id: 'Name', //by placing an id on this column we can later reference the column specifically
header: 'Username', //header = text that appears at top of column
width: 150, //column width
sortable: true, //false (default) to disable sorting by this column
locked: false,
dataIndex: 'UserName' //the DataStore field "name" this column draws its data from
},{
id: 'Role', //by placing an id on this column we can later reference the column specifically
header: 'Roles', //header = text that appears at top of column
width: 200, //column width
sortable: false, //false (default) to disable sorting by this column
locked: false,
dataIndex: 'Role' //the DataStore field "name" this column draws its data from
},{
id: 'Email', //by placing an id on this column we can later reference the column specifically
header: 'Email', //header = text that appears at top of column
width: 200, //column width
sortable: true, //false (default) to disable sorting by this column
locked: false,
dataIndex: 'Email' //the DataStore field "name" this column draws its data from
},{
id: 'Deleted', //by placing an id on this column we can later reference the column specifically
header: 'Deleted', //header = text that appears at top of column
width: 50, //column width
sortable: false, //false (default) to disable sorting by this column
locked: true
}
]); //eo colModel [header_leftmenu_itemUsers]

/**
* Create JSON reader
*/
dataReader = new Ext.data.JsonReader({
root: 'results', // name of the property that is container for an Array of row objects
totalProperty: 'total',
},
dataRecord //instead of defining inline just pass a reference to the object
); // end define reader

/**
* Create Json Data Store
*/
store = new Ext.data.Store({
// store configs
//autoDestroy: true,
//storeId: 'myStore',
//id: 'DataStore',
proxy: new Ext.data.HttpProxy({
url: 'database.asp', //url to data object (server side script)
method: 'POST'
}),
baseParams: { view: id }, //this parameter is passed for any HTTP request
// reader configs
reader: dataReader
}); // eo var store

// Load Data Store(s)
store.load();

// Create Grid Panel
var grid = new Ext.grid.GridPanel({
store: store, //the DataStore object to use (ds: is shorthand)
colModel: colModel, //gets the ColumnModel object to use (cm: is shorthand)
autoheight: true, //you must specify height or autoHeight
stripeRows: true, //Alternate Row color
forceFit: true,
autoSizeColumns: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
//el: 'center-region-container',
loadMask: true,
listeners:{show:function() {
this.loadMask = new Ext.LoadMask(this.body, {
msg:'Loading. Please wait...'
});
}}
});My JSON store returns with more than one Result

Animal
5 Mar 2010, 2:10 PM
show us the json

fay
6 Mar 2010, 2:32 AM
It is actually loading all the data, it's just that the grid is sized for the first row.

The answer's in your code :)


autoheight: true, //you must specify height or autoHeight

typo! It should be autoHeight

Animal
6 Mar 2010, 5:56 AM
Good catch!

I read autoheight, and decided that it was going to be allowed to be auto height, so I couldn't work out what was the prolem!

@OP: remember that autoHeight is invalid if you are going to be putting it into a size managing layout. It defeats the layout management.

Adamw
6 Mar 2010, 7:55 AM
Thank you I changed it to autoHeight: true and now the whole grid is displaying.

ZeusTheTrueGod
6 Mar 2010, 11:12 PM
I suggest admins to write automatic typo discovery like this 'autoheight' with autoanswer - like 'Bot read your message and was able to help you: line X column Y - use autoHeight instead of autoheight'. Main idea is that some proprties are oftem mispelled: labelWidths instead of labelWidth, may be a simple type like lableWidth. I know that there are algorithms which can realy simple detect such typos (up to 2-3 letters for long words and may be 1-2 letter for short one).

If admins don't have enough time - I can write a parser with common typo autoanswer on a client side.