3

パネルに html があります。

styleHtmlContent: true,
scrollable: true,

items: {
    docked: 'top',
    xtype: 'titlebar',
    title: 'List'
        },
    html: [
        "<div style='border-radius: 4px;' class='abutton' id='abuttonbyid'>",
        "Text</div>"
    ].join("")

そして私のコントローラーで

config: {
    refs: {
        abutton: '.abutton',
        abuttonbyid:'#abuttonbyid'
    },

    control: {
        abutton: {
            tap: 'onButtonTap'
        },
        abuttonbyid : {
            tap: 'onButtonTap'
        }
    },
},

onButtonTap: function() {
  console.log("Tapped");
}

div ボタンがタップさTappedれると、js コンソール/Web インスペクターにアクセスしたいのです。イベントリスナーを1つではなく多くのdivボタンにアタッチしたいので、クラスとidを持つ要素の両方を使用しました。多くの div ボタン、1 つのイベント。

Sencha ボタンの代わりに html ボタンを使用する必要があります。

4

1 に答える 1

4

タイトルバーにボタンを追加してみませんか?

items: {
  docked: 'top',
  xtype: 'titlebar',
  title: 'List',
  items: [
    {
      xtype: 'button',
      text: 'Tap Me',
      handler: function() { console.log("button tap"); }
    }
  ]
}

編集: html を使用する必要があると言うので (これは推奨されません)、DOM ノードに委任されたカスタム リスナーを追加できます。

items: {
  docked: 'top',
  xtype: 'titlebar',
  title: 'List',
  html: [
    "<div style='border-radius: 4px;' class='abutton' id='abuttonbyid'>",
    "Text</div>"
  ].join(""),

  // The new "listeners" code...
  listeners: {
    tap: {
      fn: function(event, el){ console.log("tapped!"); },
      element: 'element',
      delegate: '#abuttonbyid'
    }
  }
}

参考までに、このドキュメント on event delegationを参照してください。

于 2013-02-07T17:31:09.190 に答える