git.roojs.org Git - roojs1/blob - examples/dialog/layout.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11 Roo.BLANK_IMAGE_URL  = "../../images/default/s.gif";
  12  \r
  13 // create the LayoutExample application (single instance)\r
  14 var LayoutExample = function(){\r
  15     // everything in this space is private and only accessible in the HelloWorld block\r
  16     \r
  17     // define some private variables\r
  18     var dialog, showBtn;\r
  19     \r
  20     var toggleTheme = function(){\r
  21         Roo.get(document.body, true).toggleClass('xtheme-gray');\r
  22     };\r
  23     // return a public interface\r
  24     return {\r
  25         init : function(){\r
  26              showBtn = Roo.get('show-dialog-btn');\r
  27              // attach to click event\r
  28              showBtn.on('click', this.showDialog, this);\r
  29              \r
  30         },\r
  31         \r
  32         showDialog : function(){\r
  33             if(!dialog){ // lazy initialize the dialog and only create it once\r
  34                 dialog = new Roo.LayoutDialog("hello-dlg", { \r
  35                         modal:true,\r
  36                         width:600,\r
  37                         height:400,\r
  38                         shadow:true,\r
  39                         minWidth:300,\r
  40                         minHeight:300,\r
  41                         proxyDrag: true,\r
  42                         west: {\r
  43                                 split:true,\r
  44                                 initialSize: 150,\r
  45                                 minSize: 100,\r
  46                                 maxSize: 250,\r
  47                                 titlebar: true,\r
  48                                 collapsible: true,\r
  49                                 animate: true\r
  50                             },\r
  51                             center: {\r
  52                                 autoScroll:true,\r
  53                                 tabPosition: 'top',\r
  54                                 closeOnTab: true,\r
  55                                 alwaysShowTabs: true\r
  56                             }\r
  57                 });\r
  58                 dialog.addKeyListener(27, dialog.hide, dialog);\r
  59                 dialog.addButton('Submit', dialog.hide, dialog);\r
  60                 dialog.addButton('Close', dialog.hide, dialog);\r
  61                 \r
  62                 var layout = dialog.getLayout();\r
  63                 layout.beginUpdate();\r
  64                 layout.add('west', new Roo.ContentPanel('west', {title: 'West'}));\r
  65                     layout.add('center', new Roo.ContentPanel('center', {title: 'The First Tab'}));\r
  66                 // generate some other tabs\r
  67                 layout.add('center', new Roo.ContentPanel(Roo.id(), {\r
  68                                         autoCreate:true, title: 'Another Tab', background:true}));\r
  69                     layout.add('center', new Roo.ContentPanel(Roo.id(), {\r
  70                                         autoCreate:true, title: 'Third Tab', closable:true, background:true}));\r
  71                     layout.endUpdate();\r
  72             }\r
  73             dialog.show(showBtn.dom);\r
  74         }\r
  75     };\r
  76 }();\r
  77 \r
  78 // using onDocumentReady instead of window.onload initializes the application\r
  79 // when the DOM is ready, without waiting for images and other resources to load\r
  80 Roo.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);