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

Как насчет создания собственного Component с вашим пользовательским 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 атрибуты компонента (ЦБС, ширина, обивка, и идентификатор) он будет генерировать внешний наиболее Див правильно. Внутренний html просто передается через конфигурацию html. Теперь вы можете управлять своим компонентом без необходимости напрямую обращаться к элементам html.

Here is a fiddle с чрезмерно простым примером добавления нового компонента в контейнер.