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

Oracle Apex: Boost performance with a CDN

Ext has recently partnered with CacheFly, a global content network, to provide free CDN hosting for the Ext JS framework. See more details on the announcement.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.
The server selected for delivering content to a specific user is typically based on a measure of network proximity.

For example, the server with the fewest network hops or the server with the quickest response time is chosen. i.e. using a CDN to deliver static content, such as Ext javascript, css and images will result in your pages downloading significantly faster.

I've modified my demo site on apex.oracle.com to see the performance difference. Previously I was pulling the Ext content from extjs.com - using the CDN gave a significant performance boost, making the demo site load much faster and give it a much snappier feel.

To implement was a snap, just referencing the Ext content in my Oracle Apex page templates from the CacheFly site:

 <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2/ext-all.js"> </script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css">

And if that isn't sweet enough, using the Ext’s Build It! tool will automatically install your custom version of the Ext library on the CacheFly website.

So after implementing, I wanted to see how much better my YSlow score was now I was using a CDN. Bugger - no difference - it wasn't detecting the CDN, so a quick check on why, and how to fix. Something to think about...

Multiple Interactive Report Regions in one page?

Here's how to get multiple IRR's in one page. Cheat - just use iframes. See this example, which includes an iframed IRR in a popup ExtJS window.

Oracle Apex IRR in ExtJS Popup Window

Dimitri Gielis emailed recently asking if I'd embedded an Ineractive Report Region (IRR) in a ExtJS popup window.

Well no I hadn't - but it turned out to be straight forward in the end, as you can see in this demo.

He raised an interesting point that when he tried the IRR javascript failed (filtering, sorting etc).

I believe Dimitri had been referencing the apexir_WORKSHEET_REGION div when embedding the IRR in a window, whereas I added an extra div tag around the IRR and used that instead.  

Such a small difference, such a big impact. The next screenshot shows some of the ExtJS windows html with my extra div tag wrapping the IRR.


Here is the html when referencing the apexir_WORKSHEET_REGION div.


So what's happened?

The apexir_rollover div (containing the filters etc) is no longer just below the apexir_WORKSHEET_REGION div. The relative positioning of these divs makes a difference.

Applying ExtJS functionality to existing html often results in html tags being moved around. Something to remember when you get unexpected behaviours.

Oracle Apex Spellchecker not working for you?

If your a "textareas with spellchecker" look like this when you do a spellcheck, the solution is easily explained.

One of the parameters being passed is the language parameter, found in Shared Components > Edit Globalization Attributes.
In my case I have the language set to en-au (English - Australian). This is nice if you want your date-pickers to start the week on Mondays, but not so good for the spell-checker.

So how do we fix this?
It's just a case of populating the WWV_FLOW_DICTIONARY$ table for your language.
So for me the following script does it:
insert into wwv_flow_dictionary$ (language, owner, security_group_id, words, words_capitalized, words_soundex) select 'en-au', s.owner, s.security_group_id, s.words, s.words_capitalized, s.words_soundex from WWV_FLOW_DICTIONARY$ s where s.language = 'en-us'; commit;

Now if I was really being thorough, I'd go through all the words and fix the American spelling of words.
But after all, I am a developer and we're generally not known for our spelling :)