ExtJS - Window

extjs

How to create a window and render it?

Ext.onReady(function() {
    win = new Ext.Window({
        layout: 'form',
        width: 340,
        autoHeight: true,
        closeAction: 'hide',
        items: [signupForm]
    });
    win.show();
});

How to create a modal window with an embedded iframe?:

var windowButtons = new Array();
/*
windowButtons[windowButtons.length] = {
    text: '<font face="Verdana">Cancel</font>',
    iconCls:'q-cross',
    hidden: true,
    id: 'cancelPending',
    handler: function() {Ext.getCmp('editHomepageWin').close();}
};
*/
var elements = new Array();
elements[elements.length] = {
        xtype: 'panel',
        html: '<iframe src="' + opt.url + '" frameborder="0" width="100%" height="' + opt.height + 'px"></iframe>'
};
new Ext.Window({
    title: opt.title,
    layout:'fit',
    closable:true,
    id: opt.id,
    maximizable:false,
    resizable:true,
    constrain:true,
    modal:true,
    width: opt.width,
    height: opt.height,
    listeners:{
        beforeclose: function(panel) {
            // We have a grid inside this window, and for some reason,
            // when we close this window, we get a javascript error.
            // The below line seems to work around this javascript error.
            //Ext.getCmp('anonymous_reporting_fieldset').show();
            //panel.removeAll(true);
        },
        close: function() {
            // See if we can use hide(), and return false
        }
    },
    items: elements,
    buttonAlign:'center',
    buttons: windowButtons
}).show();

If your window contains a lot of items, it may be a good idea to create an array, and push your items onto this array (so that it is easier to see where you miss a quote or a comma) before using it rather than listing all the items in one shot.

How to create a modal window with Ext JS 4?

function createWindowExtJS4() {
    if (!win1) {
        win1 = Ext.create('Ext.window.Window',{
            layout: 'fit',
            id: 'wind1',
            constrain: true,
            plain: true,
            modal: true,
            width: parseInt(winWidth1),
            height: parseInt(winHeight1),
            title: 'Blah Blah',
            items: [
                {
                    //xtype: 'grid',
                    //border: false,
                    //columns: [{header: 'World'}],
                    //store: Ext.create('Ext.data.ArrayStore',{})
                    xtype:'form',
                    border: false,
                    bodyStyle: 'padding-left:20px;',
                    autoScroll:true,
                    items:[{
                        xtype:'label',
                        html: notificationsHTML                
                    }]
                }
            ],
            buttonAlign: 'center',
            buttons: [
                {
                    text: 'Show Me Later',
                    handler:function() {
                    }
                },{
                    text:'Don\'t Show Me',
                    handler:function() {
                    }
                }
            ],
            listeners:{
                'close': function(p) {
                }
            }
        });
    }
    win1.show();
}