將組件拖入一個容器

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); 
    } 
});