Following on from our previous post about opening report links (i.e. column links) in an Ext window, we wanted to make it more flexible and allow us to set the window width,height,maximizable,maximized properties of the window on a per link basis. Since we only specified a class setting of “ext-window” we needed some additional way to add in the additional config into the actual anchor field.
To recap we create a standard report using the APEX IDE builtin wizard and simply change the region & report template to our Ext custom templates which we have created. We then run a number of transform functions post load of the grid contents using an onload event. This onload event serves multiple purposes, we transform any tabular form elements, anchor links, enable highlighting etc. based on class settings or element types which act as switches to turn on functionality. Thus we get to reuse the same javascript function for all our grids/tabular forms across all applications and workspaces.
The simplest solution was to use an existing anchor attribute to define our cusom settings, and “rel” seemed like the best candidate as I’d seen this in use with widgets such as lightbox. So all we needed to do was define the rel link with a structured syntax which we could easily interrogate/extract using javascript: rel=”width:height:Maxmized:Maximizable” we then simply use the following js function to extract the config
var config = el.dom.rel.split(':');
We then simply pass the config to our row action function
Ext.app.anchorTransformById = function (pGridId, pRegionId) {
Ext.get(pGridId).select("a[class*=ext-window]").on('click', function (e) {
e.stopEvent();
var el = Ext.get(e.getTarget('a'));
var widthHeight = (el.dom.rel) ? el.dom.rel.split(':') : ["400", "400", false, false];
try {
var isMaximized = (widthHeight[2] == "true") ? true : false;
} catch(e) {
var isMaximized = false;
}
try {
var isMaximizable = (widthHeight[3] == "true") ? true : false;
} catch(e) {
var isMaximized = false;
}
Ext.app.gridRowAction(pRegionId, "Window", el.dom.href, pGridId, '', '', parseInt(widthHeight[0]), parseInt(widthHeight[1]), isMaximized, isMaximizable);
});
}
The end result is simply a more flexible solution which gives us control over window settings on a case by case basis!
