Free trial

Running ExtJS Code Inside Liferay Portlets

I recently wrote a blog post Running ExtJS app as a Liferay portlet, you can read Running ExtJS as a Liferay portlet: Part 1 and Running ExtJS as a Liferay portlet: Part 2 here.

ExtJS is powerful JavaScript framework with some pretty cool features. If you don’t know ExtJS but would like to, this page is a good place to start.:

The ExtJS app we used in a previous blog post (Running ExtJS App as a Liferay Portlet: Part 1) was built by Sencha Cmd and had some limitations inside the Liferay portlet.

In this post, I will show you how to run ExtJS code in Liferay portlets without building it in Sencha Cmd. One advantage of this solution is that you can run more than one Liferay portlet with ExtJS code in one page. You don’t need to use Sencha Cmd to build your app when the code changes; you can use Java code and some data from Liferay Portal in ExtJS.

One disadvantage to this solution is that you can’t develop an ExtJS app separately, build it, and include it only in the production build. You need to copy whole ExtJS framework into Liferay Portal and link everything to the view.jsp file.


Prepare the Environment

Liferay IDE

Download and install Eclipse Neon.3 + Liferay IDE 3.1.2 GA3 or the latest version from here:

Liferay Portal

Download Liferay Portal Bundled with Tomcat from here:

Create a Liferay Portlet in IDE

Create a new workspace and a new Liferay Portlet. Although these steps are the same as in previous post Running ExtJS App as a Liferay Portlet: Part 2, I’m including them here so you don’t have to refer back to the post and possibly miss important information. The names in the earlier post are different than the ones in this post, and I hope that isn’t confusing.

First, let’s create a new workspace and Liferay Portlet the same way as we did in Running ExtJS App as a Liferay Portlet: Part 2.

After creating the new workspace, add a new project. Choose New > Liferay Module Project to create new Liferay portlet. The New Liferay Module Project dialog box displays.

Enter the following information in their respective fields:

Project name:  ExtJSCodePortlet
Build type: Gradle
Project Template Name: mvc-portlet

In the Component Class Name field, enter ExtJSCodeController.
In the Package Name field, enter com.extjs.extjscodeportlet.

Liferay creates the module project.

Edit the Liferay Portlet to Contain the ExtJS App

When the new portal is ready, edit the src/main/resources/META-INF/resources/view.jsp file.

Add default toolkit (classic) – default style (triton) to the the CSS style to add the JavaScript file to link ExtJS framework components and JavaScript file for the theme.

<link rel="stylesheet" type="text/css" href="/extJS65/build/classic/theme-triton/resources/theme-triton-all.css">

<script type="text/javascript" src="/extJS65/build/ext-all.js"></script>
<script type="text/javascript" src="/extJS65/build/classic/theme-triton/theme-triton.js"></script>

Next, create a place to render our ExtJS components. In this solution, you demonstrate the connection between the Controller of Liferay Portlet and the View with ExtJS code in it.

Make sure that if you have more than one portlet with ExtJS code on one page, the component will be rendered exactly where it should be. To do this, generate a random number in the Controller, send it to the View, add it as an id of the DIV container, and generate the ExtJS component(s) there.

Execute the following code in Java. You will receive a random number as a string from the Controller.

String generatedName = (String)request.getAttribute("generatedName");

Next, verify that you can see that number as an H2 title in HTML, and place it as an id of the DIV container where the ExtJS component will be rendered.

<H2><%= generatedName %></H2>
<div id=<%=generatedName%>></div>

Add basic ExtJS code as illustrated below, and put it into JavaScript function $( document ).ready(). Ready() function to ensure the code will be executed when DOM is ready.

This is very important, because the DIV needs to be rendered in the DOM when an ExtJS script is executed, as the Ext.container.Container was placed into that DIV using renderTo.

The ready() function from ExtJS framework is not used because it doesn’t allow more than one Liferay Portlet with ExtJS code in it in one web page. If you don’t want more than one Liferay Portlets with ExtJS code in one web page, then you could use the ExtJS Ext.onReady() function.

