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

Question

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

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

Answer 1

您可以使用contentElconfig属性.在此配置中,您可以指定现有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()
});