EXTJS Display a View within Ext.window.Window

Question

I am using version 4.2.

I currently have a view which extends a panel. On this panel there is a button which displays a modal window. The controller code when the button is clicked is below (which I pulled from the extjs docs ):

displaySearch : function(btn) {
    var panel = Ext.create('Ext.window.Window', {
                    title: 'Hello',
                    height: 200,
                    width: 400,
                    layout: 'fit',
                    modal : true,
                    items: {  
                       ...
                    }
                }).show();
}

I want a View I already have created to be rendered INSIDE the modal window I just defined.

How do I do that?

Answer 1

If you have defined an alias (xtype) for that view, let's say it is 'myview', then you just add it to items like this:

var panel = Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 200,
    width: 400,
    autoShow:true,
    layout: 'fit',
    modal : true,
    items: [{
        xtype:'myview'
    }]
});

Also, you don't need to call show() on the created window, it is enough if you configure autoShow:true .