Sencha模型像摧毁时的视图

Question

我希望像模型一样向容器添加视图，当用户触摸视图外部时，必须隐藏或销毁它。有没有办法屏蔽父容器或viewPort并处理该掩码中的tap事件。

上面的屏幕显示了它的工作电流，但是当用户在菜单外单击时，列表列表会收到事件但是当菜单可见时我想要关闭菜单，如何执行此操作。

代码：

Ext.define('MyApp.view.ControlPanel.ControlPanel', {
    extend: 'Ext.Container',
    alias: "widget.controlpanel",
    config: {
        layout: {
            pack:'stretch'
        },
        docked:'bottom'//Becuase I want this whole view to docked to bottom of parent
    },
    listeners: [
            ],
    initialize: function () {
        //Ext.require("");
        var segmentedButton = Ext.create('Ext.SegmentedButton', {
            layout: {
                type: 'hbox',
                pack: 'center',
                align: 'stretchmax'
            },
            docked:'bottom',
            allowMultiple: false,
            allowDepress: true,
            config: { flex: 1 },
            items: [
                {
                    iconCls: 'time',
                    width: '50%',
                    cls:'palin-segment',
                    style:"border-radius:0px"
                },
                {
                    iconCls: 'settings',
                    width: '50%',
                    cls: 'palin-segment',
                    style: "border-radius:0px"
                }
            ],
            listeners: {
                toggle: function (container, button, pressed) {
                    console.log(button);
                    var index = container.getItems().indexOf(button);
                    if (index ==0) {
                        if(pressed)
                        {
                            container.setPressedButtons();
                            var settingListContainer = this.down("#setting-list-container");
                            if (settingListContainer) {
                                this.remove(settingListContainer, true);
                            }
                        }
                    }
                    else {
                        var settingListContainer = this.down("#setting-list-container");
                        if (settingListContainer) {
                            this.remove(settingListContainer, true);
                        }
                        else {
                            var existingList = Ext.ComponentQuery.query('settingList')[0];
                            if (existingList) {
                                this.add(existingList);
                            }
                            else {
                                this.add({ xtype: "settingList", height: '349px' });
                            }
                        }
                    }
                }
            }
        });
        this.add(segmentedButton);

    }
});