Guide applies to: modern

Dialog

A dialog is a type of floating panel. Like any component, it has a tpl property, whose data is provided by either the data config or by running setData(), without being restricted by the comparable restrictive issues of pop-up alert windows. Take note of the show() method to make it display.

Expand Code

JS Run

  1.         Ext.define('MyApp.view.Dialog', {
  2.         extend: 'Ext.Dialog',
  3.         xtype: 'dialog',
  4.         title: 'Dialog',
  5.         tpl: '<h2>{message}</h2>',
  6.         bodyPadding: 8,
  7.         height: 300,
  8.         width: 300
  9.     });
  10.     Ext.define('MyApp.view.Main', {
  11.         extend: 'Ext.Panel',
  12.         tbar: [{
  13.             xtype: 'button',
  14.             text: 'Create',
  15.             handler: function(button) {´
  16.                 button.up('panel').add({
  17.                     xtype: 'dialog',
  18.                     data: {
  19.                         message: 'Hi there!'
  20.                     }
  21.                 }).show();
  22.             }
  23.         }]
  24.     });
  25.     Ext.application({
  26.         name: 'MyApp',
  27.         mainView: 'MyApp.view.Main'
  28.     });