A bit of housekeeping first, apologies! We have disabled the comments on most of (if not all) of our posts due to the large amounts of spam we were receiving, however I have had a change of heart as I saw an interview last night on a news channel that was talking about blog sites that do this don’t allow the community to criticise or point out mistakes and I had to agree (especially since some comments on posts I’ve read have more weight than the blog post itself), so as of today I’m re-enabling them and welcome any feedback… just not the spam!!

The official post: The great thing about good frameworks is how easy it is to reuse code across your application and how little code you need to write, Ext is basically the gold standard in my opinion and with Ext 3.0 now officially out it has even more great functionality we can’t wait to get our hands dirty with, but for now we’re continuing with 2.2.1 and will deliver our integration kit at this version level.

Today’s post is focused on using the “Form on a Table with Report” components and modifying the report column links to open the anchor href in a new Ext modal window with maximization capability. It is a very simple and straight forward approach which reuses the form page created by the wizard simply by opening it within an iframe in the Ext window (we use a “No Tabs” style page template). The juicy bit is that when we close the form after an update we reload the report/grid which issued the window open call (well it’s actually the Ext Store that performs the reload). This gives us the flexibility of having multiple grids on a page with edit (popup) ability but when we change data and close the window we only perform a “partial page refresh” of the report/grid caller. Thus reducing demand on the server as we are not navigating away from our report page and simply just grabbing a JSON data object for the report/grid reload.

The basic framework is as follows…..

• We create our Ext Window javascript function

  Ext.app.apExtWindow = function (pId, pTitle, pHref, pGrid, pWidth, pHeight) {
     var apExtWindow = new Ext.Window({
        id: 'window-' || pId,
        renderTo: Ext.getBody(),
        title: pTitle,
        modal: true,
        layout: 'anchor',
        width: pWidth,
        height: pHeight,
        maximizable: true,
        autoScroll: true,
        closeAction: 'close',
        plain: true,
        html: '<iframe id="iframe-' + pId + '"src="' + pHref + '" style="overflow:auto;width:100%;height:100%;" frameborder="0"></iframe>',
        listeners: {
           destroy: function () {
              if (pGrid) {
                 Ext.getCmp(pGrid).getStore().reload();
              }
           }
        }
     });
     apExtWindow.show();
  }
  

• We define our Ext transform function for the anchor link, which traverses the DOM focusing on our report region (the Ext.get part) and looks for any anchor links within which match our criteria.

  Ext.app.anchorTransformById = function (pGridId, pRegionId) {
  /* Buggy code, always opened the window with the last anchor href in the grid
     Ext.get(pGridId).select("a[class*=ext-window]").each(function (el) {
        if (el.dom.className.indexOf("aext-anchor") == -1) {
           el.dom.className += " " + "aext-anchor";
           el.on('click', function (e) {
              e.stopEvent();
              Ext.app.gridRowAction(pRegionId, "Window", el.dom.href, pGridId, '', '', 400, 600);
           });
        }
     });
  */
     Ext.get(pGridId).select("a[class*=ext-window]").on('click', function (e) {
        e.stopEvent();
        var el = Ext.get(e.getTarget('a')) Ext.app.gridRowAction(pRegionId, "Window", el.dom.href, pGridId, '', '', 400, 600);
     });
  }
  Ext.app.gridRowAction = function (pId, pTitle, pHref, pGrid, pUpdateItem, pUpdateItemWith, pWidth, pHeight) {
  	if (pUpdateItem) { Ext.app.apexHttpPost('Do Nothing',pUpdateItem,pUpdateItemWith); }
  	Ext.app.apExtWindow(pId, pTitle, pHref, pGrid, pWidth, pHeight);
  }
  

• We update our Ext grid javascript to perform the transform after each time the store loads

  pStore.on({
     load: function () {
        Ext.app.anchorTransformById('grid' + pRegionID, pRegionID);
     },
     columnmove: function () {
        Ext.app.anchorTransformById('grid' + pRegionID, pRegionID);
     }
  });
  

• We update our column and add the class setting to the link attributes
  

In summary, this is a write once approach. This functionality is available application wide to any link in any report which has our Ext grid template enabled. To enable the functionality we simply add the class attribute to the column link and to disable we simply remove the class setting, simple. The end result looks like this……