LiferayとExtJS

Question

私はサーブレット、CSS、JS、JSONのアプリケーションを持っています。それはExtJS 3ライブラリ（私は別のプロジェクトでコードを保持している）と一緒に働いています。

目的は、このアプリケーションをLiferayポートレット内で実行することです。

1. 「portal-portlet」という名前の新しいポートレットを作成しました。
2. すべてのJavaクラスを新しいsrcフォルダに追加しました。 屈折法を使うと思いますか？
3. WebContentフォルダのすべてのExtJSコードをポートレットのdocroot> js> extjs3フォルダに追加しました。

4. 修正view.jsp：

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

それは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の行は次のようになります。

<ヘッダ・ポートレットのJavaScript > /js/extjs3/adapter/ext/ext-base.js < /ヘッダ・ポートレットのJavaScript >

6 ..新しいテーマのプロジェクトを作成してのcustom.cssためにCSSを追加し、ポートレット.css（LiferayのデフォルトCSSを上書きするため）。私はExtJSからCSSをコピーしました。

ここで私は何を持っています。 私の新しいExtJSポートレットは、すべてのページをカバーし、ほとんど何も含んでいません。右の列にデータテーブル、左の列にファイルマネージャがあるとします。今すぐあなたはテーブルからファイルツリーを分離すると思われるバーだけを見ることができます

私は最初からそれを行う準備ができています。私はフックやテーマプロジェクトを使用する必要があり、私が間違っていたことは、どのように動作させるのですか？

読んでいただきありがとうございます。

Answer 1

問題は、Liferayポートレットがdivにレンダリングされ、既存のSenchaアプリケーションを埋め込むときに、多くのノードが本体の子として配置されたことに気付くでしょう。したがって、それはあなたのSenchaアプリケーションを完全に破損させ、そのほとんどは白い画面になります。

これは私が運良くExt.Viewportオブジェクトにすでにすべてを包んだ大きな煎茶のアプリケーションのためにそれを固定する方法です。今ここであなたのview.jspでこれを（ポートレット）を配置

：

その後セットアップアップあなたの煎茶パネルをとビューポートオブジェクトにそれらを置く：リテラルExt.get（Repository.Config.GUI_PARENT）はまだなく、問題を解決していないようだ：renderToがあること

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

お知らせ！

ここでext-allに置き換えてください。JSこの

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

とRepository.Config.GUI_PARENTは、単に一定である

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

：私はこれはまだ一般的な方法で右であるかわからないが、それはそうです、「ルート」

今非常にうまく動作するように。