Ext.view.View：アイテム内の要素のMouseenterイベントとMouseleaveイベント

Question

ストアにバインドされたカスタムビューがあり、ストアの各レコードに対してitemTplを描画します。

itemTplには、レコード内の配列を反復処理して複数のdivを生成するサブテンプレートがあります。

生成された各サブテンプレート要素のmouseover/mouseoutイベントにイベントハンドラをアタッチしようとしています。私はビューを含むパネルのアフターレンダリングイベントハンドラにイベントハンドラをアタッチしようとしています。親パネルのafterrenderイベントが実行され、イベントハンドラをアタッチするためのコードも実行されていることがわかります。

しかし、私のハンドラは決して解雇されません。何か案は？

itemTpl：

 this.itemTpl = ["<div>{label}</div>", 
        "<div class='ph_horz_carousel' id='ph_horz_carousel_{#}' style='display:none'>", 
         "<tpl for=\"subitems\">", 
          "<div class='ph_horz_item' id='horz_item_{#}' subitem_id='{#}'>", 
           "<img src='{inactive_img}' bsrc='{active_img}'/>", 
           "<span>{label}</span>", 
          "</div>", 
         "</tpl>", 
         "<div class='clear'></div>", 
        "</div>", 
        "<div class='clear'></div>"]; 

サンプルレコード：

{ 
     label: 'Movies', 
     subitems:[ 
      { 
       label: 'super', 
       active_img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CD_autolev_crop.jpg/220px-CD_autolev_crop.jpg', 
       inactive_img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CD_autolev_crop.jpg/220px-CD_autolev_crop.jpg', 
       launch_info: { 
        type: 'url', 
        target: '' 
       } 
      } 
     ] 
    } 

イベントハンドラ：で実際にjsfiddle

：

Ext.query('.ph_horz_item', p).forEach(function(el){ 
         var E = Ext.get(el); 
         E.removeAllListeners(); 
         E.on({ 
          mouseover: { 
           fn: function(){ 
            alert('it worked'); 
            debugger; 
           } 
          } 
         }); 
        }); 

Answer 1

は、この実施例をチェックしてください、あなたはこれは必須の設定ですビューのitemSelector

itemSelector

を指定する必要があります。このDataViewを使用するノードを決定するために使用されるシンプルなCSSセレクタ（div.some-classまたはspan：first-childなど）。 itemSelectorは、DOMノードをレコードにマップするために使用されます。そのため、各レコードのセレクタに一致するルートレベル要素が1つのみ存在する必要があります。

のでViewは自動的にあなたのためのイベントをフックし、あなたはそれらのitemmouse*イベントのいずれかを使用することができます。