Preview: Ext JS Layouts in APEX

One area that I’ve spent quite a bit of time on over the past few years when building APEX applications is the layout of regions on a page. It usually culminated in using either a combination of table/div based layouts with inline style in region attributes aided by additional Javascript to perform some majic resizing/animation abilities coupled with jQuery UI tabs and accordions. I’ll simply sum up the experience as extremely PAINFUL and awfully time consuming mainly thanks to IE and ongoing support for all the dodgy glue in between.

Now I know I’m not alone here, so ask yourself the question: Wouldn’t it be wonderful if we could have a customizable page layout that was responsive to window resizing, cleverly hide/shows content whilst packing in as much content as possible without making the page unreadable… oh and it’s simple to use? If that’s not enough how about we add the elimination of cross browser support issues and greatly reduce code maintenance requirements. Is there really such a Nirvana for APEX developers?

Well I think I may have just found it in the form of Ext JS layouts. I’ve recently been working on an Ext JS layout plugin for APEX that takes advantage of the new capabilities in APEX 4.0. The 4.0 feature that has made this plugin possible is the introduction of a parent child region hierarchy (which is still my most favourite feature in 4.0 along with plugins of course). The plugin supports the organisation of any APEX region into a structured and responsive page layout.

Here’s what Sencha states as a complex layout example

Here’s an example of the APEX layout plugin in action using only the border layout.

So looking at the above screenshot you’re probably thinking that the end result is really not much different from what you can achieve with the jQuery UI layout plugin, but this is Ext JS we’re talking about so the above was just a basic example. So to ramp up a little competition here’s a taste of what’s achievable with the APEX layout plugin when using a series of nested layouts in combination with the grid and tree plugin which I’ve previously built.

The above screenshot consists of:

  • Four Panels – North, South, West, and Center using a BORDER layout
  • Five editable grids with a combination of cell and row editing capability
  • Two searchable AJAX trees with a 50,000+ record hierarchical dataset
  • One interactive Report
  • One standard APEX form
  • Two Tab Panels, One nested within the First
  • Two Accordion regions
  • A combination of HBOX and VBOX layouts

Now how long would you expect to take to build such a page, given that your SQL queries are defined for the grids and trees? How does 30mins sound? and that’s probably a conservative estimate. I can promise you it took even less for the above example. It’s just purely amazing the productivity and end results you can get when combining both APEX & Ext JS.

The Ext Layouts supported by the plugin are:

  • BORDER – Any combination of NORTH,SOUTH,EAST,WEST,CENTER Panels
  • VBOX – vertical stacked regions
  • HBOX – horizontal stacked regions
  • ACCORDION – vertical expand/collapse behaviour showing 1 region at a time
  • TABPANEL – a set of tabs to hide show region content
  • FIT – automatically fills the container, for single regions

The most exciting thing about the above layouts is that they can be used in any combination, in any order, and nested X many levels deep, to generate the most organized and efficient way to present and interact with your APEX page regions and plugins. Forget endless page scrolling and disorganized content, maximize your end users viewing experience by using an IKEA like organizational approach to your pages. The layout plugin has the ability to generate the most complex layouts you could imagine, the only limitation is your browser and device’s performance. Ext JS 4.1 has some significant performance improvements coming which means that we will be able to push the boundaries even further.

But wait there’s still more… (says he… the dodgy car salesman)

The plugin includes state saving at either the session or application level to remember collapsed/expanded panels and sizing which is saved server side which ensures that the experience can be maintained across devices. Plus the tree and grid plugins which I’ve produced will automatically size correctly on page load, window, resizing, and panel collapse/expand and also benefit from lazy rendering so page load time is reduced. You can even define custom Ext config for every region to ensure you can tailor the display to your exact requirements, e.g. hiding headers, disabling/enabling scrollbars etc.

It won’t be long before the plugin will be available for download, and if your really keen to get your hands on a beta version before that date arrives just leave a message on my website contact form.

I’m excited about the possibilities Ext JS can bring to APEX. I’m hoping that with some help, we can make APEX the number one contender for Oracle Forms migration, thanks to Ext JS 4.x. One of the most advanced Javascript UI frameworks in the world.

More to follow soon…..


APEX 4.1 & jQuery Validation Plugin

Recently I’d started work on a new project in APEX 4.1 and a target browser of IE6. As part of the initial project setup I used the APEX Form Validation plugin provided by Guido Zeelen which is based on the jQuery validation plugin developed by Jörn Zaefferer from bassistance.de. Whilst I had no issue with the plugin in 4.0.x and IE6, I ran into a problem in APEX 4.1 which meant that on page submit all forms were passing as valid in IE6,7,8 even when they were invalid. However on Firefox, Chrome it was working perfectly… go figure!

There were a couple of red herrings that came up when I was looking for a solution, but in the end it was due to APEX running jQuery 1.6.2 and using v1.7 of the jQuery validation plugin which wasn’t a supported combination. The simple fix was to upgrade to v1.9.0 and I’m happy to say that it’s now working again on IE6,7,8…. well not entirely happy after losing a number of hours debugging, but hopefully you won’t if you run into the same problem :)