ExtJS：将预先存在的div包装到Extjs容器中

Question

我想知道是否有一种创建Extjs容器或面板的方法，其内容取自页面DOM中预先存在的元素。页面已经在div中包含了所需的标记，但是我想将它包装在extjs容器中并将其放入Extjs托管布局中。

如果你问为什么：我正在使用ASP.Net MVC模板创建页面标记，并希望保持这种方式，而不是在Javascript或使用XTemplates构建DOM客户端。我想以传统方式构建html，然后使用客户端Extjs代码为它们设置几个容器和布局管理器。

Answer 1

您可以使用contentEl配置属性。在此配置中，您可以指定现有的HTML元素，或现有HTML元素的id，以用作组件的内容。

正文中的HTML：

<div id="panelContent">
    Content inside panelContent div
</div>  

使用div作为其内容的ExtJS面板：

Ext.create('Ext.panel.Panel', {
    title: 'Test Panel',
    width: 200,
    contentEl: 'panelContent',
    renderTo: Ext.getBody()
});

摆弄实例：https://fiddle.sencha.com/#fiddle/2ji