Question

我有一些预先存在的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;
    }]
  ]}
});

Answer 1

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

指定现有HTML元素，或现有HTML元素的ID，以用作此组件的内容。

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

文档中还有一些其他注释，但听起来就像你正在寻找的那样。

Answer 2

NT3RP是正确的， contentEl 是您所需要的。这是一段代码：

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

顺便说一下，视口中任何一个传统的默认xtype是一个面板 - 所以你不必创建一个新的面板。

Answer 3

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

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

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

3 个答案: