ExtJS -- how to render an html element -


i have image , when clicked want show html ( div text , buttons). know can use html config in window or panel possible show element without being encapsulated in component?

here code image , 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 html want show. fancy tooltip, thats all. , since tooltip dont want encapsulate in 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.

how making own component 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 component use div render element, applying outer html attributes component (cls, width, padding, , id) generate outer div correctly. inner html passed through html config. can manage component without having deal html elements directly.

here fiddle overly simple example of adding new component container.


Comments

Popular posts from this blog

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -

YouTubePlayerFragment cannot be cast to android.support.v4.app.Fragment -