Question

我想使用现有的HTML渲染面板。

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

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

我的想法是，我想使用DIV“小部件”创建一个面板，并且面板的内容是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

希望这会有所帮助。

ExtJs：使用现有HTMl渲染面板

1 个答案: