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 Plugin – Ext JS 4.0 Editable Grid

Update: this plugin is only available from FOEX and not through me personally.

Over the past couple of months between assignments I’ve been working on a commercial Ext JS 4.0 Editable grid plugin. The sole purpose of the plugin is to provide an AJAX centric robust replacement for Tabular forms. With this plugin you will be able to create spreadsheet like data grids in a matter of mere minutes using the exact same wizards and fields you are already familiar with in the APEX IDE builder.

The plugin will support the following functionality:

  • Read Only, Cell, or Row Editing Capability
  • Date, LOV, AJAX LOV, Spinner, and Text form fields
  • Client Side Validation support using Ext JS vtypes e.g. date format, email address, phone numbers etc.
  • Column locking/freezing capability
  • Column Header Groups
  • Data Grouping and Summary features
  • Filtering support based on column data types, e.g. date filtering is performed by a date picker selection
  • Customization of column width/sorting/alignment/headers
  • Supports column link definitions and highlight words
  • Additional custom config can be added at the grid and down to the column level, e.g. allows the developer to set custom renderers etc.
  • Export to CSV Support
  • MD5 support to detect data collisions, i.e. concurrent users updating the same data/row
  • Computed columns are supported
  • Conditions and Authorisations are supported down to the column level
  • Unlike Interactive Reports, multiple editable grids are supported on the same APEX page, Yay!

The plugin is packed with functionality whilst being simple and easy to use. The plugin simply takes an existing APEX classic report definition and transforms it into an Ext JS grid. The above list of features are controlled by either the plugin settings or within the actual classic report definition. This means that there are no additional steps to export pages/components/applications across APEX environments, and managing the plugin is performed the same way in which you manage tabular forms.

Here’s a YouTube video which shows you how simple and easy it is to use the plugin.

Here’s where you can demo the plugin in action. So if this is something you think will benefit your business/application please contact me via the contact form on my website to order an evaluation trial of the plugin.

Here’s what one happy customer has to say:

The editable grid is extremely easy to use and has saved a significant amount development time and $$$. It does not require any advanced knowledge of APEX, Ext JS, or coding of JavaScript. The plug-in has satisfied a critical business need within our flagship application which the APEX product was not able to provide out of the box. It is a must have tool within any APEX developers tool chest“. Raja Pabba (Founder & CEO, Claritia, Inc)

Pages ... 1 2