ExtJS6 启动模式 Window 来自 ViewController

Question

我正在尝试从 viewcontroller 中启动模式 window。考虑以下代码（也位于 https://fiddle.sencha.com/#fiddle/1335）：

Ext.application({
    name : 'Fiddle',
    launch : function() {
        Ext.define('Window1',{
            extend: 'Ext.window.Window',
            controller: 'winctrl',
            xtype: 'window1',
            initComponent: function(){
                Ext.apply(this,{
                    title:'Window 1',
                    width: 400,
                    height: 400,
                    layout: {type:'hbox',pack:'center',align:'middle'},
                    items:[{
                        xtype: 'button',
                        text: 'Click Me!',
                        handler: 'btnClickMeClick'
                    }]
                });
                this.callParent(arguments);
            }
        });
        Ext.define('Window2',{
            extend: 'Ext.window.Window',
            xtype: 'window2',
            initComponent: function(){
                Ext.apply(this,{
                    title: 'Window 2',
                    width: 200,
                    height: 200,
                    modal: true,
                    //renderTo: Ext.getBody(),
                    layout: {type:'hbox',pack:'center',align:'middle'},
                    items:[{
                        html: 'Modal Looks Odd',
                        listeners:{
                            afterrender: 'htmlRender'   
                        }
                    }]
                });
                this.callParent(arguments);
            }
        });
        Ext.define('WinCtrl',{
            extend: 'Ext.app.ViewController',
            alias:'controller.winctrl',
            btnClickMeClick: function(){
                this.dialog = this.getView().add({xtype:'window2'});
                this.dialog.show();
            },
            htmlRender: function(){
                console.log(this.dialog);
            }
        });
        Ext.widget('window1').show();
    }
});

我运行遇到的问题是，当 window 2 启动时，它仅对启动它的视图是模态的，我需要 window 是模态的整个文档。如果运行按原样，htmlRender 函数将正确记录 window 2 对象。我试图在 window 2 上设置 renderTo: Ext.getBody()；但是，呈现时我无法访问它的对象。在这种情况下，htmlRender 会为 window 2 对象记录一个 "undefined"。

我需要一些帮助，允许 window 2 呈现为文档的模态，同时允许我引用其对象。谢谢你的帮助。

Answer 1

不要将 window 添加到该视图，替换为：

this.dialog = this.getView().add({xtype:'window2'})

与：

this.dialog = Ext.widget('window2');

工作示例：https://fiddle.sencha.com/#fiddle/1338

Answer 2

我可以通过在 window 上设置 renderConfig:Ext.getBody()、删除 html 项上的侦听器并为 [=] 上的显示事件添加侦听器来解决此问题15=]2: https://fiddle.sencha.com/#fiddle/133j

ExtJS6 启动模式 Window 来自 ViewController

ExtJS6 Launch Modal Window fron ViewController

extjs

modal-dialog