View Full Version : [RESOLVED] GridPanel, renderer, and JsonStore problem

26 Jan 2011, 4:43 AM
Hi, I am new to ExtJS, and I was going through a book when I had trouble with an example.

The problem seems to be with the queryBy method of JsonStore, but I could be wrong, of course. I am using a data store for the GridPanel called "store," but I am comparing a value in "store" (namely, "genre," which is really a genreId) to a value in a JsonStore called "genres," much like a relational database inner join. This may not be the best idea, but I'm merely curious as to why this problem is happening the way it is.

The interesting thing is that the data only gets loaded after I attempt to do something to the GridPanel. I even used alerts (synchronous regular JavaScript ones to see the timing) to make sure the "genres" store was loaded before the GridPanel is rendered. The GridPanel shows up blank, but then when i try to rearrange the columns, the data pops up. It's almost like I need to tell the GridPanel to refresh, but I tried several methods and they did not work.

Here's the Ext code:

Ext.onReady(function() {
var genres = new Ext.data.JsonStore({
fields: [{name:'id', type:'int'}, 'genre_name'],
root: 'rows',
url: 'http://localhost/test.php',
idProperty: 'id',
autoLoad: true,

var store = new Ext.data.Store({
autoLoad: true,
data: [[
"Office Space",
"Mike Judge",
"Work Sucks",
"Super Troopers",
"Jay Chandrasekhar",
"Altered State Police",
reader: new Ext.data.ArrayReader({id:'id'}, [
{name:'id', type:'int'},
{name:'released', type:'date', dateFormat: 'Y-m-d'},

var grid = new Ext.grid.GridPanel({
renderTo: document.body,
frame: true,
title: 'Movie Database',
height: 200,
width: 600,
store: store,
columns: [
{header: "Title", dataIndex: 'title'},
{header: "Director", dataIndex: 'director'},
{header: "Released", dataIndex: 'released',
renderer: Ext.util.Format.dateRenderer('m/d/Y')},
{header: "Genre", dataIndex: 'genre', renderer: function(val, m, r, ri, ci, s) {
return genres.queryBy(function(rec,id) {
return rec.get('id') == parseInt(val);
{header: "Tagline", dataIndex: 'tagline'}
and this is the JSON object returned by "test.php":

{"rows":[{"id":1,"genre_name":"New Genre"},{"id":2,"genre_name":"Comedy"},{"id":3,"genre_name":"Action"},{"id":4,"genre_name":"Adventure"},{"id":5,"genre_name":"Kids"}]}I know this example is rudimentary, but I'm just curious as to why it does this. Like I said, the data does eventually get loaded, so it's not a problem with connections or anything. I even tested to see if the data would be loaded with a SimpleStore, and it was (immediately)! I just don't understand it because I have autoLoad set to true.

Any help and/or guidance would be appreciated. Thanks so much in advance!

26 Jan 2011, 5:00 AM
Alright, well, I feel stupid, but after looking through other threads and the FAQ, I found that adding the following code at the end makes it work. It makes sense to me, and was exactly what I was describing in my previous post, so I feel even more stupid (haha).

'load': {
fn: function() {

The thing that was troubling me was the asynchronous nature (even though I mentioned that above). I completely understand that one has to wait until the store has finished loading to refresh the GridPanel.

I'm keeping this thread here in case anyone runs across the same problem. Sorry to make you read something so silly!