javascript - Liferay 和 ExtJS

Question

我的应用程序包含 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:

它与 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

6.. 创建新的主题项目并将 CSS 添加到 custom.css 和 portlet.css(以覆盖 Liferay 默认 CSS)。我从 ExtJS 复制了 CSS。

这是我得到的。 我的新 ExtJS Portlet 覆盖所有页面，几乎不包含任何内容。假设右栏有数据表，左栏有文件管理器。现在您只能看到应该将文件树与表分开的栏

所以我准备从头开始。我应该使用 Hook 还是主题项目以及我做错了什么，如何让它发挥作用？

感谢阅读。

Answer 1

问题是 Liferay portlet 被渲染到一个 div 中，当您尝试嵌入一个现有的 Sencha 应用程序时，您会注意到许多节点只是作为主体的子节点放置的。因此它会完全破坏您的 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”

我不确定这在一般情况下是否仍然正确，但它现在似乎工作得很好。