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="../../css-bootstrap/font-awesome.css" rel="stylesheet" type="text/css" />
  15
  16     <link href="../../css-bootstrap/roojs-bootstrap-debug.css" rel="stylesheet" type="text/css" />
  17
  18     <link href="../../../bootswatch/MDB%20Free/css/mdb.min.css" rel="stylesheet">
  19
  20
  21
  22     <script type="text/javascript" src="../../roojs-core-debug.js"></script>
  23     <!-- bootstrap js.. needs to compile it later.. -->
  24     <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
  25
  26
  27
  28         <script type="text/javascript">
  29
  30 Roo.namespace("Dashboard");
  31     </script>
  32
  33          <script type="text/javascript" src="Dashboard.Header1.js"></script>
  34
  35
  36
  37
  38     <style type="text/css">
  39
  40         </style>
  41         <script type="text/javascript">
  42
  43 Roo.namespace("Example");
  44
  45 Example.Nested = new Roo.XComponent({
  46     part     :  ["example", "nested" ],
  47     order    : '001-Example-Nested',
  48     region   : 'center',
  49     parent   : false,
  50     name     : "unnamed module",
  51     disabled : false,
  52     permname : '',
  53     _tree : function()
  54     {
  55         var _this = this;
  56         var MODULE = this;
  57         return {
  58             is_root : true,
  59             xtype : 'Border',
  60             xns : Roo.bootstrap.layout,
  61             el : document.body, // border layout can be applied to the outer one...
  62             west: {
  63                 xtype : 'Region',
  64                 xns: Roo.bootstrap.layout,
  65                 split:true,
  66                 tabPosition: 'top',
  67                 initialSize: 400,
  68                 titlebar: true,
  69                // collapsible: true,
  70                 minSize: 100,
  71                 maxSize: 400
  72             },
  73             north: {
  74                 xtype : 'Region',
  75                 xns: Roo.bootstrap.layout,
  76                 overflow : 'visible',
  77
  78                 initialSize: 100,
  79                 titlebar: false
  80
  81             },
  82             center: {
  83                 xtype : 'Region',
  84                 xns: Roo.bootstrap.layout,
  85                 autoScroll: false,
  86                 tabPosition:'top',
  87                  titlebar: true
  88             },
  89             items : [
  90                 {
  91                     xtype : 'Content',
  92                     xns: Roo.bootstrap.panel,
  93                     title : "Title west" ,
  94                     fitToFrame:true,
  95                     closable:false,
  96                     region : 'north',
  97                     items : [
  98                         {
  99                             bar : true,
 100                             position : 'static-top',
 101                             xtype : 'NavHeaderbar',
 102                             tag : 'nav',
 103                             xns : Roo.bootstrap,
 104                             items : [
 105                                 {
 106                                     cls : 'navbar-btn sidebar-toggle',
 107                                     xtype : 'Link',
 108                                     xns : Roo.bootstrap,
 109                                     html : '<span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span>'
 110                                 },
 111                                 {
 112                                     xtype : 'NavGroup',
 113                                     align : 'right',
 114                                     xns : Roo.bootstrap,
 115                                     items : [
 116                                         {
 117                                             menu : {
 118                                                 xtype : 'Menu',
 119                                                 xns : Roo.bootstrap,
 120                                                 items : [
 121                                                     {
 122                                                         xtype : 'MenuItem',
 123                                                         xns : Roo.bootstrap,
 124                                                         html : 'test'
 125                                                     }
 126                                                 ]
 127
 128                                             },
 129                                             xtype : 'NavItem',
 130                                             xns : Roo.bootstrap,
 131                                             html : 'test',
 132                                             items : [
 133
 134                                             ]
 135
 136                                         },
 137                                         {
 138                                             xtype : 'NavItem',
 139                                             xns : Roo.bootstrap,
 140                                             html : 'test'
 141                                         }
 142                                     ]
 143
 144                                 }
 145                             ]
 146
 147                         }
 148                     ]
 149
 150                 },
 151
 152                 {
 153                     xtype : 'Content',
 154                     xns: Roo.bootstrap.panel,
 155                     title : "Title west" ,
 156                     fitToFrame:true,
 157                     closable:false,
 158                     region : 'west',
 159                     html : 'some body west'
 160
 161                 },
 162                 {
 163                     xtype : 'Content',
 164                     xns: Roo.bootstrap.panel,
 165                     title : "Title west 2",
 166                     fitToFrame:true,
 167                     closable:false,
 168                     region : 'west',
 169                     html : 'some body west 2'
 170
 171                 },
 172                 {
 173                     xtype : 'Content',
 174                     xns: Roo.bootstrap.panel,
 175                     title : "Title Center",
 176                     fitToFrame:true,
 177                     closable:false,
 178                     region : 'center',
 179                     html : 'some body center'
 180
 181                 },
 182
 183                 {
 184                     xtype : 'Nest',
 185                     title : "Title Nest Center",
 186
 187                     xns: Roo.bootstrap.panel,
 188                     region : 'center',
 189
 190                     layout : {
 191                         xtype : 'Border',
 192                         xns: Roo.bootstrap.layout,
 193                         south: {
 194                             xtype : 'Region',
 195                             xns: Roo.bootstrap.layout,
 196                                 split:true,
 197                                 initialSize: 200,
 198                                 minSize: 100,
 199                                 maxSize: 400,
 200                                 autoScroll:true,
 201                                 collapsible:true,
 202                                 titlebar: true
 203                             },
 204                             center: {
 205                             xtype : 'Region',
 206                             xns: Roo.bootstrap.layout,
 207                                 autoScroll:true,
 208                             },
 209                         items : [
 210                             {
 211                                 xtype : 'Content',
 212                                 xns: Roo.bootstrap.panel,
 213                                 title : "More Info",
 214                                 region : 'south',
 215                                 html : 'some body south'
 216                             },
 217                             {
 218                                 xtype : 'Content',
 219                                 xns: Roo.bootstrap.panel,
 220                                 title : "the body",
 221                                 region : 'center',
 222                                 html : 'some body center'
 223                             },
 224                         ]
 225                     }
 226
 227
 228                 }
 229
 230             ]
 231
 232         }
 233     }
 234 });
 235
 236    Roo.onReady(function() {
 237         Roo.XComponent.is_alt = true;
 238           Roo.XComponent.build();
 239           //dRoo.bootstrap.Tooltip.init();
 240       });
 241
 242         </script>
 243 </head>
 244 <body class="xtheme-gray">
 245
 246  </body>
 247 </html>