ExtJs: Render panel using existing HTMl

Question

I want to render a panel using existing HTML.

The idea is that I have a code like this :

<div id="widget" class="widget">
  <div class="widget-content>
    <span> blabla </span>
    // some content here
  </div>
</div>

And the idea is that I want to create a panel using the DIV "widget" and that the content of the panel is the div "widget-content".

To explain a little bit, I receive from an external source an HTML page, and I want to add some interactivity/functionality to this page using ExtJs.

Using renderTo, what I was able to do right now is something like that:

<div id="widget" class="widget">
  <div class="widget-content>
    <span> blabla </span>
    // some content here
  </div>
  <div id="panel-1152" class="x-panel x-panel-default x-border-box" style="height: 36px;">
      <div id="panel-1152_header" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-horizontal-noborder x-panel-header-horizontal-noborder x-panel-header-default-horizontal-noborder x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top x-noborder-trl" style="width: 1389px; right: auto; left: 0px; top: 0px;"> ... </div>
      <div id="panel-1152-body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" style="width: 1389px; left: 0px; top: 36px; height: 0px;">        ... </div>
</div>

Using render to after the load of my page. But what I want to achieve is something like:

<div id="widget" class="widget x-panel x-panel-default x-border-box">
      <div id="panel-1152_header" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-horizontal-noborder x-panel-header-horizontal-noborder x-panel-header-default-horizontal-noborder x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top x-noborder-trl" style="width: 1389px; right: auto; left: 0px; top: 0px;"> ... </div>
      <div id="panel-1152-body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" style="width: 1389px; left: 0px; top: 36px; height: 0px;">        
        <div class="widget-content>
           <span> blabla </span>
           // some content here
        </div>
     </div>
</div>

Thanks in advance

Answer 1

You could do this a couple of different ways.

If all you want is the html inside of the panel, just use the html config option http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-cfg-html

If you want to dynamically add it use getCmp('selector').body.update(yourhtmlhere) http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.dom.Element-method-update

you could also use contentEl to specify an existing element in the html that you want to move into the panel http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.AbstractComponent-cfg-contentEl

hope this helps.