CODEWITHSUNDEEP
javascriptsencha-touch-2
lito
lito

Reputation: 3125

How to show a overlay when Panel is clicked in Sencha Touch 2

I have an ActionSheet and a Panel in Sencha Touch 2. I want to show the ActionSheet overlay when the icon-map is clicked in the panel, how can I do that?

Panel.js

Ext.define('app.view.principalTabPanel', {
    extend: 'Ext.tab.Panel',

    config: {
        ui: 'light',
        items: [
            {
                xtype: 'mappanel',
                title: 'Map',
                iconCls: 'locate'
            }
        ],
        tabBar: {
            docked: 'bottom',
            ui: 'light'
        }
    }

});

asking.js

Ext.define('app.view.takePhoto', {
    extend: 'Ext.ActionSheet',

    config: {
        items: [
        {
            text: 'Delete draft',
            ui  : 'decline'
        },
        {
            text: 'Save draft'
        },
        {
            text: 'Cancel',
            ui  : 'confirm'
        }
        ]
    }

});

Upvotes: 1

Views: 4101

Answers (2)

d2uX
d2uX

Reputation: 241

I ran into the same problem after changing show() to showBy(). Specifying the html id instead of the component did the trick

.showBy(Ext.get('ext-tab-5'));

instead of 

.showBy('settingsTab')

seems like the method can only be called on DOM elements.

Hope this helps somehow.

Upvotes: 0

rdougan
rdougan

Reputation: 7225

You can do this by adding a listener to your tab inside the tab object of your item.

{
    xtype: 'mappanel',
    title: 'Map',
    iconCls: 'locate'
    tab: {
        listeners: {
            tap: function() {
                var sheet = Ext.create('app.view.takePhoto');
                sheet.show();
            }
        }
    }
}

Inside that listener, we create a new instance of your app.view.takePhoto class and show it.

Upvotes: 3

Related Questions