Ext.view.View: события Mouseenter и Mouseleave для элементов в itemTpl

Question

У меня есть пользовательское представление, привязанное к хранилищу, которое отображает itemTpl для каждой записи в хранилище.

В itemTpl есть подшаблон, который перебирает массив в записи, чтобы получить несколькоdivs.

Я пытаюсь прикрепить обработчик событий к событиям 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: ''
                }
            }
        ]
    }

Обработчик события:

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

Проверьте этот рабочий пример: jsfiddle

Фактически в Ext.view.View вам нужно указать itemSelector представления

itemSelector

Это обязательная настройка. Простой селектор CSS (например, div.some-class или span: first-child), который будет использоваться для определения, с какими узлами будет работать этот DataView. ItemSelector используется для сопоставления узлов DOM с записями. Таким образом, для каждой записи должен быть только один элемент корневого уровня, соответствующий селектору.

Так что View будет автоматически перехватывать события для вас, и вы можете использовать любое из их itemmouse* событий.