Paged Grid Using a directjngine Back-end

[adavis2]

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:

@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:

{
  "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:

{
  "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?

[pagullo]

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.

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.

[adavis2]

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:

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:

{
  "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?

[pagullo]

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,

[adavis2]

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.

[adavis2]

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:

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:

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:

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:

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.

[adavis2]

I have resolved the problem I was having. Here is a working example that shows the same data loaded 4 different ways. The application has 4 tabs, each tab containing a simple grid which can contain a large number of rows. The first 2 tabs show tables with all of the 241 rows loaded at once. The 3rd tab shows the data broken into pages of 20 rows each. The 4th tab shows the same data loaded into an "infinite" (buffered) grid.

The 'paged' tab of this example is almost the same as my previous simple example. The 3 differences between them are:

1. Data is now returned in a PartialResult object, which adds the "total" property to the JSON result.
2. I upgraded ExtJS from 4.1.0 to 4.1.1.
3. I upgraded DirectJngine from 2.1 to 2.2.

Since I had tried the PartialResult technique before, I believe the ExtJS upgrade made the difference. Anyway, I'm uploading this new example in case it's helpful to others.
extDjnSample-src-main.zip