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:
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' ;-)
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!
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
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
Hi Jack
Did you read the notes section and copy the popup-window.js file?
Mark
sorry my mistake
yeah...I should read properly
i forgot to include the javascript
thanks for the fast response
marvelous
Can you tell where we need to copy popup_window.js?
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
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
Hi Srinivas
No that's it, apart from including the Ext javascript files and CSS file in your page template.
Mark
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?
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
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
Hi,
Firebug is giving me this error: "this.header is undefined" someone can help me?
Thanks
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
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
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.
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
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.
Post a Comment