In extjs4 Ext.MessageBox.alert() msg disalays blank window?

Question

I am working in extjs4 and i am going to print a message box on screen but it displays a blank message window.Nothig displays in it.

here is my code:-

Ext.application({
    name: 'App',

    appFolder: 'app',

    //controllers: ['Books'],
    requires:[
                 'Ext.window.MessageBox',
              //   'Ext.tip.*'
             ],
    launch: function() {
        Ext.create('Ext.tab.Panel', {
            renderTo: Ext.getBody(),
            height: 100,
            width: 200,
            items: [
                {
                    // Explicitly define the xtype of this Component configuration.
                    // This tells the Container (the tab panel in this case)
                    // to instantiate a Ext.panel.Panel when it deems necessary
                    xtype: 'panel',
                    title: 'Tab One',
                    html: 'The first tab',
                    listeners: {
                        render: function() {
                           //Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');
                             Ext.Msg.alert('hi', 'Please enter your name:');
                            //Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
                            //alert("hi");

                        }
                    }
                },
                {
                    // this component configuration does not have an xtype since 'panel' is the default
                    // xtype for all Component configurations in a Container
                    title: 'Tab Two',
                    html: 'The second tab',
                    listeners: {
                        render: function() {
                            //Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');
                        }
                    }
                }
            ]
        });
    }
});

and here is the message screen window

there is no any messageBox method working whats wrong in this code? please give me some suggestions...

Answer 1

Use 'boxready' event (jsfiddle).

If output to the console:

...
render: function() {
    console.log(Ext.Msg.alert('hi', 'Alert message'))
}
....

in the 'render' listener, you will see that were incorrectly calculated the size and position of the alert:

...
width: NaN
x: -41
...