ExtJs：使用现有 HTMl 渲染面板

Question

我想使用现有的 HTML 呈现面板。

我的想法是我有这样的代码：

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

我的想法是我想使用 DIV“widget”创建一个面板，并且面板的内容是 div“widget-content”。

稍微解释一下，我从外部来源收到一个 HTML 页面，我想使用 ExtJs 向该页面添加一些交互性/功能。

使用 renderTo，我现在能做的就是这样：

<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>

在我的页面加载后使用渲染。 但我想要实现的是：

<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>

提前致谢

Answer 1

您可以通过几种不同的方式做到这一点。

如果您想要的只是面板内的 html，只需使用 html 配置选项 http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-cfg-html

如果您想动态添加它，请使用 getCmp('selector').body.update(yourhtmlhere) http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.dom.Element-method-update

您还可以使用 contentEl 指定 html 中要移动到面板中的现有元素http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.AbstractComponent-cfg-contentEl

希望这会有所帮助。