PDA

View Full Version : JSONDataModel?



kjordan
19 Feb 2007, 10:53 AM
How does one get a JSONDataModel for the grid? I see JsonReader, but how do I use that with the grid? Do I need to create a Ext.data.Store?

jack.slocum
19 Feb 2007, 10:57 AM
Take a look at the page grid example, it uses a JsonReader.

kjordan
19 Feb 2007, 11:00 AM
Take a look at the page grid example, it uses a JsonReader.
That's a lot different, going to take a bit of effort for me to convert my grids over (I have about 10 or so on various pages) :shock:

Belgabor
19 Feb 2007, 11:08 AM
If you are only doing "in-house" queries, it may be sufficient to use HttpProxy instead of ScriptTagProxy, but as my JS experience is limited I can't say what is better and/or faster :)

What I can say is that it works nice, here's my Store:

this.store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'get-grid.php'
}),
reader: this.reader,
remoteSort: true
});

jack.slocum
19 Feb 2007, 11:11 AM
Yeah the data api has changed quite a bit. There are shortcuts though (not being used there). This code:


// define the "Topic" record, mapping json data to record fields
var Topic = Ext.data.Record.create([
{name: 'title', mapping: 'topic_title'},
{name: 'author', mapping: 'username'},
{name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'lastPoster', mapping: 'user2'},
{name: 'excerpt', mapping: 'post_text'}
]);

// create reader that reads into Topic records
var reader = new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'topic_id'
}, Topic);

Could be:


// create reader that reads into Topic records
var reader = new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'topic_id'
}, [
{name: 'title', mapping: 'topic_title'},
{name: 'author', mapping: 'username'},
{name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'lastPoster', mapping: 'user2'},
{name: 'excerpt', mapping: 'post_text'}
]);

Explicitly creating the record is optional.

Although it looks complex, in the end it can be made to look much easier by combining everything in one statement if you wanted to:


// create the Data Store
var ds = new Ext.data.Store({
// load using script tags for cross domain
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.yui-ext.com/forum2/topics-remote.php'
}),

// let it know about the reader
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'topic_id'
}, [
{name: 'title', mapping: 'topic_title'},
{name: 'author', mapping: 'username'},
{name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'lastPoster', mapping: 'user2'},
{name: 'excerpt', mapping: 'post_text'}
]),
// turn on remote sorting
remoteSort: true
});

kjordan
19 Feb 2007, 11:34 AM
I'm getting an error I haven't gotten before with grid 1.0. It says invalid label in firebug and it points to my return result php page.

My resultset is:


{"ResultSet":[{"index":1,"Subject":" network key","Sender":"James Asher <[email protected]>","Recipient":"Kevin Jordan <[email protected]>","Date":"Tue, 30 May 2006 15:23:09 -0500"}],"totalCount":311}

and my grid is:

var Grid1 = {
init: function() {
this.mbox = "INBOX";
this.Mail = Ext.data.Record.create([
{name:"Subject",mapping:"mySubject"},
{name:"Sender",mapping:"mySender"},
{name:"Recipient",mapping:"myRecipient"},
{name:"Date",mapping:"myDate"}
]);
this.reader = new Ext.data.JsonReader({
root: 'ResultSet',
totalProperty: 'totalCount',
id: 'index'
},this.Mail);
this.ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'mailquery.php'
}),
reader:this.reader,
remoteSort:true
});
this.ds.setDefaultSort('Date', 'desc');
this.cm = new Ext.grid.ColumnModel([
{id:"mySubject",header:"Subject",width:400},
{id:"mySender",header:"Sender",width:100},
{id:"myRecipient",header:"Recipient",width:100},
{id:"myDate",header:"Date",width:100}
]);
this.grid = new Ext.grid.Grid('mailgrid',{ds:this.ds,cm:this.cm,selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),enableColLock:false});
// make the grid resizable, do before render for better performance
this.rz = new Ext.Resizable('mailgrid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's'
});
this.rz.on('resize', this.grid.autoSize, this.grid);

// render it
this.grid.render();
this.gridFoot = this.grid.getView().getFooterPanel(true);

