CODEWITHSUNDEEP
extjsmodal-dialog
Elcid_91
Elcid_91

Reputation: 1681

ExtJS6 Launch Modal Window fron ViewController

I am attempting to launch a modal window from within a viewcontroller. Consider the following code (also located at 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();
    }
});

The problem I am running into is that when window 2 is launched it is modal only to the view that launched it and I need the window to be modal to the entire document. If run as is, the htmlRender function will log the window 2 object correctly. I attempted to set the renderTo: Ext.getBody() on window 2; however, I am unable to access it's object when it is rendered. In this case, htmlRender logs an "undefined" for the window 2 object.

I need some help allowing window 2 to be rendered as a modal to the document while allowing me to reference its object. Thanks for any help.

Upvotes: 0

Views: 2089

Answers (2)

Elcid_91
Elcid_91

Reputation: 1681

I was able to work around this issue by setting the renderConfig:Ext.getBody() on window, removing the listener on the html item and adding a listener for the show event on window2: https://fiddle.sencha.com/#fiddle/133j

Upvotes: 1

CD..
CD..

Reputation: 74096

Don't add the window to that view, replace:

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

With:

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

Working example: https://fiddle.sencha.com/#fiddle/1338

Upvotes: 1

Related Questions