Preview 2: Ext JS Layouts in APEX

I thought I would follow up a previous blog post on the Ext JS layout plugin I’m building for APEX, it’s 95% complete and the results are making me go WOW and I thought I would share the “high” that I’m currently feeling.

Amid the task of documenting the plugins (the above screenshot) I started to tweak and enhance certain parts of the code to add in more flexibility. On a side note, I’m think I’m my own worst enemy at times because I find it so hard to resist improving things which I’ve read is a typical developer trait. The benefit in this case though is that I’ve coded in the ability for multiple layouts to be defined on a single page which don’t consume the full browser window. What this means is that a border layout can be defined within an existing APEX region and sized accordingly, either to fill the width of the region or using a fixed setting defined within the plugin settings.

Here’s an example of what an Ext border layout looks like which generally is used to fill the browser window.

and here’s a screenshot of an APEX page with 2 border layouts defined in 2 APEX regions with a bunch of editable grids and trees defined in a nested layout structure. I have to say that testing has been made extremely easy by being able to copy regions and their sub regions in a few mouse clicks. A big thanks to the APEX dev team on that 4.0 enhancement.

Now the above is a pretty dense example and has been built to highlight the flexibility of the plugin and does not necessarily mean you’ll build applications this way. The benefits of adding in a layout that can be controlled in size means that it can be easier to add the layout plugin into existing APEX applications and also embed within actual websites. The layout can either be a border (as per the above screenshot), tab, accordion, column, stacked, or single stretched region. Here’s an example from the Dow Jones Indexes to give you an idea…

I’m pretty excited about what we can do with APEX and Ext JS. What’s currently missing is Ext JS charts, forms, menu’s, and an Ext Super LOV (Dan you’ve inspired me) but those are coming very soon :) and here’s a screenshot of the tree grid that’s almost ready…

Once the above plugins are completed the next step is to build some amazing APEX applications to showcase APEX as a heavyweight contender in the UI development arena, and if you ask me it’s already got the serverside belt.