Panel Appearance After Clicking On Text

Question

I've just started working with Sencha Touch over the past couple days and I've run into a few questions. The main one is, when working with anything that doesn't regularly have user click interaction (titlebar, html text, etc for some random examples), is it possible to click on things like this and get a panel to appear.

I know that with buttons and other things, you have a tap, itemtap, etc, but I'm not sure about instances like this. Any help would be appreciated with examples.

jakeforaker · Answer 1 · 2014-08-30T15:48:51.660

Yes you can. Check out my blog post here: http://www.senchahackers.com/touch/multiple-tap-listeners-one-xtemplate/ that explains exactly how to do that.

Basically you can listen for a tap event on any element, as long as you add it to the list of 'delegates'

In your view:

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

Then in your controller:

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

Assuming you some Panel in your views directory like 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);
    }
});

Panel Appearance After Clicking On Text

1 Answers1