是否可以在 extjs 面板中显示 div 的内容？答案

【问题标题】：Is it possible to display the contents of a div in extjs panel?是否可以在 extjs 面板中显示 div 的内容？
【发布时间】：2011-10-10 03:27:47
【问题描述】：

我有一些预先存在的 js 代码通过 DOM 操作 div。我有一个带有边框布局的Ext.container.Viewport。我想在视口中心区域的面板中显示div 的内容。

HTML

<div id="contents"></div>

EXTJS

Ext.create('Ext.container.Viewport', {
  layout: 'border',
  items: [{
    region: 'north',
    ...
  }, {
    region: 'center',
    items: [{          
        // #contents;
    }]
  ]}
});

【问题讨论】：

标签： javascript html extjs extjs4

【解决方案1】：

您可能对contentEl 配置选项感兴趣。来自文档：

指定现有的 HTML 元素，或现有 HTML 元素的 id 用作该组件的内容。

此配置选项用于获取现有 HTML 元素并将其放置在新组件的布局元素中（它只是在组件渲染后移动指定的 DOM 元素以用作内容。

文档中有一些附加说明，但听起来正是您要查找的内容。

【讨论】：

看起来正在工作；这听起来不太好：“使用的指定 HTML 元素不会参与组件可能使用的任何布局方案。它只是 HTML。布局对子项进行操作。” 但是，从我的有限的测试，看起来border布局正在生效。
@wulfgar.pro，是的，那个注释是说它不会被父级调整大小，它会像常规 div 一样占用整个宽度而不是高度

【解决方案2】：

NT3RP 是正确的，contentEl 是你需要的。这是一个代码sn-p：

Ext.create('Ext.container.Viewport', {
            layout : {
                type : 'border'
            },
            items : [ {
                region : 'north',
                contentEl : 'header',   //content read from html div#header
                id : 'mainHeader'
            },

顺便说一下，视口中任何区域的默认 xtype 都是面板 - 因此您不必创建新面板。

【讨论】：

【解决方案3】：

另一种选择是使用 Ext.panel.Panel 的 html 属性。

这与 API 中描述的 contentEl 略有不同，但执行类似的任务。

【讨论】：

我尝试将 DOM 组件分配给 html 配置 - 这没有按预期工作。