如何在Sencha Touch 2中单击面板时显示叠加层

时间:2012-05-08 22:28:49

标签: javascript sencha-touch-2

我在Sencha Touch 2中有一个ActionSheet和一个Panel。我想在面板中点击图标地图时显示ActionSheet叠加层,我该怎么做?

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'
        }
        ]
    }

});

2 个答案:

答案 0 :(得分:3)

您可以通过向项目的tab对象内的标签添加监听器来实现此目的。

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

在该侦听器中,我们创建了一个app.view.takePhoto类的新实例并显示它。

答案 1 :(得分:0)

将show()更改为showBy()后,我遇到了同样的问题。 指定html id而不是组件可以解决问题

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

而不是

.showBy('settingsTab')

似乎只能在DOM元素上调用该方法。

希望这会有所帮助。