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

时间:2014-01-13 11:21:02

标签: javascript dom extjs

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

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

1 个答案:

答案 0 :(得分:6)

您可以使用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