3

サーブレット、CSS、JS、および JSON を使用したアプリケーションがあります。ExtJS 3 ライブラリで動作しています (別のプロジェクトでコードを保持しています)。

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

  1. 「portal-portlet」という新しいポートレットを作成しました。
  2. すべての Java クラスを新しい src フォルダーに追加しました。コードを屈折させると思いますか？
  3. すべての ExtJS コードを WebContent フォルダーからポートレットの 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 は次のようになります。

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

6.. 新しいテーマ プロジェクトを作成し、CSS を custom.css と portlet.css に追加しました (Liferay のデフォルト CSS をオーバーライドするため)。ExtJS から CSS をコピーしました。

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

だから私はゼロからそれを行う準備ができています。フック プロジェクトまたはテーマ プロジェクトを使用する必要がありますか?

読んでくれてありがとう。

4

1 に答える 1

2

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

これは、幸運にもすでにすべてを Ext.Viewport オブジェクトにラップしている大規模な Sencha アプリケーションを修正する方法です。

次に、これを 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"

これがまだ一般的な方法で正しいかどうかはわかりませんが、現在は非常にうまく機能しているようです。

于 2012-12-26T16:25:37.447 に答える