3

我有带有 Servlet、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"></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 和我的 Portlet 我的新 ExtJS Portlet 覆盖了所有页面，几乎没有任何内容。假设右栏中有数据表，左栏中有文件管理器。现在您只能看到假设将文件树与表分开的栏

所以我准备从头开始。我应该使用钩子还是主题项目，我做错了什么，如何使它工作？

谢谢阅读。

4

1 回答 1

2

问题是 Liferay portlet 被渲染到一个 div 中，当您尝试嵌入现有的 Sencha 应用程序时，您会注意到许多节点只是作为 body 的子节点放置的。因此，它完全破坏了您的 Sencha 应用程序，并且大多数情况下最终出现在白屏中。

这就是我为大型 Sencha 应用程序修复它的方法，幸运的是，它已经将所有内容都包装到了 Ext.Viewport 对象中：

现在将它放在您的 view.jsp (portlet) 中：

然后设置您的 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 回答