Using Ext JS library with Webcenter Portal

Ext JS is a JavaScript library for building interactive web applications[1] using techniques such asAjaxDHTML and DOM scripting.

It’s quite simple to integrate a Javascript code with webcenter.
For instance, let’s consider this use case: get an XML document form a given URL, then display it at a fragment in an existing Webcenter Portal page in order to browse the content:.

Download EXT JS library. (GPL3 Licence)
Copy needed file on the WebCenter Site (on a public HTTP Virtual directory)

We take an existing example called xml-grid, then we adapt it (js file, in particular).
In webcenter, we add a HTML markup task flow, and we fill with this HTML code:



<meta http-equiv= »Content-Type » content= »text/html; charset=iso-8859-1″>

<title>XML Grid Example</title>

<link rel= »stylesheet » type= »text/css » href= »/cs/ThemeForge/extjs/resources/css/ext-all.css » />

<link rel= »stylesheet » type= »text/css » href= »/cs/ThemeForge/extjs/shared/example.css » />

<script type= »text/javascript » src= »/cs/ThemeForge/extjs/bootstrap.js »></script>

<!– page specific –>

<script type= »text/javascript » src= »/cs/ThemeForge/extjs/pmo-grid.js »></script>



<h1>XML Grid Example</h1>

<div id= »example-grid »></div>



Data sample:

The sample below is a more sophisticated sample of grid:







Others usages:
It can be useful to use BI Publisher in order to build a XML document which will be consumed with this technique.