extjs - 将组件绘制到容器中

Question

我试图在点击事件时将组件绘制到容器上，它似乎确实在绘制，除了它在容器上不可见。这是进一步澄清的代码。

Ext.define("TapCheck.view.NewTap",{
  extend: 'Ext.Container',
  fullscreen: true,
  id: 'tappy',
    initialize: function() {
      this.callParent(arguments);
      var padElement = Ext.get('tappy');
      padElement.on(['tap'],
      'onTouchPadEvent', this);
  },
  config: {
      flex: 1,
      margin: 10,
      layout: {
          type: 'vbox',
          pack: 'center',
          align: 'stretch'
      },
      items: [
          {
              html: 'Touch here!'
          }
      ]
      },
          onTouchPadEvent: function(e, target, options, eventController) {
                         var component = new Ext.draw.Component({
                                items: [{
                                  type: 'ellipse',
                                  cx: 100,
                                  cy: 100,
                                  rx: 40,
                                  ry: 25,
                                  fillStyle: 'blue'
                                }]
                              });
      console.log('X: ' + e.getPageX() + ' Y: ' + e.getPageY());
     Ext.getCmp('tappy').add([component]);
  }
});

请让我知道我错在哪里或者甚至可以这样做吗？

Answer 1

我已经更新了你的一些代码。最大的变化是：

• 删除了id配置。不要经常使用它，尤其是在定义组件时。
• 在initialize&onTouchPadEvent函数中，只需使用 . 引用组件即可this。
• 创建具有该Ext.create功能的组件。

尝试这个：

Ext.define("TapCheck.view.NewTap",{
    extend: 'Ext.Container',
    fullscreen: true,
    initialize: function() {
        var me = this;
        me.callParent(arguments);
        me.on('tap', me.onTouchPadEvent, this);
    },
    config: {
        flex: 1,
        margin: 10,
        layout: {
            type: 'vbox',
            pack: 'center',
            align: 'stretch'
        },
        items: [{
            html: 'Touch here!'
        }]
    },
    onTouchPadEvent: function(e, target, options, eventController) {
        var component = Ext.create('Ext.draw.Component',{
            items: [{
                type: 'ellipse',
                cx: 100,
                cy: 100,
                rx: 40,
                ry: 25,
                fillStyle: 'blue'
            }]
        });
        console.log('X: ' + e.getPageX() + ' Y: ' + e.getPageY());
        this.add(component);
    }
});