`
eimhee
  • 浏览: 2105972 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JSONDataModel? - Ext JS

阅读更多
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?
Reply With Quote
  #2  
Old 02-19-2007, 12:57 PM
Default

Take a look at the page grid example, it uses a JsonReader.
Reply With Quote
  #3  
Old 02-19-2007, 01:00 PM
Default

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:
Reply With Quote
  #4  
Old 02-19-2007, 01:08 PM
Default

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
});
Reply With Quote
  #5  
Old 02-19-2007, 01:11 PM
Default

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
});
Reply With Quote
  #6  
Old 02-19-2007, 01:34 PM
Default

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;
  }
}
Reply With Quote
  #7  
Old 02-19-2007, 01:40 PM
Default

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.
Reply With Quote
  #8  
Old 02-19-2007, 01:47 PM
Default

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.
Reply With Quote
  #9  
Old 02-19-2007, 02:11 PM
Default

The eval'd responseText seems to be an object with objects underneath it with my values inside.
Reply With Quote
  #10  
Old 02-19-2007, 02:38 PM
Default

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.
Reply With Quote
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics