ExtJS: wrapping pre-existing div into Extjs container

Question

I wonder if there's a method of creating an Extjs container or a panel with the contents taken from a pre-existing element in the page DOM. The page already contains the needed markup in a div, but i'd like to wrap it inside an extjs container and place it into Extjs managed layout.

If you ask why: I'm using ASP.Net MVC templating for creating page markup and would like to keep it this way instead of building the DOM client-side in Javascript or using XTemplates. I'd like to build the html in traditional way and then use client-side Extjs code to set up few containers and layout manager for them.

Answer 1

You can use contentEl config property. In this config you can specify an existing HTML element, or the id of an existing HTML element to use as the content for component.

HTML inside body:

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

ExtJS panel with div used as its content:

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

Fiddle with live example: https://fiddle.sencha.com/#fiddle/2ji