Random Insights into Oracle: Integrating Ext javascript library into Oracle Application Express

Tuesday, February 5, 2008

Integrating Ext javascript library into Oracle Application Express

So hopefully by now you’ve been to the website http://extjs.com and had a look at samples http://extjs.com/deploy/dev/examples and are ready to get your hands dirty.

The first step is to download the latest version from http://extjs.com/download and load it onto your http server 
(version 2.0.1 at the time of writing).
For Oracle Apex this can be either:
- Embedded PL/SQL gateway
- Oracle HTTP Server and mod_plsql.

For this article I have loading the complete set of unzipped files to a new folder in the 
apex/images/themes directory:
- http server - ORACLE_BASE/ORACLE_HOME/Apache/Apache/images/themes/ext-2.0.1/
- embedded PL/SQL gateway - /i/themes/ext-2.0.1/

Note: FTP access when using the embedded PL/SQL gateway is enabled as follows:

Open SQL*Plus and connect as SYSTEM


SQL> exec dbms_xdb.setftpport('21');

PL/SQL procedure successfully completed.

SQL> alter system register;

System altered.  


If you have any issues do an internet search for "dbms_xdb.setftpport", there are numerous posts on the topic.

Once the files are uploaded you can verify using the following urls:
http://hostname:port/i/themes/ext-2.0.1/docs/index.html
http://hostname:port/i/themes/ext-2.0.1/examples/index.html

 
Using Ext with Oracle Apex
The first step to using Ext with Oracle Apex is to reference the javascript libraries and CSS stylesheets in
your page templates.

Start Apex Builder and navigate to a page template:

Home> Application Builder> Application 101> Shared Components> Templates> Edit Page Template

A minimal header definition would look like this:

<html lang="&BROWSER_LANGUAGE.">
<head>
  <title>#TITLE#</title>

  #HEAD#
  <!-- standard stylesheets -->
  <link rel="stylesheet" type="text/css" href="/i/themes/ext-2.0.1/resources/css/ext-all.css" />
</head>
<body #ONLOAD#>
  <!-- Ext scripts -->
  <script type="text/javascript" src="/i/themes/ext-2.0.1/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="/i/themes/ext-2.0.1/ext-all.js"></script>

  <!-- application configuration -->
  <!-- add your custom scripts references here -->
  
  #FORM_OPEN#


This gives us access to the entire Ext library functionality. 
Depending on how much Ext functionality your web-site eventually uses you may want to consider only 
including a subset of the library. I’ll write more on this in a later article.

If your using a standard theme that comes with Oracle Apex, you will probably want to keep existing 
javascripts and CSS stylesheets in your definition initially.
 
Let’s build something
The first example I want to demonstrate is resizable text areas.
A demo is available at http://apex.oracle.com/pls/otn/f?p=200801:2001:0


 

Add the following code into your page template, or directly into a page containing one or more text areas.


<script type="text/javascript">
// convert html textareas into resizable textareas
function makeResizable(){
  var els=Ext.select("textarea",true);
  els.each(function(el){
    var dwrapped = new Ext.Resizable(el, {
        wrap:true,
        pinned:true,
        //handles:'s',
        width:el.getWidth(),
        height:el.getHeight(),
        minWidth:el.getWidth(),
        minHeight: el.getHeight()
    });
  })
}
    
Ext.onReady(function() {
  makeResizable();
});
</script>


What this script does search the html document object model (dom) for html textarea elements. 
Html textarea elements are converted to an Ext resizable component, with grab handles pinned (visible). 
The minimum height and width are constrained to the original dimensions.

Uncomment the //handles:'s' line to vertically resize only.

You can read more about the api on your website if you used my instructions at 
http://hostname:port/i/themes/ext-2.0.1/docs/output/Ext.Resizable.html,
or on the Ext website at http://extjs.com/deploy/dev/docs/index.html.

14 comments:

s1m0n said...: Looks good. I will try to install this extention and play around with. looking further to your posts!
btw, is it so that if you put the script for textarea in Page 0, all textarea's in the application will be resizable?
and can it handle multiple textarea's on 1 screen?

Simon; February 6, 2008 at 5:09 AM
Anonymous said...: Hi,
Excellent posting, I saw you're using apex.oracle.com and my question is how to integrate this on apex.oracle.com. I will really appreciate your feedback.

Thanks,
Kavin; February 6, 2008 at 9:11 AM
Mark Lancaster said...: Hi Simon

Yes, if the script is on page 0, all textareas in the app will be resizable.

But better still, have it a javascript library, linked to the page template. This means its still available to the entire app, with the added benefit that your web-browser will cache the javascript and reducing the size of each page request.; February 6, 2008 at 9:13 AM
Mark Lancaster said...: Hi kavin

To integrate it on apex.oracle.com I linked directly to the files on the Ext website.

I would have preferred to load the files locally onto the oracle web-server, but didn't think this would be possible.

The main advantage of server files over file downloads relates to browser caching and gzip compression.

I'll write more on this in the next few days.

I have a XE installation on my laptop, with the files stored locally. This is definitely easier to work with, as you control the web-server.; February 6, 2008 at 9:21 AM
Anonymous said...: Thanks Mark, this is exactly I was thinking to use this. I will wait for your next post.

regards,
K; February 6, 2008 at 9:24 AM
Anonymous said...: Hi Mark, I'm new to APEX...I've tryed to integrate extJS...my problem is that I cannot load the "graphical" part...Is necessary that I load images with a script like in APEX install ?
thanks in advace
Dario; June 25, 2008 at 8:20 PM
Mark Lancaster said...: Hi Dario

The Apex install script is simply loading the images up using XDB functionality.

It's much easier to do the same thing using FTP, or if you don't have the necessary privileges, getting your friendly DBA to do it for you.

My article briefly covers this at the beginning. If this isn't making sense, you have some reading to do.; June 26, 2008 at 10:22 AM
Anonymous said...: Hi Mark,

thanks so much...you are in right...excuse me for my 'silly' question

have a nice day
bye
Dario; July 1, 2008 at 11:38 PM
Anonymous said...: Well written article.; November 11, 2008 at 9:44 AM
Anonymous said...: Hi Mark,

I looked at your website and found that you are using apex.oracle.com. Can you please guide me how can I integrate ExtJS library onto apex.oracle.com.

Your help would be appreciated.

Thanks,
Bhavin; March 17, 2009 at 10:51 PM
Tobias Arnhold said...: Hi Mark,

first of all. I must say I like the way you show your examples about ExtJS a lot. You made really good examples so keep on working like that. ;D

Now to my question:
Is there a way to integrate ExtJS into an APEX packaged App? So that I could integrate ExtJS in an APEX app install procedure?

Regards,

Tobias; April 30, 2009 at 7:41 PM
Unknown said...: hi,
nice post
i am new to oracle, i have been working on ext with mysql ,i want to know how to integrate oracle apex with ext.how do i start with?; August 27, 2010 at 12:04 AM
Pavan Kumar said...: Hi, thanks a lot for your example, can you show how to create simple form with name and address and update the same with database hit on button click using DML statement or store procedure.; July 19, 2012 at 3:25 PM
Zinavo-Web Design | Web Development | SEO | Mobile Apps | ERP/CRM said...: Really its very useful information that you have shared and looks great post.Thanks for sharing the information with us Web Development Company in Bangalore | Website Designing Companies in Bangalore | Web Design Services in Bangalore | Web Designing Companies in Bangalore; September 2, 2019 at 7:44 PM