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       <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  11
  12    <!-- Bootstrap -->
  13     <link rel="stylesheet" href="../../css-bootstrap/bootstrap.min.css">
  14
  15     <link href="../../css-bootstrap/font-awesome.css" rel="stylesheet" type="text/css" />
  16
  17     <link href="../../css-bootstrap/roojs-bootstrap-debug.css" rel="stylesheet" type="text/css" />
  18
  19   <!--  <link href="../../../bootswatch/material-kit/css/material-kit.css" rel="stylesheet"> -->
  20
  21
  22
  23     <script type="text/javascript" src="../../roojs-core-debug.js"></script>
  24     <!-- bootstrap js.. needs to compile it later.. -->
  25     <script type="text/javascript" src="../../roojs-bootstrap-debug.js"></script>
  26
  27   <script type="text/javascript" src="../../Roo/bootstrap/panel/Grid.js"></script>
  28   <script type="text/javascript" src="../../Roo/bootstrap/Table.js"></script>
  29   <script type="text/javascript" src="../../Roo/bootstrap/Input.js"></script>
  30         <script type="text/javascript">
  31
  32 Roo.namespace("Dashboard");
  33     </script>
  34
  35          <script type="text/javascript" src="Dashboard.Header1.js"></script>
  36
  37
  38
  39
  40     <style type="text/css">
  41 .navbar {
  42     padding: 0;
  43 }
  44 /*
  45
  46 .table-body-fixed tbody {
  47    overflow-y: scroll;
  48   width: 100%;
  49 }
  50 .table-body-fixed  thead,
  51 .table-body-fixed  tbody,
  52
  53 .table-body-fixed th   {
  54   display: block;
  55 }
  56 .table-body-fixed thead {
  57     overflow:  hidden;
  58 }
  59
  60
  61 .table-body-fixed tbody td,
  62 .table-body-fixed thead > tr> th {
  63   float: left;
  64   border-bottom-width: 0;
  65 }
  66  .table-body-fixed thead > tr,
  67 .table-body-fixed tbody > tr
  68 {
  69     display: block;
  70     overflow: hidden;
  71 }
  72 */
  73         </style>
  74         <script type="text/javascript">
  75
  76 Roo.namespace("Example");
  77
  78 Example.Nested = new Roo.XComponent({
  79     part     :  ["example", "nested" ],
  80     order    : '001-Example-Nested',
  81     region   : 'center',
  82     parent   : false,
  83     name     : "unnamed module",
  84     disabled : false,
  85     permname : '',
  86     _tree : function()
  87     {
  88         var _this = this;
  89         var MODULE = this;
  90         return {
  91             is_root : true,
  92             xtype : 'Border',
  93             xns : Roo.bootstrap.layout,
  94             el : document.body, // border layout can be applied to the outer one...
  95             west: {
  96                 xtype : 'Region',
  97                 xns: Roo.bootstrap.layout,
  98                 split:true,
  99                 tabPosition: 'top',
 100                 initialSize: 400,
 101                 titlebar: true,
 102                // collapsible: true,
 103                 minSize: 100,
 104                 maxSize: 500,
 105                 cls : 'xs-hide'
 106             },
 107             north: {
 108                 xtype : 'Region',
 109                 xns: Roo.bootstrap.layout,
 110                 overflow : 'visible',
 111
 112                 initialSize: 50,
 113                 titlebar: false
 114
 115             },
 116             center: {
 117                 xtype : 'Region',
 118                 xns: Roo.bootstrap.layout,
 119                 autoScroll: false,
 120                 tabPosition:'top',
 121                  titlebar: true
 122             },
 123             items : [
 124                 {
 125                     xtype : 'Content',
 126                     xns: Roo.bootstrap.panel,
 127                     title : "Title west" ,
 128                     fitToFrame:true,
 129                     closable:false,
 130                     region : 'north',
 131                     items : [
 132                         {
 133                             bar : true,
 134                             position : 'static-top',
 135                             xtype : 'NavHeaderbar',
 136                             tag : 'nav',
 137                             xns : Roo.bootstrap,
 138                             items : [
 139                                 {
 140                                     cls : 'navbar-btn sidebar-toggle',
 141                                     xtype : 'Link',
 142                                     xns : Roo.bootstrap,
 143                                     html : '<span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span>'
 144                                 },
 145                                 {
 146                                     xtype : 'NavGroup',
 147                                     align : 'right',
 148                                     xns : Roo.bootstrap,
 149                                     items : [
 150                                         {
 151                                             menu : {
 152                                                 xtype : 'Menu',
 153                                                 xns : Roo.bootstrap,
 154                                                 items : [
 155                                                     {
 156                                                         xtype : 'MenuItem',
 157                                                         xns : Roo.bootstrap,
 158                                                         html : 'test'
 159                                                     }
 160                                                 ]
 161
 162                                             },
 163                                             xtype : 'NavItem',
 164                                             xns : Roo.bootstrap,
 165                                             html : 'test',
 166                                             items : [
 167
 168                                             ]
 169
 170                                         },
 171                                         {
 172                                             xtype : 'NavItem',
 173                                             xns : Roo.bootstrap,
 174                                             html : 'test'
 175                                         }
 176                                     ]
 177
 178                                 }
 179                             ]
 180
 181                         }
 182                     ]
 183
 184                 },
 185
 186                 {
 187                     xtype : 'Content',
 188                     xns: Roo.bootstrap.panel,
 189                     title : "Title west" ,
 190                     fitToFrame:true,
 191                     closable:false,
 192                     region : 'west',
 193                     html : 'some body west'
 194
 195                 },
 196                 {
 197                     xtype : 'Grid',
 198                     xns: Roo.bootstrap.panel,
 199                     title : "Test Grid",
 200                     fitToFrame:true,
 201                     closable:false,
 202                     region : 'west',
 203                     listeners : {
 204                             activate : function()
 205                             {
 206                                 this.grid.store.load.defer(100, this.grid.store);
 207                             }
 208                         },
 209                     toolbar : {
 210                         xtype: 'NavSimplebar',
 211                         xns : Roo.bootstrap,
 212                         items: [
 213                             {
 214                                 xtype: 'NavGroup',
 215                                 xns: Roo.bootstrap,
 216                                 items : [
 217                                     {
 218                                         xtype: 'NavItem',
 219                                         xns: Roo.bootstrap,
 220                                         html: 'a button'
 221
 222                                     },
 223                                     {
 224                                         xtype: 'Input',
 225                                         xns: Roo.bootstrap,
 226                                         placeholder: 'a text input'
 227
 228                                     }
 229                                 ]
 230                             }
 231                         ]
 232
 233                     },
 234                     grid : {
 235                         loadMask : true,
 236                         striped : true,
 237                         xns : Roo.bootstrap,
 238                         xtype : 'Table',
 239                         cls : 'table-fixed',
 240                          store : {
 241                             xns : Roo.data,
 242                             xtype : 'Store',
 243
 244                             proxy : {
 245                                 xns : Roo.data,
 246                                 xtype : 'MemoryProxy',
 247                                 data: [
 248                                     ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
 249                                     ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
 250                                     ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
 251                                     ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
 252                                     ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
 253                                     ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
 254                                     ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
 255                                     ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
 256                                     ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
 257                                     ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
 258                                     ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
 259                                     ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
 260                                     ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
 261                                     ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
 262                                     ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
 263                                     ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
 264                                     ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
 265                                     ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
 266                                     ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
 267                                     ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
 268                                     ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
 269                                     ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
 270                                     ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
 271                                     ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
 272                                     ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
 273                                     ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
 274                                     ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
 275                                     ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
 276                                     ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
 277                                     ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
 278                                 ]
 279                             },
 280                             reader : {
 281
 282                                 xns : Roo.data,
 283                                 xtype : 'ArrayReader',
 284                                 fields: [
 285                                     {name: 'company'},
 286                                     {name: 'price', type: 'float'},
 287                                     {name: 'change', type: 'float'},
 288                                     {name: 'pctChange', type: 'float'},
 289                                     {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
 290                                 ]
 291                             },
 292                         },
 293                         cm : [
 294
 295                             {
 296                                 id:'company',
 297                                 header: "Company",
 298                                 width: 160,
 299                                 sortable: true,
 300                                 locked:false,
 301                                 dataIndex: 'company',
 302                                 xns : Roo.grid,
 303                                 xtype : 'ColumnModel'
 304                             },
 305                             {
 306                                 header: "Price",
 307                                width: 160,
 308                                 sortable: true,
 309                                 renderer: Roo.util.Format.usMoney,
 310                                 dataIndex: 'price',
 311                                 xns : Roo.grid,
 312                                 xtype : 'ColumnModel'
 313                             }
 314
 315                         ]
 316
 317                     }
 318
 319                 },
 320                 {
 321                     xtype : 'Content',
 322                     xns: Roo.bootstrap.panel,
 323                     title : "Title Center",
 324                     fitToFrame:true,
 325                     closable:false,
 326                     region : 'center',
 327                     html : 'some body center'
 328
 329                 },
 330
 331                 {
 332                     xtype : 'Nest',
 333                     title : "Title Nest Center",
 334
 335                     xns: Roo.bootstrap.panel,
 336                     region : 'center',
 337
 338                     layout : {
 339                         xtype : 'Border',
 340                         xns: Roo.bootstrap.layout,
 341                         south: {
 342                             xtype : 'Region',
 343                             xns: Roo.bootstrap.layout,
 344                                 split:true,
 345                                 initialSize: 200,
 346                                 minSize: 100,
 347                                 maxSize: 400,
 348                                 autoScroll:true,
 349                                 collapsible:true,
 350                                 titlebar: true
 351                             },
 352                             center: {
 353                             xtype : 'Region',
 354                             xns: Roo.bootstrap.layout,
 355                                 autoScroll:true,
 356                             },
 357                         items : [
 358                             {
 359                                 xtype : 'Content',
 360                                 xns: Roo.bootstrap.panel,
 361                                 title : "More Info",
 362                                 region : 'south',
 363                                 html : 'some body south'
 364                             },
 365                             {
 366                                 xtype : 'Content',
 367                                 xns: Roo.bootstrap.panel,
 368                                 title : "the body",
 369                                 region : 'center',
 370                                 html : 'some body center'
 371                             },
 372                         ]
 373                     }
 374
 375
 376                 }
 377
 378             ]
 379
 380         }
 381     }
 382 });
 383
 384    Roo.onReady(function() {
 385         Roo.XComponent.is_alt = true;
 386           Roo.XComponent.build();
 387           //dRoo.bootstrap.Tooltip.init();
 388       });
 389
 390         </script>
 391 </head>
 392 <body class="xtheme-gray">
 393
 394  </body>
 395 </html>