Question

我在过去几天刚刚开始与Sencha Touch合作，我遇到了几个问题。主要的是，当处理任何不经常进行用户点击交互的事情（标题栏，html文本等等一些随机例子）时，是否可以点击这样的事情并让面板出现。

我知道有了按钮和其他东西，你有一个水龙头，项目标签等，但我不确定这样的例子。任何帮助将通过示例得到赞赏。

Answer 1

是的，你可以。在这里查看我的博客文章：http://www.senchahackers.com/touch/multiple-tap-listeners-one-xtemplate/，它解释了如何做到这一点。

基本上你可以在任何元素上监听点击事件，只要你将它添加到'委托'列表中

在您看来：

    listeners: {

        tap: {
            element: 'element',
            delegate: '.app-box, .doc-box, .bubble-holder',

            fn: function(e){
                var url = e.target.name,
                    divClassName = e.delegatedTarget.className,
                    appbox = "app-box",
                    docbox =  "doc-box",
                    bubble = "bubble-holder";

                console.log(divClassName);

                switch(divClassName){

                    case docbox :
                        //lets say you have an element '.doc-box' that you want to click and show the panel
                        // show the panel, which is a separate file, shown below                             
                        var profileController = YourApp.getController('YourController');
                        //call the showProfilePanelPopup() method in your controller, passing in this as the element that shows it
                        profileController.showProfilePanelPopup(this);
                        break;

                    case appbox :
                        alert(appbox);
                        break;

                    case bubble :
                        alert(bubble);
                        break;
                }
            }
        }
    }

然后在你的控制器中：

extend: 'Ext.app.Controller',
config: {
    refs: {
        profilePanelPopup: {
            autoCreate: true,
            selector: '#profilePanelPopup',
            xtype: 'profilePanelPopup'
        }
    }
},

showProfilePanelPopup: function(btn, action, values) {
    var me = this;
    var popup = me.getProfilePanelPopup();

    popup.showBy(btn);

    popup.on('hide', function () {
        popup.destroy();
    }, this);
}

假设您的views目录中有一些Panel，如下所示：

Ext.define('App.view.ProfileNowPop', {
    extend : 'Ext.Panel',
    alias: 'widget.profileNowPop',
    xtype: 'profilePanelPopup',
    config: {
        height: (Ext.os.deviceType != "Desktop") ? "35%" : 253,
        cls:'profilePop',
        left: '1%',
        padding: 0,
        top: '1%',
        width: (Ext.os.deviceType != "Desktop") ? '40%' : '36%',
        hideOnMaskTap: true,
        modal: {
            cls:'opaquemask'
        },
        scrollable: false,
        store: 'ProfilePopStore',
        model: 'App.model.ProfilePopModel',
        items:[
            {
                xtype: 'fieldset',
                items: [
                    {
                        xtype: 'textfield',
                        id: 'gradePopField0',
                        cls: 'gradePopField',
                        style: 'background: #f7f7f5',
                        listeners: {
                            initialize: function(ele, eOpts) {
                                this.setReadOnly(true);
                            }
                        }
                    }
                ]
            }
        ]
    },

    initialize: function() {
        this.callParent(arguments);
    }
});

单击文本后面板外观

1 个答案: