PDA

View Full Version : Newbie wanting help: grid is always empty



abolotnov
13 Feb 2011, 9:33 AM
Hiya, I'm trying to setup a very simple grid for my items - I've taken code from the samples and adjusted to my setup/data - I'm not getting any errors or anything, but the grid will remain empty.

Here is the code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">

Ext.onReady(function(){
var fm = Ext.form;
var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [{
header: 'ID',
dataIndex: 'id',
width: 100
},
{
header: 'Collection Name',
dataIndex: 'name',
width: 300
}]
});

var store = new Ext.data.JsonStore({
autoDestroy: true,
url: '/admin/srv_collection_list.php',
reader: new Ext.data.JsonReader({
root: 'rows',
idProperty: 'id',
fields: [
{name: 'id', mapping: 'id'},
{name: 'name', mapping: 'name'}
]
}),
sortInfo: {field:'id', direction:'ASC'}
});

var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'collectionManager',
width: 600,
height: 300,
// autoExpandColumn: 'name', // column with this id will be expanded
title: 'Collection Manager',
frame: true,
clicksToEdit: 1

});

// manually trigger the data store load
store.load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
Ext.Msg.show({
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
}
});
});
</script>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="collectionManager"></div>
</body>
</html>


and the /admin/srv_collections_list.php will return the following json:



{rows:[{"id":"1","name":"Collection test Name"},{"id":"2","name":"Collection test Name"},{"id":"3","name":"Collection test Name"},{"id":"4","name":"Collection test Name"}]}


I guess I'm just being really stupid - I've tried to read the docs and stuff, but looks like I'm doing something totally wrong and can't pick it.

fay
13 Feb 2011, 11:26 AM
Are you sure that the data is actually loading? Use FireFox + FireBug to see what is actually returning from your server.

(Btw, the callback (from load) will be passed 3 params - records, options, success - it's "success" that you want to check.)

I tried the following, and it worked fine:



var jsonData = {
"rows":[{
"id":1,
"name":"Collection test Name"
},{
"id":2,
"name":"Collection test Name"
},{
"id":3,
"name":"Collection test Name"
}]
};

var store = new Ext.data.JsonStore({
root: 'rows',
idProperty: 'id',
data: jsonData,
autoLoad: true,
fields: [
{name:'id', mapping: 'id', type: 'int'},
{name:'name', mapping: 'name', type: 'string'}
],
sortInfo: {
field: 'id',
direction: 'ASC'
}
});

// var cm as before
// var grid as before
// remove call to store.load - for this example

abolotnov
13 Feb 2011, 11:38 AM
Are you sure that the data is actually loading? Use FireFox + FireBug to see what is actually returning from your server.

(Btw, the callback (from load) will be passed 3 params - records, options, success - it's "success" that you want to check.)


I can see in firebug it does a call and the json I quoted is a copy of its response. I'm totally lost :)

fay
13 Feb 2011, 1:23 PM
Just spotted that your JSON is invalid, it should be "rows" (with double-quotes) instead of rows (without!).

abolotnov
14 Feb 2011, 2:56 PM
Just spotted that your JSON is invalid, it should be "rows" (with double-quotes) instead of rows (without!).

Thanks. This is what I return to the grid now:

{"rows":[{"id":"1","name":"Collection test Name"},{"id":"2","name":"Collection test Name"},{"id":"3","name":"Collection test Name"},{"id":"4","name":"Collection test Name"}]}

it didn't cure the problem though.

abolotnov
14 Feb 2011, 3:17 PM
I've changed the store config to look like this:



var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
url: '/admin/srv_collection_list.php',
storeId: 'store',
// reader configs
root: 'rows',
idProperty: 'id',
fields: ['id', 'name']
});


and it works now. thanks to all for your advices.