<script type="text/javascript"> 
  $( document ).ready(function() {
  Ext.create('Ext.container.Container', {
      minHeight: 200,
      minWidth: 200,
      title: 'Container Panel',
      layout: 'column',
      renderTo: Ext.get("<%=generatedName%>"),
      items: [{
          title: 'Employee Directory',
          iconCls: 'x-fa fa-users',
          height: 100,
          columnWidth: 0.5
          title: 'About Sencha',
          iconCls: 'x-fa fa-info-circle',
          height: 100,
          columnWidth: 0.5

In the following image, the codes mentioned above are placed together in one view.jsp file.

Don’t forget to modify the Controller to generate a string with a randomly generated number.

Open a file to edit in “PortletName”>src>main>java>com>extjs>extjscodeportlet>portlet>”ExtJSCodeControllerPortlet”.java.

This file you should have class extends from MVCPortlet. In this class, override method public void doView(RenderRequest renderRequest, RenderResponse renderResponse); and add the randomly generated number by renderRequest.setAttribute(“generatedName”, generatedName), where generatedName is a String variable with randomly generated number. Send this variable by this method to the View.

public void doView(RenderRequest renderRequest, RenderResponse renderResponse) 
              throws IOException, PortletException {
    Random rand = new Random();
    int randomInt = rand.nextInt(100000);
    long currentTime = System.nanoTime();
    String generatedName = String.valueOf(currentTime).toString() 
              + String.valueOf(randomInt).toString();
    renderRequest.setAttribute("generatedName", generatedName);
    super.doView(renderRequest, renderResponse);

When our portlet is successfully deployed, it is prepared for the Liferay Portal.


After editing the View and Controller, we are ready to deploy the portlet by choosing Gradle Tasks > “PortletName” > build > deploy  in the right panel of Liferay IDE.

When our portlet is successfully deployed, it is prepared for the Liferay Portal.

ExtJS Framework

Download the ExtJS Framework here: and copy the extracted folder into Liferay Portal’s webapps folder placed inside the tomcat-* folder:

Run Liferay Portal in IDE

Follow the same steps as in “Run Liferay Portal in IDE,” in Running ExtJS as a Liferay portlet: Part 1. If you haven’t already imported a Liferay Portal, please do so following those same steps.

Portlet with ExtJS Code in Liferay Portal

Find the built portlet (.jar file) in “workspace directory”/”PortletName”/build/libs and copy this file into “Liferay Portal folder”/deploy.

When the server is running the .jar file (inside the deploy folder), it is automatically processed by the server and  removed from the deploy folder of Liferay Portal, so don’t be surprised if the file disappears.

When processing of the deployed portlet file is finished, access the portlet in Applications > Sample in the running Liferay Portal.

The example above was expanded to have charts with data stored inside the Controller and a class was created for the data.

public class ChartData {
    public String name;
    //for demonstration purposes not in array
    public int data1;
    public int data2;
    public int data3;
    public int data4;
    public int data5;
    public ChartData(){
     public ChartData(String name, int data1, int data2, int data3, int data4, int data5){ = name;
         //for demonstration purposes not in array
         this.data1 = data1;
         this.data2 = data2;
         this.data3 = data3;
         this.data4 = data4;
         this.data5 = data5;

Define the data in ExtJSControllerPortlet as arrays, and put them into variable renderRequest as attributes.

public class ExtJSCodeControllerPortlet extends MVCPortlet {
    String fields[] = {"name", "data1", "data2", "data3", "data4", "data5"};
    ChartData data[] = {
        new ChartData("one", 1, 2, 4, 8, 10),
        new ChartData("two", 7, 8, 6, 1, 3),
        new ChartData("three", 2, 2, 6, 1, 3),
        new ChartData("four", 15, 12, 14, 12, 17),
        new ChartData("five", 27, 38, 36, 13, 33),
        new ChartData("six", 50, 40, 30, 20, 10),
        new ChartData("seven", 5, 4, 3, 2, 1)
    public void doView(RenderRequest renderRequest, RenderResponse renderResponse) 
                  throws IOException, PortletException {
        Random rand = new Random();
        int randomInt = rand.nextInt(100000);
        long currentTime = System.nanoTime();
        String generatedName = String.valueOf(currentTime).toString() 
        + String.valueOf(randomInt).toString();
        renderRequest.setAttribute("generatedName", generatedName);
        renderRequest.setAttribute("fields", fields);
        renderRequest.setAttribute("data", data);
        super.doView(renderRequest, renderResponse);

And finally, add the code for view.jsp with all of the needed inputs, getting attributes from the Controller, transforming the Java array to a JavaScript array with an ExtJS store definition and an ExtJS Cartesian component.

<%@ include file="/init.jsp" %>
<%@ page import="com.extjs.extjscodeportlet.portlet.ChartData" %>

<link rel="stylesheet" type="text/css" 
<link rel="stylesheet" type="text/css" 

<script type="text/javascript" src="/extJS65/build/ext-all.js"></script>
<script type="text/javascript" 
<script type="text/javascript" src="extJS65/build/packages/charts/classic/charts-debug.js"></script>

    String generatedName = (String)request.getAttribute("generatedName");
    String fields[] = (String[])request.getAttribute("fields");
    ChartData data[] = (ChartData[])request.getAttribute("data");

<script type="text/javascript"> 
    // --------------------------- array of names --------------------------------
    var jsFields = new Array();
    <%for(int i = 0; i < fields.length; i++){%>
        jsFields[jsFields.length] = "<%=fields[i]%>";
    //print out array of names
    // --------------------- array of objects with values --------------------------
    var jsData = [];
    var key = jsFields[0];
    var obj = {};
    <%for(int i = 0; i < data.length; i++){%>
        var obj = {};
        obj[jsFields[0]] = "<%=data[i].name%>";
        //for demonstration, this could be solved with better class ChartData
        obj[jsFields[1]] = <%=data[i].data1%>;
        obj[jsFields[2]] = <%=data[i].data2%>;
        obj[jsFields[3]] = <%=data[i].data3%>;
        obj[jsFields[4]] = <%=data[i].data4%>;
        obj[jsFields[5]] = <%=data[i].data5%>;
    //print out array of objects with values

    // -------------------------- pure ExtJS 6.5 code -------------------------------
    $( document ).ready(function() {
        var myStore = Ext.create('', {
            fields: jsFields,
            data: jsData
            xtype: 'cartesian',
            renderTo: Ext.get("<%=generatedName%>"),
            minWidth: 600,
            minHeight: 350,
            insetPadding: 40,
            store: myStore,
            axes: [{
                type: 'numeric',
                position: 'left',
                fields: ['data1'],
                grid: true,
                minimum: 0
            }, {
                type: 'category',
                position: 'bottom',
                fields: ['name']
            series: {
                type: 'area',
                subStyle: {
                    fill: ['#0A3F50', '#30BDA7', '#96D4C6']
                xField: 'name',
                yField: ['data1', 'data2', 'data3']

<H2><%= generatedName %></H2>

<div id=<%=generatedName%>></div>

In this blog post, we ran ExtJS code inside a Liferay Portlet. We placed an ExtJS component into a unique div container. We included js files and CSS styles for all packages, themes, and ExtJS frameworks. After we copied the whole framework into Liferay Portal, we put together ExtJS code with Java inside Liferay Portlets with more portlets on one single web page together.


If you are interested in a different approach, building and placing ExtJS app inside Liferay Portlet, you can read instructions here: Running ExtJS as a Liferay portlet: Part 1.

Leave a Reply

Related articles


Let’s make LLMs generate JSON!

In this article, we are going to talk about three tools that can, at least in theory, force any local LLM to produce structured output: LM Format Enforcer, Outlines, and Guidance. After a short description of each tool, we will evaluate their performance on a few test cases ranging from book recommendations to extracting information from HTML. And the best for the end, we will show you how forcing LLMs to produce a structured output can be used to solve a very common problem in many businesses: extracting structured records from free-form text.

Notiondipity: What I learned about browser extension development

Me and many of my colleagues at profiq use Notion for note-taking and work organization. Our workspaces contain a lot of knowledge about our work, plans, or the articles or books we read. At some point, a thought came to my mind: couldn’t we use all this knowledge to come up with project ideas suited to our skills and interests?

From ChatGPT to Smart Agents: The Next Frontier in App Integration

It has been over a year since OpenAI introduced ChatGPT and brought the power of AI and large language models (LLMs) to the average consumer. But we could argue that introducing APIs for seamlessly integrating large language models into apps developed by companies and independent hackers all over the world can be the true game changer in the long term. Developers are having heated discussions about how we can utilize this technology to develop truly useful apps that provide real value instead of just copying what OpenAI does. We want to contribute to this discussion by showing you how we think about developing autonomous agents at profiq. But first a bit of background.