Liferay和ExtJS

Question

我有Servlets，CSS，JS和JSON的應用程序。它與ExtJS 3庫（我將代碼保存在另一個項目中）一起工作。

目標是在Liferay Portlet中運行此應用程序。

1. 我創建了一個名爲「portal-portlet」的新portlet。
2. 將所有我的Java類添加到新的src文件夾中。 我想折射代碼？
3. 將WebContent文件夾中的所有ExtJS代碼添加到Portlet的docroot> js> extjs3文件夾中。

4. 改性view.jsp的：

   < DIV ID = 「invoice_form」 > < /格>

它具有的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。改性Liferay的-的portlet.xml與線條看起來像這樣的：

<頭的portlet的JavaScript > /js/extjs3/adapter/ext/ext-base.js < /報頭的portlet的JavaScript >

6 ..創建新主題項目，並添加到CSS custom.css和portlet .css（覆蓋Liferay默認CSS）。我從ExtJS複製了CSS。

這裏我得到了什麼。 我的新ExtJS Portlet覆蓋了所有頁面，幾乎不包含任何內容。假設右列中有數據表，左列中有文件管理器。現在你可以看到只有一個吧，這是假設分開文件樹從表

所以我準備從頭開始。我應該使用鉤子還是主題項目，以及我做錯了什麼，它是如何工作的？

感謝您的閱讀。

Answer 1

問題是，Liferay portlet呈現爲div，當您嘗試嵌入現有的Sencha應用程序時，您會注意到許多節點只是放置爲身體的子節點。因此，它完全破壞了你的Sencha應用程序，而且大多數情況下它會以白色屏幕結束。

這是我的固定它的大煎茶的應用程序，幸運的是，一切都包裹已經到Ext.Viewport對象：

現在放置，在view.jsp（門戶）這個位置：

然後設置你的煎茶麪板，把它們放在一個視口的對象：

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簡直是一個常數：「根」

我不知道這仍然是一般道路的權利，但它似乎現在工作很好。