PDA

View Full Version : Ext.onReady function() not triggering



rklakamana
16 Jan 2011, 11:40 AM
Hi All

We are using ExtJS in a jsp portal environment on IBM Web sphere Portal and the code example is
Ext.onReady(function(){
Ext.QuickTips.init();
onReadyFunction();
});

This onReady never been called, is there any other way i can render my Tab Container.


Can any one help me on this

Thanks in Advance

Raj Lakamana

mankz
16 Jan 2011, 11:43 AM
How does your page setup look? Is Ext JS included properly?

rklakamana
16 Jan 2011, 11:46 AM
Hello Mankz

Thank you for responding. Ext JS included properly and its working for other areas. Page setup is simple JSP file with few includes of supporting .jspf files

We have stand alone portlet uses ExtJS and its working application, We have integrated with new theme where other portlets using extjs working fine with that theme. but not this portlet




Raj Lakamana

mankz
17 Jan 2011, 1:18 AM
If you set breakpoint in onReady, does it stop there?

rklakamana
17 Jan 2011, 6:13 AM
Not completely true, Its not going isode onRedy, i put some alerts to see and its not reaching inside onReady bloack of code

Raj Lakamana

rklakamana
17 Jan 2011, 6:29 AM
i read this article on one of the forums

"When the page is ready to be rendered, Ext sets its 'ready' flag to true and triggers an event that causes all JS waiting for the 'ready' flag to be executed." and sametime this flag is false by default when loaded.

In our case i suspect my page is waiting to "get ready to render state" where somewhere it was already marked as "rendered" and waiting forever

is there way i can manually set this Flag to "ready" state so that my render block executes

In the same post said that i have to surround code inside " extjs\ext-all.js" with condition but this solution not working for us.

If there is way i can set this flag to "true" i believe it should work.

any inputs!

Condor
17 Jan 2011, 6:31 AM
This piece of javascript code; how is it loaded into the browser?

a. Part of the main page -> should work
b. Loaded in an (i)frame -> should work (unless on IE with Ext <3.2)
c. Loaded by XHR and added to the document -> doesn't work; document is already loaded; onReady has already been executed.

mschwartz
17 Jan 2011, 6:33 AM
Perhaps you have a JavaScript error, syntax error, or some .js file you think is being loaded isn't. Most browsers will not execute the JavaScript in such a case.

rklakamana
17 Jan 2011, 6:39 AM
This Code is part of main code after initializing couple of javascripts then we start rendering at
Ext.onReady(function(){
Ext.QuickTips.init();

Then we start defining extjs elements

its failing to get "onReady" state

rklakamana
17 Jan 2011, 6:40 AM
I have verified with Firefox error console no Javascript error

mschwartz
17 Jan 2011, 6:44 AM
Reduce the problem to as small a bit of code as possible.

Try just including the ExtJS libraries and your Ext.onReady() with an alert('FIRED!') in it

Then add back a little bit of your included code at a time until it fails.

Condor
17 Jan 2011, 6:45 AM
OK, but you're loading this in a WebSphere Portal container, so I don't think your page is really loaded as part of the main page.

I think Portal is loading your page separately (but I don't know if it uses an IFRAME or XHR).

rklakamana
17 Jan 2011, 6:56 AM
i tried removing all code still not firing onReady() function All the time this is not consistent behavior sometime it loads page sometimes not.


<%@page session="false" contentType="text/html" pageEncoding="ISO-8859-1"
import="javax.portlet.*"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>


<script language="javascript">

Ext.onReady(function(){
Ext.QuickTips.init();
document.getElementById('spinnertText').innerHTML = 'Loading Communications Center';
alert('ok Inside onReady');
});

</script>

<table>
<tr><td>This is our Application
<div id="spinnertText" align="center" valign="middle"></div>
</td></tr>
</table>

mschwartz
17 Jan 2011, 7:00 AM
OK, but you're loading this in a WebSphere Portal container, so I don't think your page is really loaded as part of the main page.

I think Portal is loading your page separately (but I don't know if it uses an IFRAME or XHR).

This looks like the answer to me.

Is there an actual main page that holds the portlets? If so, add a function like "function portletLoaded() { alert('here'); }" to the main page's generated HTML.

And instead of Ext.onReady() in your portlet code, put "top.portletLoaded();" after your </table>

rklakamana
17 Jan 2011, 7:06 AM
The page is loading all the time only block of the code inside onReady is not exeuting

for the above code the results on browser is "This is our Application" every time i hit the page , but not all times it shows spinner text.

I have tried move all the code inside onReady block to a new function and called at the end of the page but result is data is not properly rendered every time tool bars are missing.

mschwartz
17 Jan 2011, 7:20 AM
Look at the net tab in firebug and see what network requests are being done.

If Condor is right, and I bet he is, then your page is made up of more than one request - one to get the main HTML page, and XHR or IFrames for the portlets.

If so, then the onReady event fired with the portal was loaded, long before your portlet is loaded.

rklakamana
17 Jan 2011, 7:28 AM
i am sure whenever it fails to call onReady, onReady event already fired is there a way i can call onReady event or equalant event in ExtJS so that my page loaded every time.

Meantime i will try to monitor net tab (as i never used it)

rklakamana
17 Jan 2011, 11:40 AM
i have replaced Ext.onReady(function() with window.onload=function()

Its working.....

Thank you all for your inputs.

Raj Lakamana

Condor
17 Jan 2011, 11:32 PM
Are you using an Ext version prior to 3.2? In that case I assume WPS is using IFRAMEs, and the Ext <3.2 onReady code doesn't properly handle onReady in IFRAMEs on IE.

mschwartz
18 Jan 2011, 6:20 AM
I looked at the JSR for portlet 2.0 and couldn't really make out what it's doing. He said he was using Firefox, not IE.

The best I can figure is that the portal container renders and the onReady fires. Then the portlets get loaded via XHR.

Clearly onReady is not going to work in that scenario.

If he does something like:


function portletLoaded() {
alert('portletLoaded');
}

In the portal container and then instead of Ext.onReady he does:


<script>
top.portletLoaded();
</script>

at the bottom of his portlet JSP, I bet it works.

Condor
18 Jan 2011, 6:38 AM
But then, window.onload shouldn't be working too.

mschwartz
18 Jan 2011, 7:03 AM
http://www.ibm.com/developerworks/websphere/library/techarticles/0712_behl/0712_behl.html

mschwartz
18 Jan 2011, 7:05 AM
http://www.coderanch.com/t/203326/Portals-Portlets/java/Portlet-body-tag

mschwartz
18 Jan 2011, 7:07 AM
d'oh

I bet the portal is overriding the window.onload, perhaps screwing up Ext.

Condor
18 Jan 2011, 7:15 AM
Just looked at the markup generated by our IBM WebSphere Portal (can't believe I've never done that in all the years we use it now) and verified that it is indeed not using IFRAMEs.

It's not doing anything with XHR as far as I can see. It's loading the whole page each time you click something (Web 1.0 style).

That would mean that Ext.onReady should work, unless the Portlet is doing something with XHR.

mschwartz
18 Jan 2011, 9:24 AM
Check and see if it's doing something with window.onload or body onload

rklakamana
19 Jan 2011, 1:41 PM
Finally i figured out root cause of the issue, I ham using 2 Extjs libraries one from my theme and one i have setup along with my project. and for the same reason when i am using with other themes its working as they are not extjs related

So now with onReady is triggering properly

Raj Lakamana