PDA

View Full Version : Datagrid custom renderer - undefined item error



ajukkara
18 Nov 2009, 4:39 PM
I've just started to work with ExtJs, so I'm truly a newbie. I made some expirements with custom renderers, and from there I ended up with this issue. With local array data the renderer is working okay. But when I try to fetch the data from database via php script, I'm getting this error:

"data_user.queryBy(function (rec) {return rec.data.id == val;}).itemAt(0) is undefined"

Php script is returning correct data and JSON reader modifies it as supposed, so the data should be there to be fetch by renderer. So I'm a bit lost with this. Another weird thing is, that when I created a new project this same code worked for a while. After couple of reloads it ended up with the same error message.

I believe this has something to do with JSON reader loading, so the renderer is somehow without the data? Hopefully some of you experts could help me out with this. I tried to debug this with Firebug, but no help for me from there.

Here's my code:


<html>

<head>
<title>
Example renderer
</title>
<link rel="stylesheet" type="text/css" href="../lib/extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../lib/extjs/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../lib/extjs/ext-all-debug.js">
</script>
<script>
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'images/s.gif';
Ext.QuickTips.init();

var data_store = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['user_id', 'direction', 'from_company_id'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'data/data_store_input.php'
}),
autoLoad: true
});

function user_id(val) {
return data_user.queryBy(function(rec) {
return rec.data.id == val;
}).itemAt(0).data.username;
}

var data_user = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['id', 'username', 'status'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'data/user_data.php'
}),
//autoLoad: true
});

data_user.load();

var Grid_number_one = new Ext.Panel({
id: 'mainPanel',
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'center',
xtype: 'grid',
id: 'mainGrid',
store: data_store,
height:500,
frame: false,
columns: [{
header: "Input",
dataIndex: 'user_id',
renderer: user_id
},
{
header: "Inputtype",
dataIndex: 'direction'
},
{
header: "From",
dataIndex: 'from_company_id'
},
]
}]
});

});
</script>
</head>

<body>
</body>

</html>