Javascript 单击文本后的面板外观

在过去的几天里，我刚刚开始与Sencha Touch合作，我遇到了一些问题。主要的一点是，当处理任何不经常有用户点击交互的东西（标题栏、html文本等，对于一些随机示例），是否可以点击这样的东西并显示一个面板

---

我知道按钮和其他东西，你有一个点击，项目点击等，但我不确定这样的例子。如有任何帮助，请举例说明

是的，你可以。看看我在这里的博文：这正好解释了如何做到这一点

基本上，您可以监听任何元素上的点击事件，只要您将其添加到“委托”列表中

在你看来：

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

假设您的视图目录中的某个面板如下所示：

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