Displaying message box in Extjs when the page is loaded

I'm learning extjs as our application uses it. Right now I've been able to build something like:

blur: function(field, lastValues) {
  var vField = field.getValue(),
    vFormPanel = field.formPanel;

  if (Ext.isEmpty(vField)) {
    MsgBox.show({
        msgs: [{
          type: 'info',
          msg: Lang.getCustomFrameworkMessage('Do you want to search google?')
        }],
        buttons: MsgBox.YESNO,
        fn: function(buttonId) {
          if (buttonId === "yes") {
            var redirect = 'https://google.com'
            window.location.href = redirect;

          }
        }
      }
    }
  }
}

In the above code, when the field is tabbed in and out and is empty, it shows the message box. Instead I want that when the page is loaded, very then the message box should be displayed. How can that be done??

You already used blur event to do your thing. You can use afterrender event to display your message.

It will depend on what are you having in your app/UI but the general idea is just look @ the documentation for the event you want to tie in and then add your handler there.

Here is an example app:

Ext.application({
  name: 'Fiddle',
  launch: function() {
    Ext.create('Ext.panel.Panel', {
      title: 'Hello',
      width: 200,
      html: '<p>World!</p>',
      renderTo: Ext.getBody(),
      listeners: {
        afterrender: function() {
          Ext.Msg.alert('TEST')
        }
      }
    });
  }
});

Here is a demo in Sencha Fiddle

Note: Demo and example is in Sencha ExtJS 5.1