Javascript Liferay和ExtJS

我有一个带有servlet、CSS、JS和JSON的应用程序。它使用ExtJS3库（我将代码保存在另一个项目中）

目标是在Liferay Portlet中运行此应用程序。

我创建了一个名为“portalportlet”的新Portlet

将我的所有Java类添加到新的src文件夹中。我应该折射代码吗

将WebContent文件夹中的所有ExtJS代码添加到Portlet的docroot>js>extjs3文件夹中

修改的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: [{

五,。。修改后的liferay-portlet.xml，其行如下所示：

/js/extjs3/adapter/ext/ext-base.js

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

这是我的。 我的新ExtJSPortlet覆盖了所有页面，几乎不包含任何内容。假设数据表在右栏，文件管理器在左栏。现在您可以看到唯一一个将文件树和表分开的条

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

---

感谢阅读。

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

这就是我为大型Sencha应用程序修复它的方法，该应用程序幸运地将所有内容包装到Ext.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
  ]
});

现在，在view.jsp（portlet）中放置以下内容：

然后设置Sencha面板并将其放入视口对象中：

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\u PARENT）文本似乎还不能解决问题，但是

现在在ext-all.js中替换此

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

与

其中Repository.Config.GUI\u PARENT只是一个常量：“root”

---

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

您是否尝试将css添加到portlet中，而不是作为额外的主题？