2011-10-25 2 views
1

저장소에 바인딩 된 사용자 지정보기가있어 저장소의 각 레코드에 대해 itemTpl을 렌더링합니다.Ext.view.View : itemTpl의 요소에 대한 Mouseenter 및 Mouseleave 이벤트

itemTpl에는 여러 div를 생성하기 위해 레코드의 배열을 반복하는 하위 템플릿이 있습니다.

생성 된 각 하위 템플리트 요소에 대해 mouseover/mouseout 이벤트에 이벤트 핸들러를 연결하려고합니다. 내보기를 포함하는 패널의 Afterrender 이벤트 처리기에 이벤트 핸들러를 연결하려고 시도하고 있습니다. 부모 패널의 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: '' 
       } 
      } 
     ] 
    } 

이벤트 핸들러 :

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

답변

2

체크 아웃이 작동 예 : jsfiddle 사실

를의, 당신은보기

itemSelector

이 필수 설정입니다의 itemSelector을 지정해야합니다. 이 DataView에서 사용할 노드를 결정하는 데 사용되는 간단한 CSS 선택기 (예 : div.some-class 또는 span : first-child)입니다. itemSelector는 DOM 노드를 레코드에 매핑하는 데 사용됩니다. 따라서 각 레코드의 선택기와 일치하는 루트 수준 요소가 하나만 있어야합니다.

그래서 View은 자동으로 이벤트를 후킹하며, itemmouse* 이벤트 중 하나를 사용할 수 있습니다.