Friday, September 18, 2009

Apex Modal Windows are a snap using ExtJS



A number of people have been posting about modal windows on the Oracle Apex forum of late.

Some of the solutions provided have used jQuery UI, or using window.showModalDialog.

I’m not a fan of window.showModalDialog as a quick Google search shows it is not supported by all browsers.
The jQuery UI version is functional, but the visual appearance doesn’t live up to the ExtJS standards in my opinion.

Anyway have a look at the Modal Popup Window example and see what you think.
To call the popup window I simply add the highlighted onClick text to my edit link as shown below.



You’d have to agree it doesn’t get much simpler than that.

19 comments:

Roel said...

Looks pretty slick Marc!
And easy to implement as well.
Concerning the jQUI looks: These are 100% stylesheet configurable. So also available in 'windows like light blue' ;-)

Anonymous said...

Hi there!
Well i'm trying o create a modal window but i can't. i integrated the js and css files and modified the link attributes but it does not work, do i miss something? do i need modify my one level tab emplate? tx in advance!

Marciano said...

Great site .. with even greater stuff. but my question is : i have installed apex 3.2 and would like to use extjs but how do i install this ? seems not same as your manual.

thnx
Marciano

Jack said...

hi

nice thing this modal popup in your demo

i try to use it in my app in an interactive report

i just copied the url in the link attributes field

when i click on the link no popup window opens but it branches to the page

i tried it with extjs 2.0.2 and 2.3.0

can it be that something in my page template is missing

Mark Lancaster said...

Hi Jack

Did you read the notes section and copy the popup-window.js file?

Mark

Jack said...

sorry my mistake
yeah...I should read properly
i forgot to include the javascript
thanks for the fast response
marvelous

Anonymous said...

Can you tell where we need to copy popup_window.js?

Mark Lancaster said...

Hi Anonymous

The file itself needs to be on your webserver or included as a workspace file.

You need to include a reference to popup_window.js in your page with an appropriate path.
This can be done in the page template, or directly in the page header.

If you don't understand how to do this - I'd suggest reading the APEX manual.

Mark

Anonymous said...

Hi Mark

Thanks for ur prompt reply.
The file was place in webserver(by running the config file)
and that was refered in page header like


type="text/javascript" src="/i/themes/ext-3.2.1/popup_window.js"

with in script tags

and pasted the code
onClick="new Ext.ux.PopupWindow({url: this.href, height: 450}).show(); return false;"
in Link Attributes

please let me know if any thing else to done

With
Thanks
Srinivas Somisetti

Mark Lancaster said...

Hi Srinivas

No that's it, apart from including the Ext javascript files and CSS file in your page template.

Mark

L said...

Mark,
It is a very beautiful example of ExtJs Modal window!

I tried to implement it, but it did not work!? It seems like I followed all the steps that you outlined in your example, but I have no results at all.
The page is acting like no code exists in Link attributes and page header...

These errors I get in IE:
Message: 'parent.Ext.WindowMgr' is null or not an object
Line: 12
Char: 1
Code: 0
URI: http://apex.oracle.com/pls/apex/f?p=17029:2:3474463419053361::NO:::

Message: 'Ext' is undefined
Line: 17
Char: 1
Code: 0
URI: http://apex.oracle.com/pls/apex/f?p=17029:2:3474463419053361::NO:::

These errors I get in Firefox firebug:
parent.Ext is undefined

Ext is not defined
Ext.BLANK_IMAGE_URL = '/i/1px_trans.gif';

I have created a test case:
http://apex.oracle.com/pls/apex/f?p=4550:1:4486732951357154
workspace: csdb
username : test
password : testcase

application and page:
http://apex.oracle.com/pls/apex/f?p=17029:2:3830150920428743

I am trying to create a Modal window with update, to be called form Edit link of the report column - a small pencil pic..))
I would really appreciate if you could have a look at it and let me know what I'm missing?

davisyk said...

Marc, Nice job. I just implemented a Modal Popup Window and Modal Popup Window (with update) on Apex 3.2. The only thing not happening (with the second one) is the refresh of the interactive report.

Dave

Mark Lancaster said...

Hi Davisyk

Interactive reports call a different JS function to refresh.

Just modify the on close listener to call the appropriate function.

i.e.

gReport.navigate.paginate('pgR_min_row=1max_rows=15rows_fetched=15')

Mark

Tiago said...

Hi,

Firebug is giving me this error: "this.header is undefined" someone can help me?

Thanks

cst said...

Hi Mark,

i try to use your brillant solution om my application.

1. i downloaded and copied ext-3.3.1 files on \i\themes\ext-3.3.1 directory
2. i modified my page template due your example
3. i modified my report with appropriete link

on firebug console get this error

Ext.ux.PopupWindow is not a constructor

Any Help
Thanks in advance
km

cst said...

Hi Mark,

i try to use your brillant solution on my application.

1. i downloaded and copied ext-3.3.1 files on \i\themes\ext-3.3.1 directory
2. i modified my page template due your example
3. i modified my report with appropriete link

on firebug console get this error

Ext.ux.PopupWindow is not a constructor

Any Help
Thanks in advance
km

Mark Lancaster said...

Hi cst

This has already been answered.

If you look at the example notes carefully, or read through the other comments you will find the answer.

cst said...

Hi Mark,
i update my code and all works fine.
I have only one problem. I can't close popup window.
Any help?
Thanks in advance
km

Mark Lancaster said...

Hi cst

To close the window, take a look at the modal window with updates example

This example was done a couple of years ago.

In my book, Oracle Application Express 4 with Ext JS I have revisited the functionality so when you "Apply Changes" the window automatically closes on success, optionally refreshing the calling interactive report or classical report.

The book is a very worthwhile investment, saving you many weeks of work. You get a template application using Ext JS 3.3.1, as well as detailed explanation on how it all works.

The book is at the printers now, and is due for official release in a weeks time.
I'm aiming to have the download code available at the same, and am finalizing it now.