ExtJS customized Viewport for Oracle APEX

One of the issues you may experience with ExtJS, is that it moves html DOM elements around when it renders the page.

For example if your using tab panels or the Viewport. This can result in your form elements ending up outside of the form.
You can solve this by using allowDomMove:false as discussed in this Apex Forum thread or solve the problem once and for all by using a customized version of the Ext.Viewport.

I like the second option better, so here is the solution.
 1. Replace references to Ext.Viewport with Ext.ux.FormViewport (see below) in your javascript.
 2. Add the following style to your css #wwvFlowForm {width:100%; height:100%;}

See also Building a complete Oracle Apex page template using ExtJS

 Enjoy Mark

/*
* Mark Lancaster Wednesday, 16 January 2008 12:00 PM
*

/**
* @class Ext.ux.FormViewport
* @extends Ext.Container
* A specialized container representing the viewable application area (the browser viewport).
* 

The Viewport renders itself to the wwvFlowForm element, and automatically sizes itself to the size of
* the browser viewport and manages window resizing. There may only be one Viewport created
* in a page. Inner layouts are available by virtue of the fact that all {@link Ext.Panel Panel}s
* added to the Viewport, either through its {@link #items}, or through the items, or the {@link #add}
* method of any of its child Panels may themselves have a layout.

* 

The Viewport does not provide scrolling, so child Panels within the Viewport should provide
* for scrolling if needed using the {@link #autoScroll} config.

* By default, when applyTo is not specified, the Viewport renders itself to the document body.
*/
Ext.ux.FormViewport = Ext.extend(Ext.Container, {
/**
* @cfg {Mixed} applyTo
* The id of the node, a DOM node or an existing Element that is already present in
* the document that specifies some panel-specific structural markup.By default, when applyTo is not
* specified, the Viewport renders itself to the document body.
*/
initComponent : function() {
   Ext.ux.FormViewport.superclass.initComponent.call(this);
   document.getElementsByTagName('html')[0].className += ' x-viewport';

   // applyTo specified element
   this.el = Ext.get('wwvFlowForm');
   if (!this.el) {
       this.el = Ext.getBody();
   } else {
       // disable scroll on body
       Ext.getBody().dom.scroll = 'no';
   }

   this.el.setHeight = Ext.emptyFn;
   this.el.setWidth = Ext.emptyFn;
   this.el.setSize = Ext.emptyFn;
   this.el.dom.scroll = 'no';
   this.allowDomMove = false;
   this.autoWidth = true;
   this.autoHeight = true;
   Ext.EventManager.onWindowResize(this.fireResize, this);
   this.renderTo = this.el;
},

fireResize : function(w, h){
   this.fireEvent('resize', this, w, h, w, h);
}
});
Ext.reg('FormViewport', Ext.ux.FormViewport);

Book Review: Learning Ext JS

I recently took the opportunity when approaced by Packt Publishing to review "Learning Ext JS" by Shea Frederick, Colin Ramsay, and Steve Blades.
The book is produced as an "eBook", delivered in a PDF format with the book examples available in a zip file.

For readers not familiar with Ext JS, it is a cross-browser JavaScript library for building rich internet applications. It features highly attractive customizable UI widgets supported by a well designed, documented and extensible Component model.

The book is written with the experienced developer in mind. It's all about getting productive as quickly as possible. We've all been there, thrown into an unfamiliar technology and expected to perform miracles overnight. In these situations you can find yourself floundering, looking for some starting guidence while you try to find your feet.

The book is focused very specifically on Ext JS, so if you've never dealt with HTML or javascript before, I'd suggest a second reference to cover that as well.
Having said that, if your just working with Ext JS for your presentation interface, the book is complete enough to get you up and running.

After an obligitory introduction chapter, and some foundation concepts, your quickly working with Ext widgets. Very soon your creating Ext JS forms, applying textfields, datefields, combos, toolbars and validations. The very popular Grid an Tree components are also well covered, with Layouts appearing surprising late in the book.

