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

Question

我在 Sencha Touch 2 中有一个 ActionSheet 和一个面板。我想在面板中单击图标地图时显示 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'
        }
    }

});

询问.js

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

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

});

Answer 1

您可以通过在tab项目对象内的选项卡中添加一个侦听器来做到这一点。

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

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

Answer 2

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

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

代替

.showBy('settingsTab')

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

希望这会有所帮助。