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:

<html>

<head>

<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>

</head>

<body>

<h1>XML Grid Example</h1>

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

</body>

</html>


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.