ExtJS - 如何呈現html元素

Question

我有一個圖像，當它點擊它時，我想顯示一些HTML（帶有一些文本和按鈕的div）。 我知道我可以在窗口或面板中使用html配置但是可以顯示元素而不將其封裝在組件中嗎？

以下是圖像和單擊處理程序的代碼：

{

  xtype:"image",   
  src:"/blah/helpicon.png",
  listeners:{
   render: function (c) {
     c.getEl().on('click', function(e) {
    //show html here, targeted on image icon
  }, c);
}

}}

這是我要展示的HTML。 所有這一切都是一個花哨的工具提示，就是這樣。 由於它是一個工具提示，我不想將其封裝在一個窗口中：

    <div id="test" class="hopscotch-bubble-container" style="width: 280px; padding: 15px;"><span class="hopscotch-bubble-number">1</span>
      <div class="hopscotch-bubble-content"><h3 class="hopscotch-title">Step 1</h3>
        <div class="hopscotch-content">Step 1 Instructions here.</div>
      </div>
     <div class="hopscotch-actions">
       <button id="hopscotch-prev" class="hopscotch-nav-button prev hide">Back</button>
       <a class="hopscotch-bubble-close" href="#" title="Close">Close</a>
     </div>

謝謝。

Answer 1

如何使用自定義html制作自己的組件 ？

Ext.define('mycomponent', {
  extend: 'Ext.Component',
  cls: 'hopscotch-bubble-container',
  width: 280,
  padding: 15,
  id: 'test',
  html: [
    '<span class="hopscotch-bubble-number">1</span>',
    '<div class="hopscotch-bubble-content"><h3 class="hopscotch-title">Step 1</h3>',
    '<div class="hopscotch-content">Step 1 Instructions here.</div>',
    '</div>',
    '<div class="hopscotch-actions">',
    '<button id="hopscotch-prev" class="hopscotch-nav-button prev hide">Back</button>',
    '<a class="hopscotch-bubble-close" href="#" title="Close">Close</a>'
  ]
});

默認情況下， component將使用div來渲染元素，因此通過將外部html屬性應用於組件（cls，width，padding和id），它將正確生成最外層的div。 內部html只是通過html配置傳遞。 現在，您可以管理組件，而無需直接處理html元素。

這里有一個簡單的例子，它將新組件添加到容器中。