html - 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 属性应用于组件(cls、width、padding 和 id)它将正确生成最外层的 div。内部 html 只是通过 html 配置传递。现在您可以管理您的组件，而不必直接处理 html 元素。

Here is a fiddle使用一个将新组件添加到容器的过于简单的示例。