Question

我有一个自定义视图，绑定到商店，为商店中的每条记录呈现一个itemTpl。

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

Answer 1

查看此工作示例：jsfiddle

实际上在Ext.view.View中，您需要指定视图的itemSelector

itemSelector

这是必需的设置。一个简单的CSS选择器（例如div.some-class或span：first-child），用于确定此DataView将使用哪些节点。 itemSelector用于将DOM节点映射到记录。因此，应该只有一个根级别元素与每个记录的选择器匹配。

因此View会自动为您抓取事件，您可以使用他们的itemmouse*个事件。

Ext.view.View：itemTpl中元素的Mouseenter和Mouseleave事件

1 个答案: