Apr 28

Just a quick post on a benefit of using APEX and Ext JS. Enabling multiple grid dependencies is achieved really quite simply, all we need to do is update the session state page/application items which the underlying report/grid queries rely on as they’re defined as bind conditions within the WHERE clause e.g. “WHERE server_id = : P10_SERVER_ID”. Once session state is updated we then call the reload method for the dependent Grid store(s). The code to achieve this is really quite simple and only requires coding a few lines ( assuming you already have a handler function for APEX AJAX calls and updating session state for multiple items, if you don’t then you can use the one at the bottom of this post ).

Note: this code has been extracted from our integration design so you would implement it slightly differently. The aim is just to give you an idea of what’s involved:

{
   "rowSelectFunction": function (rowIndex, record) {
      Ext.app.apexHttpPost('Do Nothing', ['P#PAGE_ID#_CLUSTER_ID', 'P#PAGE_ID#_SERVER_ID'], [Ext.util.Format.stripTags(record.get('CLUSTER_ID_DISPLAY')), '']);
      Ext.getCmp('grid#REGION_ID_REPLACE_1#').getStore().reload();
      Ext.getCmp('grid#REGION_ID_REPLACE_2#').getStore().reload();
   },
   "rowDeSelectFunction": function (rowIndex, record) {
      Ext.app.apexHttpPost('Do Nothing', ['P#PAGE_ID#_CLUSTER_ID', 'P#PAGE_ID#_SERVER_ID'], ['', '']);
      Ext.getCmp('grid#REGION_ID_REPLACE_1#').getStore().reload();
      Ext.getCmp('grid#REGION_ID_REPLACE_2#').getStore().reload();
   }
}
.....
selModel = new Ext.grid.RowSelectionModel({
   singleSelect: true
});
selModel.on("rowselect", function (selectionModel, rowIndex, record) {
   selFunc.call(selectionModel, rowIndex, record);
});

The result is we can refresh two dependent grids via AJAX on a row selection event within a 3rd grid ( or we could have as many dependencies as we want :) )e.g.

Here’s the basic apexHttpPost function if you don’t have a similar function already…. mind you I usually prefer using something more robust like the design of jApex from Tyler Muth, but this still does the job.

// Used for setting item session state for 1 or more items
Ext.app.apexHttpPost = function (pAppProcess,pItems,pItemValues)
{
  var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS='+pAppProcess,$v('pFlowStepId'));
  if (typeof(pItems) == 'object') {
    for ( var i=0, len=pItems.length; i<len; ++i ){
      try {
        get.add(pItems[i],pItemValues[i]);
      } catch(e) {
      }
    }
  } else {
    if (pItems) {
      try {
        get.add(pItems,pItemValues);
      } catch(e) {
      }
    }
  }
  gReturn = get.get();
  get = null;
  return gReturn;
}

For the non EXT users, you could still provide the same design/facility for report drill downs by using $a_report instead of the store reload call.

Leave a Reply

preload preload preload