저장소에 바인딩 된 사용자 지정보기가있어 저장소의 각 레코드에 대해 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;
}
}
});
});