When we originally created our APEX Ext Grid templates (see our old post) we added in support for enabling Ext grouping but we didn’t define the group column (i.e. in Ext we set “enableNoGroups: true”), we allowed users to select the option from the column menu post render (see our old post on grid customization). The reason was due to us not having a configurable APEX field in the column definition. We could still use the APEX report breaking on columns 1,2,3 but this didn’t give us the effect we were looking for as we wanted the expand collapse functionality that Ext provides.

If we used it the break formatting settings to enable Ext grouping via our report JSON metadata object, which is built by querying the report definition to customize the grid settings, we’d have the problem of APEX blanking/nulling the column fields which would break our Ext grouping (essentially the blanks would be grouped into their own blank/null group). Here’s how the grid looks with APEX break formatting…

And here’s how it looks if we use the APEX break formatting to define our Ext grouping (we get a grouped company of “null”)…

In order to work around this issue and since we have started to introduce configuring functionality via the comments sections for custom dynamic validations using vtypes in the tabular form, we thought we’d do the same for enabling Ext grouping. So the basic concept is as follows…

1. We update our javascript to reference our report metadata object defined in our page header. e.g.

         /* Grouping Plugin check */
         if (pReportMetaData.plugins.indexOf("grouping") !== -1) {
            var summary = new Ext.grid.GroupSummary();
            var groupingView = new Ext.grid.GroupingView({
               autoScroll: true,
               forceFit: pReportMetaData.forceFit,
               showGroupName: true,
               enableNoGroups: true,
               hideGroupedColumn: pReportMetaData.hideGroupedColumn
            });
            gridPlugins.push(summary);
         }
         // create the data store
         pStore = new Ext.data.GroupingStore({
            id : 'store' + pRegionID,
            proxy: new Ext.data.HttpProxy({
               url : widgetURL
            }),
            remoteSort: true,
            groupField: pReportMetaData.groupField,
            sortInfo: sortInfo,
            .....
         });
         // create the Grid
         pGrid = new Ext.grid.GridPanel({
            id          : 'grid' + pRegionID,
            store       : pStore,
            columns     : pReportMetaData.columns,
            width       : pReportMetaData.width,
            autoHeight  : pReportMetaData.autoHeight,
            height      : pReportMetaData.height,
            title       : pReportMetaData.title,
            collapsible : pReportMetaData.collapsible,
            frame       : pReportMetaData.frame,
            loadMask    : pReportMetaData.loadMask,
            draggable   : pReportMetaData.draggable,
            iconCls     : pReportMetaData.iconCls,
            view        : groupingView,
            plugins     : gridPlugins.slice(),
            ......
        });
   

2. We update our report and defined which column we want to be grouped, at this stage only one column is supported. We simply add the following in the comments section e.g. $groupField:true$
3. We then update our PLSQL to add the extra fields to our report JSON metadata object, “hideGroupedColumn” and “groupField”. We query the report definition using the APEX data dictionary view “apex_application_page_rpt_cols” and set these two fields accordingly if the comments contain our grouping identifier e.g. $groupField:true$

The end result is a single flexible APEX report template which supports grouping, filtering, and row expanding (see our older posts for details on filtering and row expanding).

This means that we only have one javascript function to maintain and only one PLSQL procedure for unlimited amounts of grids in unlimited amounts of applications. By using a write once approach we get a big development productivity boost and can crank out APEX Ext enabled applications extremely fast with a skeleton development team and on a small budget! Two of the most important things in today’s unstable climate!