View Full Version : Ext 3.x in Portlet Container

28 Mar 2011, 9:03 AM
Maybe someone can help

I am experimenting with using Ext in a portlet container - java.net portlet container, weblogic portal or websphere portal. It does not matter because the results are the same.

To test functionality, I have created two portlets based on Ext examples. One around the form/form-grid.html demo and another around dd/dnd_grid_to_grid.html.

I converted the html to xhtml and I am using facelets. In all portal containers, the portal (or user using the portal) controls which portlets are visible on the screen and the order of rendering. The examples use onReady(...) which I converted to DDExampleApp = ... and FormExampleApp = respectively. In inlined, the onReady script in the xhtml of each portlet view page.

The result - the first portlet in the sequence order of the page renders. The second does not. If I minimize the first portlet, the second will render correctly. So, I tried to abstract the onReady functionality into a general script and refer to it from both xhtml pages. Something like onReady(DDExampleApp, FormExampleApp).

The result is that the second portlet (lets say FormExampleApp) results in an error because the scripts for the FormExampleApp that are in the form/form_grid.xhtml markup have not yet be executed.

So, my questions

1. How do I combine, possibly at runtime, portlets onto a page when the first onReady registration will trump all others?
2. If I cannot register multiple onReady executions, how would I implement ExtJS in a true portal container?

Thanks in advance

Kevin Clark

29 Mar 2011, 4:22 AM
Are you using iframes?

29 Mar 2011, 6:03 AM
I am not using IFrames. IFrames have issues with WSRP.

I did find a solution using dynamic app registration. Here is the snippet of code -

Create a common-ext.js file

* Some basic functions to augment Ext JS in a portal. The main purpose of this script is to
* allow functions that render Ext components to register themselves for OnReady DOM prep.
* Because a portal can render sections and has different portlet window states we must use
* this sort of register and dynamic check before calling scheme.
* Kevin Clark - kevin.clark at objsoft.com
* Lazy initialize the global var

if (!OnReadyFunctions) {
var OnReadyFunctions = new Array();

* This is a register function that will store functions for initialization
function register(aFunction) {
for ( i=0; i < OnReadyFunctions.length; i++ )
if (OnReadyFunctions[i] == aFunction) {

* This method is registered with OnReady for calling all subsequent functions.
* When in portlet model, the function may be undefined and therefore will not
* execute.
function OnReadyInit() {
for ( i=0; i < OnReadyFunctions.length; i++ )
if(typeof OnReadyFunctions[i] == 'function') {

Change the example code to set a global to the function that will render the EXT code

For example, from form-grid.js it changes from



FormExampleApp = function(){

In the xhtml I placed the following

<script type="text/javascript" src="/ms-resources-war/resources/common-ext.js"></script>

<script type="text/javascript" src="/ms-annuities-portlets-ext-war/examples/form/form-grid.js"></script>

So, each portlet is registering the function normally executed with the OnReady in EXT. When the portlet is not visible, no registration and no issues. When multiples are visible, the OnReadyInit will loop through the array and initialize all the scripts.

Hope this helps someone. Maybe the engineers at EXT can take a look and improve upon it or make another suggestion.