ExtJS - how to render html element
I have an image and when it is clicked I want to show some html (div with text and buttons). I know I can use html config in a window or panel, but is it possible to show an element without encapsulating it 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. This is all a really fancy tooltip, that's all. And since its a tooltip I don't want to encapsulate 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>
thank.
source to share
How about creating 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 be used 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 maximum div correctly. The internal html is simply passed through the config html
. Now you can manage your component without having to access html elements directly.
Here's a fiddle with an overly simple example of adding a new component to a container.
source to share