git.roojs.org Git - roojs1/blob - examples/bootstrap/nested.html

   1 <!--
   2
   3 porting tst for layout classes from original roo library into bootstrap one.
   4
   5
   6 -->
   7 <html>
   8 <head>
   9   <title>Nested Layout</title>
  10
  11    <!-- Bootstrap -->
  12     <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
  13
  14     <link href="../../../bootswatch/AdminLTE-master/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  15
  16     <link href="../../css-bootstrap/roojs-bootstrap-debug.css" rel="stylesheet" type="text/css" />
  17
  18
  19
  20
  21     <script type="text/javascript" src="../../roojs-core-debug.js"></script>
  22     <!-- bootstrap js.. needs to compile it later.. -->
  23     <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
  24
  25     <script type="text/javascript" src="../../Roo/dd/DragDropMgr.js"></script>
  26
  27     <script type="text/javascript" src="../../Roo/dd/DragDrop.js"></script>
  28     <script type="text/javascript" src="../../Roo/dd/DD.js"></script>
  29     <script type="text/javascript" src="../../Roo/dd/DDProxy.js"></script>
  30
  31     <script type="text/javascript" src="../../Roo/bootstrap/SplitBar.js"></script>
  32
  33     <script type="text/javascript" src="../../Roo/bootstrap/layout/layout-ns.js"></script>
  34
  35     <script type="text/javascript" src="../../Roo/bootstrap/layout/Manager.js"></script>
  36     <script type="text/javascript" src="../../Roo/bootstrap/layout/Border.js"></script>
  37
  38     <script type="text/javascript" src="../../Roo/bootstrap/layout/Basic.js"></script>
  39     <script type="text/javascript" src="../../Roo/bootstrap/layout/Region.js"></script>
  40     <script type="text/javascript" src="../../Roo/bootstrap/layout/Split.js"></script>
  41     <script type="text/javascript" src="../../Roo/bootstrap/layout/Center.js"></script>
  42
  43     <script type="text/javascript" src="../../Roo/bootstrap/panel/panel-ns.js"></script>
  44     <script type="text/javascript" src="../../Roo/bootstrap/panel/Content.js"></script>
  45     <script type="text/javascript" src="../../Roo/bootstrap/panel/Nest.js"></script>
  46
  47     <script type="text/javascript" src="../../Roo/bootstrap/panel/Tabs.js"></script>
  48     <script type="text/javascript" src="../../Roo/bootstrap/panel/TabItem.js"></script>
  49
  50
  51
  52
  53
  54
  55
  56     <style type="text/css">
  57
  58         </style>
  59         <script type="text/javascript">
  60
  61 Roo.namespace("Example");
  62
  63 Example.Nested = new Roo.XComponent({
  64     part     :  ["example", "nested" ],
  65     order    : '001-Example-Nested',
  66     region   : 'center',
  67     parent   : false,
  68     name     : "unnamed module",
  69     disabled : false,
  70     permname : '',
  71     _tree : function()
  72     {
  73         var _this = this;
  74         var MODULE = this;
  75         return {
  76             is_root : true,
  77             xtype : 'Border',
  78             xns : Roo.bootstrap.layout,
  79             el : document.body, // border layout can be applied to the outer one...
  80             west: {
  81                 xtype : 'Region',
  82                 xns: Roo.bootstrap.layout,
  83                 //split:true,
  84                 tabPosition: 'top',
  85                 initialSize: 400,
  86                 titlebar: true,
  87                // collapsible: true,
  88                 minSize: 100,
  89                 maxSize: 400
  90             },
  91             center: {
  92                 xtype : 'Region',
  93                 xns: Roo.bootstrap.layout,
  94                 autoScroll: false,
  95                 tabPosition:'top',
  96                  titlebar: true
  97             },
  98             items : [
  99                 {
 100                     xtype : 'Content',
 101                     xns: Roo.bootstrap.panel,
 102                     title : "Title west" ,
 103                     fitToFrame:true,
 104                     closable:false,
 105                     region : 'west',
 106                     html : 'some body west'
 107
 108                 },
 109                 {
 110                     xtype : 'Content',
 111                     xns: Roo.bootstrap.panel,
 112                     title : "Title west 2",
 113                     fitToFrame:true,
 114                     closable:false,
 115                     region : 'west',
 116                     html : 'some body west 2'
 117
 118                 },
 119                 {
 120                     xtype : 'Content',
 121                     xns: Roo.bootstrap.panel,
 122                     title : "Title Center",
 123                     fitToFrame:true,
 124                     closable:false,
 125                     region : 'center',
 126                     html : 'some body center'
 127
 128                 },
 129
 130                 {
 131                     xtype : 'Nest',
 132                     title : "Title Nest Center",
 133
 134                     xns: Roo.bootstrap.panel,
 135                     region : 'center',
 136
 137                     layout : {
 138                         xtype : 'Border',
 139                         xns: Roo.bootstrap.layout,
 140                         south: {
 141                             xtype : 'Region',
 142                             xns: Roo.bootstrap.layout,
 143                                 split:true,
 144                                 initialSize: 200,
 145                                 minSize: 100,
 146                                 maxSize: 400,
 147                                 autoScroll:true,
 148                                 collapsible:true,
 149                                 titlebar: true
 150                             },
 151                             center: {
 152                             xtype : 'Region',
 153                             xns: Roo.bootstrap.layout,
 154                                 autoScroll:true,
 155                             },
 156                         items : [
 157                             {
 158                                 xtype : 'Content',
 159                                 xns: Roo.bootstrap.panel,
 160                                 title : "More Info",
 161                                 region : 'south',
 162                                 html : 'some body south'
 163                             },
 164                             {
 165                                 xtype : 'Content',
 166                                 xns: Roo.bootstrap.panel,
 167                                 title : "the body",
 168                                 region : 'center',
 169                                 html : 'some body center'
 170                             },
 171                         ]
 172                     }
 173
 174
 175                 }
 176
 177             ]
 178
 179         }
 180     }
 181 });
 182
 183    Roo.onReady(function() {
 184         Roo.XComponent.is_alt = true;
 185           Roo.XComponent.build();
 186           //dRoo.bootstrap.Tooltip.init();
 187       });
 188
 189         </script>
 190 </head>
 191 <body class="xtheme-gray">
 192
 193  </body>
 194 </html>