DWRProxy for ExtJs 4

If you are using ExtJs version 4.x for your RIA and DWR for easy to communicate between server-side and client-side (that means “easy ajax”, transform JavaScript object into Java object and vice-versa and so on) in that case you might have noticed that data package of ExtJs4 doesn’t support loading data from DWR method. I’we created Ext.ux.data.DwrProxy class that supports loading data into store from DWR method. Let’s look at sample code:


/**
 * Let's assume that we have already defined App.data.Store 
 * class with its Model class.
 */
var store = Ext.create('App.data.Store', {
    proxy: {
        type : 'dwr',
        /*DWR method that will return data.*/
        dwrFn : MyDWRClass.getRecords,

        /** Function that returns parameters for remote
         * DWR Method for each request.
         */
         getDwrArgs: function(operation, store) {
           var argObj = Ext.apply({}, operation.params);
           argObj.start = operation.start;
           argObj.limit = operation.limit;
           /**
            * If server side method takes several parameters
            * then array must be returned.
            */
           return argObj;
       },

       reader : {
           type: 'json',
           root: 'records',
           totalProperty: 'count'
       }
   }
}); 

The usage is very likely as DWRProxy classes for ExtJs 3.x and ExtJs 2.x but supports only loading data. I’m ready to implement create, update and destroy methods too if there will be any request for it (I only use DWRProxy just for loading data and paging).

I’ve implemented one additional config option – preprocessResponse that takes response data and fired before server response will be loaded into store. In very specific cases may be you need to do custom modifications to data before it will be load
ed by proxy.reader.

Please look at source of Ext.ux.data.DwrProxy and see more about what and how I’ve done and give me any feedback.

Wish you good luck with ExtJs4 and don’t forget to include DwrProxy.js. 🙂

UPDATE:
reader propery of proxy depends on response format and structure. In given case reader can read the following structured JSON object:

{
  /* because root = 'records' */
  records: [{},{},{},{}...],
  /* because totalProperty = 'count' */
  count: 100
}
Advertisements

ExtJs 4 Tree rootVisible false problem

I was building Ext.tree.Panel like this:


Ext.create('Ext.tree.Panel', {
    rootVisible : false,
    root   : {
        text    : 'Menu',
        children : [{
            text : 'Item 1',
            children : [{
                 text : 'Item 1.1',
                 leaf  : true
            },{
                 text : 'Item 1.2',
                 leaf  : true
            }]
        }, {
            text : 'Item 2',
            children : [{
                 text : 'Item 2.1',
                 leaf  : true
            }]
        }]
    }
});

And while instantiating I got this error: “Cannot read property ‘elements’ of undefined”. I searched this error w/o any luck. Then after looking demos and thinking a little bit I got the solution: root item must have expanded : true. So code must look like this:


Ext.create('Ext.tree.Panel', {
    rootVisible : false,
    root   : {
        text    : 'Menu',
        expanded : true,
        children : [{
            text : 'Item 1',
            children : [{
                 text : 'Item 1.1',
                 leaf  : true
            },{
                 text : 'Item 1.2',
                 leaf  : true
            }]
        }, {
            text : 'Item 2',
            children : [{
                 text : 'Item 2.1',
                 leaf  : true
            }]
        }]
    }
});

I hope this post will save your minimum 15 minutes 🙂