I enjoyed the flow of the book, which is written in an easy reading light hearted style. The examples clearly explained the concepts, and raised a few chuckles at the same time. Examples that included server-side code assume a PHP backend, a fairly typical implementation for Ext JS.

I work with Oracle Application Express and PL/SQL, never the less the examples were easy to follow if you focused on the format of the server output rather than the implementation language.

Overall, if your starting out with Ext JS, or struggling understanding the Ext JS examples and scattered forum posts, this book is a good reference.
Chapter 7: Layouts is available as a sample chapter.

APEX Global AJAX variables - gotta love them

I've just added a fully AJAX enabled editable tree on my demo site.
All modifications to the tree are transmitted to the database via an application process using AJAX.

Values are submitted using wwv_flow package variables:
  g_widget_name
  g_widget_mod
  g_widget_action
  g_widget_action_mod
  g_widget_num_return
  g_x01 .. g_x10

The application process simply calls a database package, which references the wwv_flow package variables and updates the data.
 
The key to AJAX functionality in Oracle Apex is based around these "Global input variables for AJAX utilities".

Using these variables, a little javascript to call a simple application process and then we handover to PL/SQL - back in every Oracle developers comfort zone.

This example has a fair bit going on, to see a simpler example check out:

• My demo using extJS
• Tyler Muths demo which uses jQuery
• Carl Backstroms demo using native Apex javascript.

Oracle Apex templates - not just for HTML

Have you ever considered using templates for generating something else besides HTML? You can use Apex templates to generate all sorts of things - XML, javascript and JSON to name a few. The tree panel shown gets all its data from a list template. See it in action, and the template details on my demo.

ExtJS Grid in Apex (with pagination)

Check out the ExtJS Grid with Pagination on my demo site

So how does it work?

This is brief, because it's after midnight.

• Use a Named Column (row template) for the Report to build the grid array data - see page source code for output.
• The query needs to return the data in a JSON escaped format, so use a "SQL Query (PL/SQL  function returning a SQL query)" with generic column names The function call looks like:

begin
return json_api.grid_query
  (p_region_id => 4367612871540792
  ,p_query =>'select * from geo_domains'
  );
end;

• The query returned limits the rows and JSON escapes the data, much the same way as Apex does internally (hint: dbms_sql). Also - I set pagination to none, as its handled by my code.
• Pressing next data set on the displayed page fires off a AJAX request (application process) which passes the region_id as well as start, limit and callback function values.
• This executes a database package to re-run the query and return a paginated rowset. You can see the returned data format using Firebug.
• The grid updates the data using builtin ExtJS functionality.

Next example will be an updatable grid - also near completion.

Nighty night - Mark

ExtJS Grids in Oracle Apex

Here is a read-only ExtJS grid in Oracle Apex. I'm experimenting with grids and it's coming together quite well - more detail in the future. Try drag-and-drop, and resizing column headings, then use pagination - very nice.

Using ExtJS Calendar and CSS issues

Mack McLendon emailed me with an issue he was having with the ExtJS calendar in Apex. He had successfully got the date functionality working, but as you can see from the screenshot he sent, the calendar is offset to the right. Mack wrote further, that disabling the standard Apex CSS and javascript fixed the problem, but at the expense of everything else on the page. Luckily I was able to answer this easily - having been through the same painful experience myself.  

The Solution
The issue is caused by the following ul margin rule in apex_3_1.css

ul { margin:0 0 0 15px; padding:0;}

The solution is simple - make sure you reference the ext stylesheet after the apex stylesheet (#HEAD# tag) in your page template.

Ext includes some "reset" styles to ensure uniform appearance between different browsers, including the following rule:
ul {margin:0;padding:0;}

Because the ext stylesheet comes after the apex stylesheet, the apex style will be overridden, and the calendar appear correctly. Related info:

• Building a complete Oracle Apex page template using ExtJS
• Implementing Ext Dates in Oracle Apex
• Dates demo
• CSS Frameworks + CSS Reset: Design From Scratch