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

如何使用自定义HTML制作自己的Component？

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，其中包含一个将新组件添加到容器的简单示例。

ExtJS - 如何呈现html元素

1 个答案: