JSONDataModel? - Ext JS

#2 02-19-2007, 12:57 PM

Take a look at the page grid example, it uses a JsonReader.

#3 02-19-2007, 01:00 PM

Quote:

Originally Posted by jacksloc

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)

hock:

#4 02-19-2007, 01:08 PM

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
});

#5 02-19-2007, 01:11 PM

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
});

#6 02-19-2007, 01:34 PM

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 <jasher@scalix.xteconline.com>","Recipient":"Kevin Jordan <kevin.jordan@xteconline.com>","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;
  }
}

#7 02-19-2007, 01:40 PM

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.

#8 02-19-2007, 01:47 PM

Quote:

Originally Posted by jacksloc

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.

#9 02-19-2007, 02:11 PM

The eval'd responseText seems to be an object with objects underneath it with my values inside.

#10 02-19-2007, 02: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.