Geek asks and answers

Liferay and ExtJS

I have an application with servlets, CSS, JS and JSON. It works with ExtJS 3 library (I save the code in another project).

The goal is to run this application inside the Liferay portlet.

  • I created a new portlet called "port-portlet".
  • All my Java classes have been added to the new src folder. I believe the refractor code?
  • All ExtJS code from the WebContent folder has been added to the docroot> js> extjs3 portlet folder.

  • Modified view.jsp:

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

It refers to 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 .. The modified liferay-portlet.xml with lines is as follows:

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

6.. CSS custom.css portlet.css( CSS Liferay). CSS ExtJS.

. Liferay and my portlet ExtJS . , . ,

, . hook theme , ?

.

+3
1

, Liferay div, Sencha, , . , Sencha, .

Sencha, , , Ext.Viewport:

view.jsp() :

Sencha Viewport:

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
  ]
});

, renderTo: Ext.get(Repository.Config.GUI_PARENT), , , !

ext-all.js

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


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

Repository.Config.GUI_PARENT - : "root"

, - , , .

+2

More articles:


All Articles