Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Vote Rating
    1
    adavis2 is on a distinguished road

      0  

    Default Paged Grid Using a directjngine Back-end

    Paged Grid Using a directjngine Back-end


    I am trying to implement a paged grid panel using a directjngine back-end. In the long term, what I'd like to do is create a buffered (infinite) grid, where paging is handled when you scroll through the grid, but getting it working with paging is the first step.

    Currently I'm able to display a grid panel with a paging toolbar and load the first page by subsetting the data to be returned. Unfortunately, I'm not sure how to pass back the total number of records (so the paging toolbar will show "Displaying 1 - X of Y" [where Y > X] and enable the next button). Directjngine allows you to use annotations to indicate which Java methods are callable from ExtDirect, like so:
    Code:
    @DirectMethod public List<Map<String, String>> getRuleTableRows(int ruleTableId, int start, int limit)
    So, with a page size of 200, this method returns a JSON response similar to this:
    Code:
    { "tid": 9, "action": "DataAccessHelper", "method": "getRuleTableRows", "result": [ { "tableId": "55212", "83": "MERZ", "rowNumber": "0", "85": "Y" }, ... snipped ... { "tableId": "55212", "83": "BUIC", "rowNumber": "199", "85": "Y" } ], "type": "rpc" }
    As far as I can see, I need to have something like this:
    Code:
    {
      "tid": 9,
      "action": "DataAccessHelper",
      "method": "getRuleTableRows",
      "result": [
        {
          "tableId": "55212",
          "83": "MERZ",
          "rowNumber": "0",
          "85": "Y"
        },
        ... snipped ...
        {
          "tableId": "55212",
          "83": "BUIC",
          "rowNumber": "199",
          "85": "Y"
        }
      ],
      "total": "565",
      "type": "rpc"
    }
    Where the "total": "565" line between the end of the result array and the "type": "rpc" field is new. But how can I configure (or extend) directjngine to pass back the total number of records in the data-set as a new JSON property outside of the result property?
    Last edited by adavis2; 25 Oct 2012 at 6:52 AM. Reason: Showed the desired output and rephrased the final question.

  2. #2
    Ext JS Premium Member
    Join Date
    May 2009
    Location
    Barcelona (Spain)
    Posts
    218
    Vote Rating
    19
    pagullo will become famous soon enough pagullo will become famous soon enough

      0  

    Default


    Quote Originally Posted by adavis2 View Post
    But how can I configure (or extend) directjngine to pass back the total number of records in the data-set?
    The best way to pass complex info back and forth is to define and then receive/return classes that hold the required data: if you want a 'total' value back, add to the class holding the data you return a 'total' field.

    Code:
    class MyClass {
      int total;
      String name;
      // ...
    }
    
    
    // ...
    MyClass myMethod( MyClass c ) {
      MyClass result = new MyClass(c);
      if( c.name.equals("My name" ) {
         result.total = 33;
      }
      return result;
    }
    Depending on what you are doing, you might need to ensure that you set paramAsHash value to true. Please, check that in the ExtJs doc.
    Pedro Agulló, Barcelona (Spain)
    Agile team building, consulting, training & development
    DirectJNgine: http://code.google.com/p/directjngine - Log4js-ext: http://www.softwarementors.com/projects/p/log4js-ext/

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Vote Rating
    1
    adavis2 is on a distinguished road

      0  

    Default


    I tried that. Instead of passing back a List<Map<String, String>> list object, I passed back a PartialResult<Map<String, String>> object, which looked like this:
    Code:
    public class PartialResult<T> {
    
        /** the partial result set */
        private List<T> result;
    
        /** the size of the complete result set */
        private int total;
    
        ... snipped getters, setters, and constructor ...
    }
    This produces JSON which looks like this:
    Code:
    {
      "tid": 9,
      "action": "DataAccessHelper",
      "method": "getRuleTableRows",
      "result": {
        "result": [
          {
            "tableId": "55212",
            "83": "MERZ",
            "rowNumber": "0",
            "85": "Y"
          },
          ... snipped ...
          {
            "tableId": "55212",
            "83": "BUIC",
            "rowNumber": "199",
            "85": "Y"
          }
        ],
        "total": "565"
      },
      "type": "rpc"
    }
    This does not display as desired in my gridPanel (it shows as one empty row). So I guess my revised question is how can I configure (or extend) directjngine to pass back the total number of records in the data-set as a new JSON property outside of the result property?

  4. #4
    Ext JS Premium Member
    Join Date
    May 2009
    Location
    Barcelona (Spain)
    Posts
    218
    Vote Rating
    19
    pagullo will become famous soon enough pagullo will become famous soon enough

      0  

    Default


    Hmm, at a glance, your class structure looks ok...have you set your store.proxy.reader.root config value to 'result' before store creation?

    DJN has always allowed me to implement all I needed, even much more complex dynamic structures. The problem tends to be in defining classes the way ExtJs wants them, and configuring ExtJs object the way it wants.

    In many cases DJN is pointed as the one with "the issue", when the real "issue" lies in the ExtJs side... kind of discouraging for me, as the author of DJN

    Regards,
    Pedro Agulló, Barcelona (Spain)
    Agile team building, consulting, training & development
    DirectJNgine: http://code.google.com/p/directjngine - Log4js-ext: http://www.softwarementors.com/projects/p/log4js-ext/

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Vote Rating
    1
    adavis2 is on a distinguished road

      0  

    Default


    pagullo,

    I do appreciate your help. In general DirectJngine is working great for me. I just can't get it to work with a paged (or infinite) grid. Or maybe I can't get (ExtJS) paged grids to work with DirectJngine. Anyway, I'm trying to come up with a smaller example that shows the problem -- something I can post here. But that will have to wait for Monday.

    Enjoy the weekend.

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    16
    Vote Rating
    1
    adavis2 is on a distinguished road

      0  

    Default Smaller example

    Smaller example


    Here is a smaller example that shows the problem I am having: extDjnSample-src-main.zip. I have a simple grid which can contain a large number of rows. I can get it to load all of the data, but I would like to load the data 20 rows at a time. I can get it to load the first page, but it doesn't show the correct total page or record counts (or allow me to change pages):

    extDjnSample-sm.jpg

    The toolbar should show "Page 1 of 13" and "Displaying 1 - 20 of 241". More importantly, it should enable the next and last page buttons. Here are some excerpts from the code. First, here's the model:
    Code:
    Ext.define('extJsTest.model.HtmlEntity', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'name', type: 'string'}, 
            {name: 'number', type: 'int'}, 
            {name: 'group', type: 'string'}, 
            {name: 'description', type: 'string'},
            {name: 'notes', type: 'string'}
        ],
        
        toString: function() {
            return this.get('name');
        }
    });
    The store:
    Code:
    Ext.define('extJsTest.store.HtmlEntities', {
        extend: 'Ext.data.DirectStore',
        model: 'extJsTest.model.HtmlEntity',
        alias : 'store.htmlEntities',
        requires: ['Ext.direct.*', 'extJsTest.model.HtmlEntity'],
    
        autoLoad: true,
        pageSize: 20,
        
        constructor : function(config) {
            config = config || {};
            config.proxy = {
                type: 'direct',
                // To load all use: directFn : DjnHelper.getAllHtmlEntities,
    //            directFn : DjnHelper.getAllHtmlEntities,
                directFn : DjnHelper.getHtmlEntities,
                reader: {
                    type: 'json',
                    root: 'result'
                },
                // To load all comment out paramOrder: 'start,limit',
                paramOrder: 'start,limit',
                paramsAsHash: false
            };
            this.callParent([config]);
        },
        
        toString: function() {
            return 'HtmlEntities: count = ' + this.getCount() + ', totalCount = ' 
                    + this.getTotalCount();
        }
    });
    The view:
    Code:
    Ext.define('extJsTest.view.MainView', {
        extend: 'Ext.grid.Panel',
        alias : 'widget.mainView',
        store: 'HtmlEntities',
        border: 0,
        flex: 1,
        columns: [
            {header: 'Description', dataIndex: 'description', flex: 2},
            {header: 'Entity Name', dataIndex: 'name', flex: 1},
            {header: 'Decimal', dataIndex: 'number', flex: 1},
            {header: 'Group', dataIndex: 'group', flex: 1},
            {header: 'Notes', dataIndex: 'notes', flex: 3}
        ]
    });
    The controller:
    Code:
    Ext.define('extJsTest.controller.MainController', {
        extend: 'Ext.app.Controller',
        views: ['MainView'],
        requires: [
            'extJsTest.model.HtmlEntity', 'extJsTest.store.HtmlEntities', 
            'extJsTest.view.MainView'
        ],
    
        init: function() {
            this.htmlEntities= null;
            Ext.log('Initialized MainController.');
        },
        
        initialDisplay: function() {
            Ext.log('MainController.initialDisplay');
            this.htmlEntities= Ext.create('store.htmlEntities');
            var view= Ext.create('widget.mainView', {
                store: this.htmlEntities,
                // To load all use dockedItems: []
    //            dockedItems: []
                dockedItems: [{
                    xtype: 'pagingtoolbar',
                    store: this.htmlEntities,
                    dock: 'bottom',
                    displayInfo: true
                }]
            });
            Ext.getCmp('mainPanel').add(view);
        }
    });
    I would appreciate it if someone could point out what I'm doing wrong.
    Attached Images

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi