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製作自己的Component？

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，寬度，填充，和id），它會產生最外部正確地核實。內部html僅通過html配置。現在，您可以管理組件，而無需直接處理html元素。

Here is a fiddle有一個過度簡單的將新組件添加到容器的示例。