Extjs 6：添加模态 window 不会屏蔽 tbar 和 header

Question

我有一个视图充当我的网格的容器。此视图拥有一个 tbar 和一个 header.

当我添加模态 window 时，header 和 tbar 未被屏蔽。

主视图：

Ext.define('myApp.view.customer.MyMain', {
    extend: 'Ext.panel.Panel',
    xtype: 'hlx-customermain',

    controller: 'maintoolbar',

    plugins: 'viewport',
    header: {
        xtype: 'myheader'
    },
    tbar: {
        xtype: 'mytoolbar'
    },

    items: [
        {
            xtype: 'mygrid'
        }
    ]


});

网格（使用控制器添加window）

    Ext.define('myApp.view.customer.MyGrid', {
        extend: 'Ext.grid.Panel',
        xtype: 'mygrid',

        tbar: {
            xtype: 'mygridtoolbar'
        },

        controller: 'mygrid',

        store: 'MyGridStore',

        columns: [
        ...
        ]

    });

函数来自 ViewController

onCustomerAddClick: function () {
        var me = this,
            addCustomerWindow = me.lookupReference('addCustomerWindow');

        if (!addCustomerWindow) {
            addCustomerWindow = new myApp.view.customer.AddCustomer();

            me.getView().ownerCt.add(addCustomerWindow);
        }

        addCustomerWindow.show();
    }

即使我将它添加到 ownerContainer - 即 MyMain-class - tbar 和 header 也没有被屏蔽。看到这个fiddle自己体验错误：https://fiddle.sencha.com/#fiddle/uih

Answer 1

您不必将其添加到它的所有者或其他任何地方。只需这样做：

onAddCustomerClick: function () {
    /*var me = this,
        myWindow = me.lookupReference('myWindow');

    if (!myWindow) {
        myWindow = new MyWindow();
        me.getView().ownerCt.add(myWindow);
    }

    myWindow.show();*/
    var myWindow = Ext.create('MyWindow');

    myWindow.show();
}

Extjs 6：添加模态 window 不会屏蔽 tbar 和 header

Extjs 6: Adding modal window doesn't mask tbar and header

javascript

extjs

extjs6