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