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>

谢谢。

- stackato

Answer 1

尝试使用自定义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元素。 这里有一个过度简单的示例，演示如何向容器添加新组件：示例链接。

- cpastore84