Question

我尝试在sencha touch 2.3.x中实现一个简单的View，它是一个“弹出窗口”。

我的NavBar中有一个按钮，我会显示一个列表，一个搜索视图和一个按钮，以取消此弹出窗口。

但是当我点击取消按钮时尝试隐藏或删除弹出窗口时，这不起作用..

以下是我的控制器主要方法：

Ext.define('Kone.controller.Equipment', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            buttonEquipment: 'button#buttonEquipment'
        },

        control: {
            "searchfield#mysearchfield": {
                keyup: 'onSearchfieldKeyup'
            },
            "button#buttonEquipment": {
                tap: 'onButtonTap'
            }
        }
    },


    onButtonTap: function(button, e, eOpts) {
        //get the configuration of the list
                var listConfiguration = this.getListConfiguration();

                //check if the device is a phone
                if (!Ext.os.is.Phone) {

                    //add a panel into the viewport
                    Ext.Viewport.add({
                        //panel gets special styling when it is floating
                        xtype: 'panel',

                        //give it a fixed width and height
                        width: 380,
                        height: 420,

                        //center the panel
                        centered: true,

                        //modal gives it a mask
                        modal: true,

                        //disable the hide on mask tap functionality of modal
                        hideOnMaskTap: false,

                        //give it a fit layout so the list item stretches to the size of this panel
                        layout: 'fit',

                        //give it 1 item which is the listConfiguration
                        items: [listConfiguration]
                    }).show();

                } else {

                    //add the list into the viewport
                    Ext.Viewport.add(this.listConfiguration);

                }
    },

    getListConfiguration: function() {
         return {
                    id:'equipmentPanel',

                    //give it an xtype of list
                    xtype: 'list',

                    ui: 'round',

                    pinHeaders: false,

                    //itemTpl defines the template for each item in the list
                    itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',

                    //give it a link to the store instance
                    store: this.getStore(),

                    useSimpleItems: true,

                    grouped: true,
                    emptyText: '<div style="margin-top: 20px; text-align: center">Aucun équipement correspondant..</div>',
                    disableSelection: true,

                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',

                            items: [
                                { xtype: 'spacer' },
                                {
                                    xtype: 'searchfield',
                                    placeHolder: 'Equipement...',
                                    listeners: {
                                        scope: this,
                                        clearicontap: this.onSearchClearIconTap,
                                        keyup: this.onSearchKeyUp
                                    }
                                },
                                { xtype: 'spacer' }
                            ]
                        },
                        {
                            xtype: 'button',
                            itemId: 'retourButton',
                            text: 'Retour',
                            docked: 'bottom',
                            handler : function(){

                                Ext.getCmp('equipmentPanel').hide();

                            }
                        }
                    ]
                };
    }

});

此代码：

    xtype: 'button',
    itemId: 'retourButton',
    text: 'Retour',
    docked: 'bottom',
    handler : function(){

   Ext.getCmp('equipmentPanel').hide();

     }

仅隐藏内容（列表+按钮..），但白色网格背景保持在我的视图之上。并删除方法不起作用..

Answer 1

您正在隐藏“列表”，而不是包含列表的“面板”。很可能，您看到的白色背景属于面板。

Answer 2

hideOnMaskTap: false, -> hideOnMaskTap: true,

使用Viewport弹出窗口从不隐藏Sencha

2 个答案: