git.roojs.org Git - roojs1/blob - examples/dialog/hello.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">\r
   2 <html>\r
   3 <head>\r
   4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\r
   5 <title>Hello World Dialog Example</title>\r
   6  <link rel="stylesheet" type="text/css" href="../../css/roojs-debug.css"/>
   7     <link rel="stylesheet" type="text/css" href="../../css/xtheme-slate.css"/>
   8
   9      <script type="text/javascript" src="../../roojs-debug.js"></script>
  10   \r
  11      <script language="javascript" src="hello.js"></script>\r
  12  \r
  13 <!-- Common Styles for the examples -->\r
  14 <link rel="stylesheet" type="text/css" href="../examples.css" />\r
  15 </head>\r
  16 <body>\r
  17 <script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->\r
  18 \r
  19 <h1>Hello World Dialog</h1>\r
  20 <p>This example shows how to create a very simple modal BasicDialog with "autoTabs".</p>\r
  21 <input type="button" id="show-dialog-btn" value="Hello World" /><br /><br />\r
  22 <p>Note that the js is not minified so it is readable. See
  23 <button type="button" onclick="RooDocs.viewSource.show('/hello.js')">hello.js</button>for the full source code.</p>\r
  24 Here's snapshot of the code that creates the dialog:\r
  25 <pre class="code"><code>Roo.BLANK_IMAGE_URL  = "../../images/default/s.gif";
  26
  27
  28
  29 var HelloWorld = {
  30
  31     dialog : false,
  32     callback:  false,
  33
  34     show : function(data, cb)
  35     {
  36         // standard code example..
  37         if (!this.dialog) {
  38             this.create();
  39         }
  40
  41         this.callback = cb;
  42         this.data = data;
  43         this.dialog.show(data._el ? data._el : false);
  44         if (this.form) {
  45            this.form.reset();
  46            this.form.setValues(data);
  47            this.form.fireEvent('actioncomplete', this.form,  { type: 'setdata', data: data });
  48         }
  49
  50     },
  51
  52     create : function()
  53     {
  54         var _this = this;
  55         this.dialog = Roo.factory({
  56             xns : Roo,
  57             xtype : 'LayoutDialog',
  58             autoTabs:true,
  59             width:500,
  60             height:300,
  61             shadow:true,
  62             minWidth:300,
  63             minHeight:250,
  64             proxyDrag: true,
  65             listeners : {
  66                 show : function() {
  67                     var p = this.layout.getRegion('center').getPanel(0);
  68                     p.setContent("Hello World");
  69
  70                 },
  71                 keydown : function(dlg, e) {
  72                     var k = e.getKey();
  73                     if(k == 27){ _this.dialog.hide(); }
  74                 }
  75             },
  76             center : {
  77                 xtype: 'LayoutRegion',
  78                 xns: Roo
  79             },
  80             items : [
  81                 {
  82                     xtype: 'ContentPanel',
  83                     xns: Roo,
  84                     region : "center"
  85
  86                 }
  87             ],
  88             buttons : [
  89                 {
  90                     xtype : 'Button',
  91                     xns : Roo,
  92                     text : 'Submit',
  93                     listeners : {
  94                         click : function () {
  95                             _this.dialog.hide()
  96                         }
  97                     }
  98                 },
  99                 {
 100                     xtype : 'Button',
 101                     xns : Roo,
 102                     text : 'Close',
 103                     listeners : {
 104                         click : function () {
 105                             _this.dialog.hide()
 106                         }
 107                     }
 108                 }
 109             ]
 110
 111         });
 112
 113     }
 114 };
 115
 116
 117 // using onDocumentReady instead of window.onload initializes the application
 118 // when the DOM is ready, without waiting for images and other resources to load
 119 Roo.onReady(function() {
 120
 121     Roo.get('show-dialog-btn').on('click',function () {
 122         HelloWorld.show({ _el : this});
 123     });
 124 });\r
 125 </code></pre>\r
 126 \r
 127     <!-- The dialog is created from existing markup.\r
 128          The inline styles just hide it until it created and should be in a stylesheet -->\r
 129     <div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">\r
 130     <div class="x-dlg-hd">Hello Dialog</div>\r
 131     <div class="x-dlg-bd">\r
 132         <!-- Auto create tab 1 -->\r
 133         <div class="x-dlg-tab" title="Hello World 1">\r
 134             <!-- Nested "inner-tab" to safely add padding -->\r
 135             <div class="inner-tab">\r
 136                  Hello...<br><br><br>\r
 137             </div>\r
 138         </div>\r
 139         <!-- Auto create tab 2 -->\r
 140         <div class="x-dlg-tab" title="Hello World 2">\r
 141             <div class="inner-tab">\r
 142             ... World!\r
 143             </div>\r
 144         </div>\r
 145         </div>\r
 146     </div>\r
 147 </div>\r
 148 </body>\r
 149 </html>\r