1

タップのイベントでコンテナにコンポーネントを描画しようとしていますが、コンテナに表示されていないことを除いて描画しているようです。これは、さらに明確にするためのコードです。

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

どこが間違っているか教えてください。

4

1 に答える 1

0

コードの一部を更新しました。最大の変更点は次のとおりです。

  • 構成を削除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);
    }
});
于 2013-03-04T08:01:28.490 に答える