1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    125
    Vote Rating
    0
    kjordan is on a distinguished road

      0  

    Default


    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?

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    125
    Vote Rating
    0
    kjordan is on a distinguished road

      0  

    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:

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    140
    Vote Rating
    0
    Belgabor is on a distinguished road

      0  

    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:
    Code:
    this.store = new Ext.data.Store({
    	proxy: new Ext.data.HttpProxy({
    		url:'get-grid.php'
    	}),
    	reader: this.reader,
    	remoteSort: true
    });

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    Yeah the data api has changed quite a bit. There are shortcuts though (not being used there). This code:
    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:

    Code:
    // 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:

    Code:
    // 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. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    125
    Vote Rating
    0
    kjordan is on a distinguished road

      0  

    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:
    Code:
    {"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:
    Code:
    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. #7
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    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.

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    125
    Vote Rating
    0
    kjordan is on a distinguished road

      0  

    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.

  9. #9
    Sencha User
    Join Date
    Mar 2007
    Posts
    125
    Vote Rating
    0
    kjordan is on a distinguished road

      0  

    Default


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

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Posts
    125
    Vote Rating
    0
    kjordan is on a distinguished road

      0  

    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.

Similar Threads

  1. Getting cell value using onCellUpdated and the JSONDataModel
    By dmayer in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 23 Aug 2007, 1:46 AM
  2. JSONDataModel
    By gizzmo in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 27 Jan 2007, 7:19 AM
  3. two questions about JSONDataModel and pagingGrid
    By luke83 in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 27 Nov 2006, 7:44 AM
  4. JSONDataModel, Understanding schema
    By irishdunn in forum Ext 1.x: Help & Discussion
    Replies: 16
    Last Post: 3 Nov 2006, 2:39 PM
  5. JSONDataModel help
    By khanh3m in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 25 Oct 2006, 4:27 PM

Thread Participants: 3