Liferay and ExtJS

Question

I have the application with Servlets, CSS, JS and JSON. It's working with ExtJS 3 library (I keep the code in another project).

The goal is to run this application inside a Liferay Portlet.

1. I created new Portlet called "portal-portlet".
2. Added all my Java classes to new src folder. Am I suppose to refractor code?
3. Added all ExtJS code from WebContent folder to docroot > js > extjs3 folder of the Portlet.

4. Modified view.jsp:

   <div id="invoice_form"></div>

It links with application.js:

Ext.onReady(function() {
// code responsible for rending main window
var main = new Ext.Viewport({
    layout: 'border',
    renderTo: 'invoice_form',
    id: 'main',
    items: [{

5.. Modified liferay-portlet.xml with lines look like this one:

<header-portlet-javascript> /js/extjs3/adapter/ext/ext-base.js </header-portlet-javascript>

6.. Created new Theme Project and added CSS to custom.css and portlet.css (to override Liferay default CSS). I copied CSS from ExtJS.

Here what I've got. My new ExtJS Portlet cover all page and contain almost nothing. It's suppose to have data table in right column and file manager in left column. Now you can see only bar that's suppose to separate file-tree from table

So I'm ready to do it from scratch. Should I use hook or theme project and what I did wrong, how make it work?

Thanks for reading.

Answer 1

The problem is that Liferay portlets are rendered into a div and when you try to embed an existing Sencha application you will notice that many nodes are just placed as child of the body. Thus its totally corrupting your Sencha application and mostly it end ups in a white screen.

This is how I fixed it for large Sencha application which luckily wrapped everything already into a Ext.Viewport object :

Now place in your view.jsp (portlet) this here :

Then setup up your Sencha panels and put them into a Viewport object :

this._viewport = new Ext.Viewport({
  layout    : 'border',
  margins   : '0 0 0 0',
  renderTo:Ext.get(Repository.Config.GUI_PARENT),
  defaults  : {
    renderTo:Ext.get(Repository.Config.GUI_PARENT)
  }, // default config for all child widgets
  items    : [ 
    new Ext.Panel({ // Header panel for login and toolbar
      region : 'north',
      height : 60,
      margins : '0 0 0 0',
      border : true,
      items :[
        { // Header with logo and login
          region: 'north',
          html: Repository.Templates.login.apply({
                  currentUser : this._currentUser,
                  isPublicUser : this._currentUser=='public'
                }),
          height: 30,
          renderTo:Ext.get(Repository.Config.GUI_PARENT)
        },
        this._controls.toolbar
      ] // Toolbar
    }), // Panel 
    this._controls.centerPanel,
    this._controls.leftPanel,  
    this._controls.rightPanel
  ]
});

Notice that the renderTo:Ext.get(Repository.Config.GUI_PARENT) literal doesn't seem to fix the problem yet but !

Now replace in ext-all.js this

Ext.Viewport = Ext.extend(Ext.Container, {
this.el = Ext.getBody()

with

Ext.Viewport = Ext.extend(Ext.Container, {
    this.el = Ext.get(Repository.Config.GUI_PARENT);

where Repository.Config.GUI_PARENT is simply a constant : "root"

I am not sure this is still the right in general way but it seems to work now very fine.