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         <script type="text/javascript">
  52
  53 Roo.namespace("Dashboard");
  54     </script>
  55
  56          <script type="text/javascript" src="Dashboard.Header1.js"></script>
  57
  58
  59
  60
  61     <style type="text/css">
  62
  63         </style>
  64         <script type="text/javascript">
  65
  66 Roo.namespace("Example");
  67
  68 Example.Nested = new Roo.XComponent({
  69     part     :  ["example", "nested" ],
  70     order    : '001-Example-Nested',
  71     region   : 'center',
  72     parent   : false,
  73     name     : "unnamed module",
  74     disabled : false,
  75     permname : '',
  76     _tree : function()
  77     {
  78         var _this = this;
  79         var MODULE = this;
  80         return {
  81             is_root : true,
  82             xtype : 'Border',
  83             xns : Roo.bootstrap.layout,
  84             el : document.body, // border layout can be applied to the outer one...
  85             west: {
  86                 xtype : 'Region',
  87                 xns: Roo.bootstrap.layout,
  88                 split:true,
  89                 tabPosition: 'top',
  90                 initialSize: 400,
  91                 titlebar: true,
  92                // collapsible: true,
  93                 minSize: 100,
  94                 maxSize: 400
  95             },
  96             north: {
  97                 xtype : 'Region',
  98                 xns: Roo.bootstrap.layout,
  99                 overflow : 'visible',
 100
 101                 initialSize: 100,
 102                 titlebar: false
 103
 104             },
 105             center: {
 106                 xtype : 'Region',
 107                 xns: Roo.bootstrap.layout,
 108                 autoScroll: false,
 109                 tabPosition:'top',
 110                  titlebar: true
 111             },
 112             items : [
 113                 {
 114                     xtype : 'Content',
 115                     xns: Roo.bootstrap.panel,
 116                     title : "Title west" ,
 117                     fitToFrame:true,
 118                     closable:false,
 119                     region : 'north',
 120                     items : [
 121                         Roo.apply(Dashboard.Header1._tree(), {
 122                         xtype : 'Container',
 123                         cls : 'header',
 124                         tag : 'header',
 125                         xns : Roo.bootstrap,
 126                         '|xns' : 'Roo.bootstrap'
 127                        })
 128                     ]
 129
 130                 },
 131
 132                 {
 133                     xtype : 'Content',
 134                     xns: Roo.bootstrap.panel,
 135                     title : "Title west" ,
 136                     fitToFrame:true,
 137                     closable:false,
 138                     region : 'west',
 139                     html : 'some body west'
 140
 141                 },
 142                 {
 143                     xtype : 'Content',
 144                     xns: Roo.bootstrap.panel,
 145                     title : "Title west 2",
 146                     fitToFrame:true,
 147                     closable:false,
 148                     region : 'west',
 149                     html : 'some body west 2'
 150
 151                 },
 152                 {
 153                     xtype : 'Content',
 154                     xns: Roo.bootstrap.panel,
 155                     title : "Title Center",
 156                     fitToFrame:true,
 157                     closable:false,
 158                     region : 'center',
 159                     html : 'some body center'
 160
 161                 },
 162
 163                 {
 164                     xtype : 'Nest',
 165                     title : "Title Nest Center",
 166
 167                     xns: Roo.bootstrap.panel,
 168                     region : 'center',
 169
 170                     layout : {
 171                         xtype : 'Border',
 172                         xns: Roo.bootstrap.layout,
 173                         south: {
 174                             xtype : 'Region',
 175                             xns: Roo.bootstrap.layout,
 176                                 split:true,
 177                                 initialSize: 200,
 178                                 minSize: 100,
 179                                 maxSize: 400,
 180                                 autoScroll:true,
 181                                 collapsible:true,
 182                                 titlebar: true
 183                             },
 184                             center: {
 185                             xtype : 'Region',
 186                             xns: Roo.bootstrap.layout,
 187                                 autoScroll:true,
 188                             },
 189                         items : [
 190                             {
 191                                 xtype : 'Content',
 192                                 xns: Roo.bootstrap.panel,
 193                                 title : "More Info",
 194                                 region : 'south',
 195                                 html : 'some body south'
 196                             },
 197                             {
 198                                 xtype : 'Content',
 199                                 xns: Roo.bootstrap.panel,
 200                                 title : "the body",
 201                                 region : 'center',
 202                                 html : 'some body center'
 203                             },
 204                         ]
 205                     }
 206
 207
 208                 }
 209
 210             ]
 211
 212         }
 213     }
 214 });
 215
 216    Roo.onReady(function() {
 217         Roo.XComponent.is_alt = true;
 218           Roo.XComponent.build();
 219           //dRoo.bootstrap.Tooltip.init();
 220       });
 221
 222         </script>
 223 </head>
 224 <body class="xtheme-gray">
 225
 226  </body>
 227 </html>