Running ExtJS app as a Liferay portlet: Part 1

Posted 6 years ago by Jiri Znoj

Rendering ExtJS app in a specific page element

Introduction

Hello,

My name is Jiří Znoj and I am working as a Software Engineer at profiq, an agile software development company. I, as a part of the team “Tech Research”, investigate various technologies for potential customers and for our purposes – to use the best technologies for our cause.

Nowadays web apps are built by a combination of technologies. There are many frameworks that you can combine to build excellent and powerful web systems. Lately, I’ve been exploring Liferay, a Java-based portal solution, and was wondering what it takes to run JavaScript apps within it. If you are exploring ways to use your existing JavaScript apps and plan on combining them with the Liferay portal to bring your web ecosystem to enterprise grade level, you may find how I was able to combine my JavaScript apps with Liferay interesting.

I’ve selected apps I’ve built with ExtJS javascript framework and as I couldn’t find proper guides for this I’ve decided to prepare one. 
In this blog post, I would like to show you, how to run ExtJS 6.5.1 app built with Sencha Cmd in a Liferay 7.0 Portal.

ExtJS is a powerful JavaScript framework with some pretty cool features. If you don’t know ExtJS and want to read something about it, this page could be good place to start: http://docs.sencha.com/extjs/6.5.1/guides/quick_start/introduction.html.

Liferay Portal is an enterprise portal software written in Java with capabilities like Collaboration, Social Networking, Staging, Web content publishing, and many more. For more information visit documentation on this page: https://dev.liferay.com/discover/portal.

ExtJS app

You probably might have an ExtJS app built with Sencha Cmd already. In this tutorial we will use a newly generated and built ExtJS app, but steps for modification should be pretty much the same as for an already created one.

Prepare environment and generate ExtJS app

Sencha Cmd

Sencha Cmd  is a tool for generating and building ExtJS apps. ExtJS applications can be created both with and without Sencha Cmd. Using Sencha Cmd is highly recommended as it provides a full set of lifecycle management features of your project, therefore in this guide we will use it to generate and build our application.You can download Cmd from
here: https://www.sencha.com/products/extjs/cmd-download/ and install it.

ExtJS Framework

Download the Framework
here: 
https://www.sencha.com/products/extjs/evaluate/

The current latest version 6.5 of the framework is divided into two toolkits – modern and classic.

The modern toolkit provides HTML5 application support for all modern browsers from desktop to phone. It’s ideal for a cross-browser, cross-device experience.

The classic toolkit provides traditional Ext JS application support for most desktop browsers, tablets, and touchscreen enabled laptops.

Generate ExtJS app (modern or classic toolkit) with installed Cmd.

sencha -sdk extJS65 generate app MyAppClassic ./MyAppClassic

sencha -sdk extJS65 generate app MyAppModern ./MyAppModern

(Source: https://docs.sencha.com/cmd/guides/extjs/cmd_app.html)

Because ExtJS apps are usually meant to be run as full page applications, we will need to make some little changes to be able to run the app (MyAppClassic or MyAppModern) in a specific window of the Liferay Portal page.

1. Modify classic ExtJS app to run in a portlet

First we will need to disable the loading of the default view in the ExtJS app.

Open file app.js in root of the ExtJS app and comment or delete row with mainView.

// The name of the initial view to create.
// mainView: MyAppClassic.view.main.Main' <- comment or delete this

Next we have to disable the ExtJS microloader. ExtJS microloader is neat script which can dynamically load all the necessary JavaScript and CSS for your app. But it modifies the main dom of the page, which would break the LifeRay portlet.

Open file app.json in root of the ExtJS app and disable microloader.

"microloader": {
     "enable": false
 }

Because we want to render ExtJS app in a specific element of the page (inside the portlet) we need to modify the launch function in that way.

Open file ./app/Application.js and add following code to render ExtJS app into div with class “extJsAppDiv” (Obviously you can use whatever name you want):

launch: function(){
     Ext.create('MyAppClassic.view.main.Main', {
         layout: 'fit',
         renderTo: Ext.select('.extJsAppDiv')
     });
 }

Then we will create production build with classic toolkit from the root folder of our ExtJS app.

sencha app build --production -c classic

When building process is finished, copy folder with production build into Liferay portal’s folder webapps inside folder tomcat-*.

2. Modify modern ExtJS app to run in a portlet

We will need to disable the loading of the default view in the ExtJS app, because we need MyAppModern app to run in specific page element and not as a fullscreen application.

Open file app.js in root of the ExtJS app and comment or delete row with mainView.

// The name of the initial view to create.
// mainView: 'MyAppModern.view.main.Main' <- comment or delete this row

Open file app.json in root of the ExtJS app and disable microloader, because microloader modifies the main dom of the page (which would break the LifeRay portlet).

"microloader": {
     "enable": false
 }

Open file ./app/Application.js and modify launch function by adding following code to render ExtJS app into specific page element – in this case div with class “extJsAppDiv” (you can use whatever name you want).

For ExtJS app in modern toolkit, we have to set (min)Height and (min)Width to have it properly visible.

launch: function(){
     Ext.create('MyAppModern.view.main.Main', {
         renderTo: Ext.select('.extJsAppModernDiv'),
         minHeight: 400,
         minWidth: 200,
     });
 }

After previously mentioned modifications we can build our modern application “MyAppModern” from its root folder. I recommend production build and we are building modern app, so we can build just modern toolkit.

sencha app build --production -c modern

When building process is finished, copy folder of production build into Liferay portal folder webapps, which is inside folder tomcat-*.

In this post, we explained how to modify ExtJS app (classic or modern toolkit) to run in specific page element. This application is prepared to be imported into Liferay Portal’s portlet. More about that in next blog post Running ExtJS app as a Liferay portlet: Part 2.

Jiri Znoj

6 Responses to “Running ExtJS app as a Liferay portlet: Part 1”

  1. […] 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 […]

  2. Abdul aziz says:

    I am wondering why there is no need to create WEb-INF folder.Could you please provide suggestion here as I followed your approach but without any success.

  3. This is very useful and great post!

  4. Amit Pawar says:

    Can someone please help me in understanding the clear difference between React.JS and Ext.JS and please suggest one of the both that can be beneficial in developing Effective Single Page Application.

    • Both are JavaScript frameworks. The biggest difference is that ExtJS comes with UI components and all the tooling you need to build your app. But is paid – the license can cost a lot.

      ReactJS is just a framework how to build your web app. You will need to pick another UI Library to easily create your components + you can pick lot of other libraries to shape your app. Most of the React libraries are free.

      In 2022 I would recommend you to build your SPA with React, unless you are building some large case enterprise app where you would use all the ExtJS components. Also it’s 1000x easier to find React developers, tutorials and guides.

Leave a Reply

Related articles