// add a paging toolbar to the grid's footer
this.paging = new Ext.PagingToolbar(this.gridFoot, this.ds, {pageSize: 25});
this.ds.load({params:{page:1, pageSize:25,mailbox:this.mbox}});
},
onLoad: function() {
this.loaded = true;
}
}

jack.slocum
19 Feb 2007, 11:40 AM
Like Belgabor said, you want to lose the ScriptTagProxy unless you are set up for it an calling cross domain. Switch to HttpProxy and see what happens.

kjordan
19 Feb 2007, 11:47 AM
Like Belgabor said, you want to lose the ScriptTagProxy unless you are set up for it an calling cross domain. Switch to HttpProxy and see what happens.
Much better, now I have to figure out why my nested layout isn't working. I don't get any errors and the grid seems to be created in the generated html, but my nested layout doesn't show up in the center.

Removing the nested layout for now, my grid also doesn't seem to be getting populated and the page number is NaN of 13.

kjordan
19 Feb 2007, 12:11 PM
The eval'd responseText seems to be an object with objects underneath it with my values inside.

kjordan
19 Feb 2007, 12:38 PM
Got it sorted out for the most part, but I still get weird page numbering, like instead of page 1 of 16, I get page 1.05 of 16. Is there any reason page and pageSize aren't getting passed automatically anymore and we're forced to use start and limit as params?

Edit: Apparently the PagingToolbar is supposed to take care of that.

kjordan
19 Feb 2007, 12:48 PM
My script does not seem to get called on paging toolbar click.

Belgabor
19 Feb 2007, 1:16 PM
The GET/POST variables changed to be more mysql friendly.
"page" is now "start" and is the zero based first record to show (not the page anymore). "pageSize" is now "limit".

kjordan
19 Feb 2007, 1:17 PM
The GET/POST variables changed to be more mysql friendly.
"page" is now "start" and is the zero based first record to show (not the page anymore). "pageSize" is now "limit".
Yeah, on further study I saw that, but the fact still remains that on paging toolbar button click my script is not called again and I still have the weird decimal page number.

Edit: Got rid of the numbers, turned out I was starting at 1 (old page value started at 1), but it needs to start at 0.

Belgabor
19 Feb 2007, 1:23 PM
Read http://www.yui-ext.com/forum/viewtopic.php?p=12503#12503
I think that's your problem.

kjordan
19 Feb 2007, 1:25 PM
Read http://www.yui-ext.com/forum/viewtopic.php?p=12503#12503
I think that's your problem.
Yeah, it was and it solved my page numbers. However, my page still is not getting called on page next for the toolbar.

Belgabor
19 Feb 2007, 1:30 PM
What is your current this.ds.load line? Maybe there is still an error hidden there that leads to this erratic behaviour.

aconran
19 Feb 2007, 1:49 PM
kjordan: the error that says "invalid label" for your ScriptProxy will also be resolved if you put ()'s around your entire JSON literal.

IE if you change your resultset to:

({"ResultSet":[{"index":1,"Subject":" network key","Sender":"James Asher <[email protected]>","Recipient":"Kevin Jordan <[email protected]>","Date":"Tue, 30 May 2006 15:23:09 -0500"}],"totalCount":311})

kjordan
19 Feb 2007, 1:55 PM
kjordan: the error that says "invalid label" for your ScriptProxy will also be resolved if you put ()'s around your entire JSON literal.

IE if you change your resultset to:

({"ResultSet":[{"index":1,"Subject":" network key","Sender":"James Asher <[email protected]>","Recipient":"Kevin Jordan <[email protected]>","Date":"Tue, 30 May 2006 15:23:09 -0500"}],"totalCount":311})
Actually I switched to HttpProxy and that error disappeared. I solved my problem with my script not being called. Apparently start is now old start + pageSize.

Now I just have to fix whatever's causing my inner layout on my border layout not to show up.

aconran
19 Feb 2007, 2:21 PM
Cool, has anyone else noticed the behaviour that ScriptProxy requires ()'s around your JSON but HttpProxy does not?

Maybe this there is a difference with how the returned JSON is eval'd?