docs/guides/components/examples/floating_panel/app.js

   1 /**
   2  * @example Floating Panel
   3  *
   4  * Demonstrates some commonly used features of floating components
   5  */
   6 Ext.require('Ext.tab.Panel');
   7 Ext.require('Ext.window.MessageBox');
   8
   9 Ext.onReady(function() {
  10
  11     var panel = Ext.create('Ext.panel.Panel', {
  12         width: 200,
  13         height: 100,
  14         floating: true,
  15         draggable: true,
  16         title: 'Test',
  17         html: 'Test Panel'
  18     });
  19
  20     Ext.create('Ext.button.Button', {
  21         renderTo: Ext.getBody(),
  22         margin: 10,
  23         text: 'Show Panel',
  24         handler: function() {
  25             panel.show(); // show the panel
  26         }
  27     });
  28
  29     Ext.create('Ext.button.Button', {
  30         renderTo: Ext.getBody(),
  31         margin: 10,
  32         text: 'Hide Panel',
  33         handler: function() {
  34             panel.hide(); // hide the panel
  35         }
  36     });
  37
  38     Ext.create('Ext.button.Button', {
  39         renderTo: Ext.getBody(),
  40         margin: 10,
  41         text: 'Align Panel to this button',
  42         handler: function() {
  43             // align the top left corner of the panel to the bottom right corner
  44             // of this button, offset by 3 pixels in each direction
  45             panel.alignTo(this.getEl(), 'tl-br', [3, 3]);
  46         }
  47     });
  48
  49     Ext.create('Ext.button.Button', {
  50         renderTo: Ext.getBody(),
  51         margin: 10,
  52         text: 'Center Panel',
  53         handler: function() {
  54             panel.center(); // center the panel
  55         }
  56     });
  57
  58
  59 });