Sencha touch 2 自定义列表项按钮点击未触发

Question

我正在通过 sencha touch 2 开发一个混合移动应用程序。 现在我需要一个自定义组件来指定一个包含按钮的自定义列表项。

我的视图已按我的意愿呈现，但添加到列表项的按钮未按预期触发 TAP 事件。相反，在每次点击时，都会触发 ITEMTAP 事件，这会造成一些混乱。

有人可以建议我在哪里进行这项工作吗？

下面是我创建的自定义组件的代码：

var listView = {
            xtype : "list",
            id : "desk-list-search-results",
            cls : "desk-list-search-results-cls",
            selectedCls : "",
            defaultType:"desksearchlistitem",
            store : "deskstore",
            flex : 2
        };

这是自定义组件的代码

Ext.define("MyApp.view.DeskSearchListItem",{
    extend:"Ext.dataview.component.ListItem",
    requires:["Ext.Button"],
    alias:"widget.desksearchlistitem",
    initialize:function()
    {
        this.callParent(arguments);
    },
    config:{
        layout:{
            type:"hbox",
            align:"left"
        },
        cls:'x-list-item desk-search-list-item',
        title:{
            cls:"desk-list-item",
            flex:0,
            styleHtmlContent:true,
            style:"align:left;"
        },
        image:{
            cls:"circle_image",
            width:"28px",
            height:"28px"
        },
        button:{
            cls:'x-button custom-button custom-font bookdesk-button',
            flex:0,
            text:"Book",
            width:"113px",
            height:"46px",
            hidden:true
        },
        dataMap:{
            getTitle:{
                setHtml:'title'
            }
        }
    },
    applyButton:function(config)
    {
        return Ext.factory(config,Ext.Button,this.getButton());
    },
    updateButton:function(newButton,oldButton)
    {
        if(newButton)
        {
            this.add(newButton);
        }

        if(oldButton)
        {
            this.remove(oldButton);
        }
    },
    applyTitle:function(config)
    {
        return Ext.factory(config,Ext.Component,this.getTitle());
    },
    updateTitle:function(newTitle,oldTitle)
    {
        if(newTitle)
        {
            this.add(newTitle);    
        }
        if(oldTitle)
        {
            this.remove(oldTitle);
        }
    },
    applyImage:function(config)
    {
        return Ext.factory(config,Ext.Component,this.getImage());
    },
    updateImage:function(newImage,oldImage)
    {
        if(newImage)
        {
            this.add(newImage);
        }
        if(oldImage)
        {
            this.remove(oldImage);
        }
    }
})

Answer 1

终于找到解决办法了，

可以使用 listeners 对象在视图中完成。

这是它的代码示例。

listeners:{
                initialize:function()
                {
                    var dataview = this;
                    dataview.on("itemtap",function(list,index,target,record,event){
                        event.preventDefault();
                    });
                    dataview.on("itemswipe",function(list,index,target,record,event){
                        if(event.direction === "right")
                        {
                            var buttonId = target.element.down(".bookdesk-button").id;
                            var buttonEl = Ext.ComponentQuery.query("#"+buttonId)[0];
                            if(Ext.isObject(buttonEl))
                            {
                                buttonEl.setZIndex(9999);
                                buttonEl.show({
                                    showAnimation:{
                                        type:"slideIn",
                                        duration:500
                                    }
                                });
                                var listeners = {
                                    tap:function(btn,e,opt)
                                    {
                                        console.log("Button Tapped");
                                    }
                                };

                                buttonEl.setListeners(listeners);

                            }
                            else
                            {
                                console.log("This is not a valid element");
                            }
                        }
                    });
                }
            }

无论如何谢谢。