Displaying message box in Extjs when the page is loaded

Question

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??

Answer 1

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