PDA

View Full Version : Oracle ApEx & ExtJS Multiselect Errors



titusaduxass
23 Feb 2010, 7:58 AM
Hi All,

I am having a very strange issue when trying to create the Multiselect ExtJS example inside and Oracle Application Express page.

I have created a demo page at the following location:
http://apex.oracle.com/pls/apex/f?p=41697:1

Basically the problem seems to be some sort of conflict in the Javascript, but I am at a complete loss as to how to proceed. If the above link if viewed using Chrome, both the ItemSelector and Multiselect are displayed perfectly and function as expected. If viewed with Firefox Only the Itemselector is rendered and I get an error in Firebug "this[name] is null". Viewed with IE and nothing is rendered and an error is given "Invalid source HTML for this operation" from line 288 of ext-all-debug.js

I have tested the demo page outside of Oracle ApEx and everything is rendered perfectly in all browsers. See link below
http://www.swiftwind.co.uk/ext/examples/multiselect/multiselect-demo.html

I have been scratching my head over this for days now and am completely stumped! This is the only ExtJS component that I have had serious trouble with and would truly appreciate any help, tips or advice that you may be able to offer me!

I look forward to hearing from you,

Kindest Regards,

Cj

titusaduxass
24 Feb 2010, 6:21 AM
Hi All,

I would really appreciate any suggestions with my problem above...

I look forward to hearing from you,

Regards,

Cj

jllonch
7 Mar 2010, 2:25 PM
Hi,

As you I have been scratching my head over this for days too... :((
I haven't resolved the problem yet but I will share with you what I know.
I found that if you render the itemselector to a div that is inside a form element the conflict appears. I don't know why.

Regards,
Jordi

titusaduxass
8 Mar 2010, 1:11 AM
Hi Jordi,

I followed your advice, and I temporarily removed the #FORM_OPEN# and #FORM_CLOSE# substitution strings from my APEX Page Template. Although this obviously causes a load of PL/SQL issues, the ItemSelect component is then rendered correctly.

Why would having the DIV inside a FORM element cause these issues?

Have you managed to get any closer to a solution with this?

I look forward to hearing from you again.

Kindest Regards,

Cj

seek
8 Mar 2010, 3:10 AM
Hi Titus,
are you sure to create correctly all DIV needed by example?

I'm also integrating ExtJs with APEX XD
Seek

jllonch
8 Mar 2010, 3:29 AM
Hi Seek,

I tried to put all the example code inside my form tag. Is the example without modifications and is not working.

Jordi

titusaduxass
8 Mar 2010, 3:35 AM
Hi Seek,

Edit the Example file provided by ExtJS and you will get the same issue. Just add


<form>
<div id="itemselector" class="demo-ct"></div>
</form>


This will make the page error in FF and IE, but Chrome will still be fine.

I am in agreement with Jordi, it is definitely causing this problem because of the FORM tags.

Cheers,

Cj

seek
8 Mar 2010, 5:32 AM
Hi Seek,

Edit the Example file provided by ExtJS and you will get the same issue. Just add


<form>
<div id="itemselector" class="demo-ct"></div>
</form>
This will make the page error in FF and IE, but Chrome will still be fine.

I am in agreement with Jordi, it is definitely causing this problem because of the FORM tags.

Cheers,

Cj


Try to add only


<div id="itemselector" class="demo-ct"></div>

titusaduxass
8 Mar 2010, 5:47 AM
Hi Seek,

I think you might be missing the point a little here. Both myself and Jordi have the example provided by ExtJS working fine, however as a test I added the <form> tags to the example HTML file to prove that it is the FORM elements in APEX that are causing the issue. (As discovered by Jordi)

Obviously in ApEx we must have the FORM elements in the page template in order for the page item values to be set correctly when the page is submitted.

The help I require now is to try and find a work-around to get the ItemSelector working inside the ApEx framework.

Kindest Regards,

Chris

jllonch
11 Mar 2010, 12:09 PM
Hi,

After a deep debug I found that firefox can not accept to add a form child inside other form.
I patched ext-all-debug.js (see line 231):

overwrite : function(el, o, returnElement){
el = Ext.getDom(el);
el.innerHTML = createHtml(o);
// firefox can not add form child inside other form
if (el.innerHTML == "" && o.tag == "form") return returnElement ? Ext.get(el) : el;
return returnElement ? Ext.get(el.firstChild) : el.firstChild;
},

Please confirm if is working for you because I'll send a patch to Ext JS team.

Regards,
Jordi

titusaduxass
12 Mar 2010, 12:46 AM
Hi Jordi,

Thanks very much for your response, I am really eager to try it out! However, I have gone to line 231 in ext-all-debug.js, but I am really not sure where to put your patched chunk of code!

Line 231 appears to be in the middle of the insertIntoTable function.

Could you give me a little more direction as to how I need to implement your patch in my code? I am using ExtJS 3.0.0 if that helps at all?

I look forward to hearing from you.

Kind Regards,

Chris

jllonch
12 Mar 2010, 1:03 AM
Hi Chris,

Ups, sorry Chris, I forgot to say I patched version 3.1.0.
Try to search "overwrite : function(el, o, returnElement)" and in this function, before return add this line:
if (el.innerHTML == "" && o.tag == "form") return returnElement ? Ext.get(el) : el;

Jordi

titusaduxass
12 Mar 2010, 1:09 AM
Hi Jordi,

Ok, I have put in that line of code and it is now working perfectly in Firefox, but I am still getting nothing back in IE.

Do you have any idea what could be causing the problems in IE?

Thanks very much for taking the time to look at this by the way.

Kind Regards,

Chris

titusaduxass
12 Mar 2010, 4:11 AM
Hi Jordi,

I think I have solved the issue now with the ItemSelector not being rendered in Internet Explorer even with your patch added.

I modified the overwrite function to:


overwrite : function(el, o, returnElement){
el = Ext.getDom(el);
// IE does not seem to like adding a FORM element to the innerHTML of the el
if(o.tag != "form") {
el.innerHTML = createHtml(o);
}
// firefox can not add form child inside other form
if (el.innerHTML == "" && o.tag == "form") return returnElement ? Ext.get(el) : el;
return returnElement ? Ext.get(el.firstChild) : el.firstChild;
},


This now works for me in both IE and FF as well as Chrome.

Do you think this method is the best way of handling the issue?

FYI, the Multiselect example also has issues in Internet Explorer, seeming something to do with a form element too. Although this does not impact my development, it may be worth raising this with the ExtJS Dev team too. The Multiselect does work with FF even before applying your patch.

Thank you sooo much for all your help with this problem, it really has been much appreciated.

Now I just need to work out how on earth I am going to use the ItemSelector to replace the ApEx Shuttle Lists!! A developers job is never done! ;)

Kind Regards,

Chris

jllonch
12 Mar 2010, 4:31 AM
Hi Chris,

It's good to hear that now is working in ie. Congrats! ;)

But I think your patch it is too much aggressive because you disable the posibility to create a form tag so I think we will have a lot of problems with our applications.
Studying your patch I can think that problem could be that after createHtml(o), ie return null, undefined or ... and my condition only check if el.innerHTML=="", so you could try to modify my condition and put something like:
if (!el.innerHTML && o.tag == "form") return returnElement ? Ext.get(el) : el;

Best regards,
Jordi