2

私は 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);
        }
    }
})
4

1 に答える 1

0

最終的にこれに対する解決策を得た、

これは、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");
                            }
                        }
                    });
                }
            }

とにかく、ありがとう。

于 2013-08-20T08:29:37.173 に答える