ExtJS -- how to render an html element

Question

I have an image and when its clicked I want to show some html ( a div with some text and buttons). I know I can use the html config in a window or panel but is it possible to show the element without it being encapsulated in a component?

Here is the code for the image and click handler:

{

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

} }

Here is the html I want to show. All it is really is a fancy tooltip, thats all. And since its a tooltip i dont want to encapsulate it in a window:

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

thanks.

Answer 1

How about making your own Component with your custom 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>'
  ]
});

By default a component will use a div to render your element, so by applying the outer html attributes to the component (cls, width, padding, and id) it will generate the outer most div correctly. The inner html is just passed through the html config. Now you can manage your component without having to deal with the html elements directly.

Here is a fiddle with an overly simple example of adding the new component to a container.