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/material-kit/css/material-kit.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 .navbar {
  40     padding: 0;
  41 }
  42
  43
  44 .table-body-fixed tbody {
  45    overflow-y: scroll;
  46   width: 100%;
  47 }
  48 .table-body-fixed  thead,
  49 .table-body-fixed  tbody,
  50 /*.table-body-fixed tr,
  51 .table-body-fixed td, */
  52 .table-body-fixed th   {
  53   display: block;
  54 }
  55 /*
  56 /*.table-body-fixed tbody td,
  57 .table-body-fixed thead > tr> th {
  58   float: left;
  59   border-bottom-width: 0;
  60 }
  61 */
  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: 50,
 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                         {
 122                             bar : true,
 123                             position : 'static-top',
 124                             xtype : 'NavHeaderbar',
 125                             tag : 'nav',
 126                             xns : Roo.bootstrap,
 127                             items : [
 128                                 {
 129                                     cls : 'navbar-btn sidebar-toggle',
 130                                     xtype : 'Link',
 131                                     xns : Roo.bootstrap,
 132                                     html : '<span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span>'
 133                                 },
 134                                 {
 135                                     xtype : 'NavGroup',
 136                                     align : 'right',
 137                                     xns : Roo.bootstrap,
 138                                     items : [
 139                                         {
 140                                             menu : {
 141                                                 xtype : 'Menu',
 142                                                 xns : Roo.bootstrap,
 143                                                 items : [
 144                                                     {
 145                                                         xtype : 'MenuItem',
 146                                                         xns : Roo.bootstrap,
 147                                                         html : 'test'
 148                                                     }
 149                                                 ]
 150
 151                                             },
 152                                             xtype : 'NavItem',
 153                                             xns : Roo.bootstrap,
 154                                             html : 'test',
 155                                             items : [
 156
 157                                             ]
 158
 159                                         },
 160                                         {
 161                                             xtype : 'NavItem',
 162                                             xns : Roo.bootstrap,
 163                                             html : 'test'
 164                                         }
 165                                     ]
 166
 167                                 }
 168                             ]
 169
 170                         }
 171                     ]
 172
 173                 },
 174
 175                 {
 176                     xtype : 'Content',
 177                     xns: Roo.bootstrap.panel,
 178                     title : "Title west" ,
 179                     fitToFrame:true,
 180                     closable:false,
 181                     region : 'west',
 182                     html : 'some body west'
 183
 184                 },
 185                 {
 186                     xtype : 'Grid',
 187                     xns: Roo.bootstrap.panel,
 188                     title : "Test Grid",
 189                     fitToFrame:true,
 190                     closable:false,
 191                     region : 'west',
 192                     listeners : {
 193                             activate : function()
 194                             {
 195                                 this.grid.store.load.defer(100, this.grid.store);
 196                             }
 197                         },
 198                     grid : {
 199                         loadMask : true,
 200                         striped : true,
 201                         xns : Roo.bootstrap,
 202                         xtype : 'Table',
 203                         cls : 'table-fixed',
 204                          store : {
 205                             xns : Roo.data,
 206                             xtype : 'Store',
 207
 208                             proxy : {
 209                                 xns : Roo.data,
 210                                 xtype : 'MemoryProxy',
 211                                 data: [
 212                                     ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
 213                                     ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
 214                                     ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
 215                                     ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
 216                                     ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
 217                                     ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
 218                                     ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
 219                                     ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
 220                                     ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
 221                                     ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
 222                                     ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
 223                                     ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
 224                                     ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
 225                                     ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
 226                                     ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
 227                                     ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
 228                                     ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
 229                                     ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
 230                                     ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
 231                                     ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
 232                                     ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
 233                                     ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
 234                                     ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
 235                                     ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
 236                                     ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
 237                                     ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
 238                                     ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
 239                                     ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
 240                                     ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
 241                                     ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
 242                                 ]
 243                             },
 244                             reader : {
 245
 246                                 xns : Roo.data,
 247                                 xtype : 'ArrayReader',
 248                                 fields: [
 249                                     {name: 'company'},
 250                                     {name: 'price', type: 'float'},
 251                                     {name: 'change', type: 'float'},
 252                                     {name: 'pctChange', type: 'float'},
 253                                     {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
 254                                 ]
 255                             },
 256                         },
 257                         cm : [
 258
 259                             {
 260                                 id:'company',
 261                                 header: "Company",
 262                                 width: 160,
 263                                 sortable: true,
 264                                 locked:false,
 265                                 dataIndex: 'company',
 266                                 xns : Roo.grid,
 267                                 xtype : 'ColumnModel'
 268                             },
 269                             {
 270                                 header: "Price",
 271                                width: 160,
 272                                 sortable: true,
 273                                 renderer: Roo.util.Format.usMoney,
 274                                 dataIndex: 'price',
 275                                 xns : Roo.grid,
 276                                 xtype : 'ColumnModel'
 277                             }
 278
 279                         ]
 280
 281                     }
 282
 283                 },
 284                 {
 285                     xtype : 'Content',
 286                     xns: Roo.bootstrap.panel,
 287                     title : "Title Center",
 288                     fitToFrame:true,
 289                     closable:false,
 290                     region : 'center',
 291                     html : 'some body center'
 292
 293                 },
 294
 295                 {
 296                     xtype : 'Nest',
 297                     title : "Title Nest Center",
 298
 299                     xns: Roo.bootstrap.panel,
 300                     region : 'center',
 301
 302                     layout : {
 303                         xtype : 'Border',
 304                         xns: Roo.bootstrap.layout,
 305                         south: {
 306                             xtype : 'Region',
 307                             xns: Roo.bootstrap.layout,
 308                                 split:true,
 309                                 initialSize: 200,
 310                                 minSize: 100,
 311                                 maxSize: 400,
 312                                 autoScroll:true,
 313                                 collapsible:true,
 314                                 titlebar: true
 315                             },
 316                             center: {
 317                             xtype : 'Region',
 318                             xns: Roo.bootstrap.layout,
 319                                 autoScroll:true,
 320                             },
 321                         items : [
 322                             {
 323                                 xtype : 'Content',
 324                                 xns: Roo.bootstrap.panel,
 325                                 title : "More Info",
 326                                 region : 'south',
 327                                 html : 'some body south'
 328                             },
 329                             {
 330                                 xtype : 'Content',
 331                                 xns: Roo.bootstrap.panel,
 332                                 title : "the body",
 333                                 region : 'center',
 334                                 html : 'some body center'
 335                             },
 336                         ]
 337                     }
 338
 339
 340                 }
 341
 342             ]
 343
 344         }
 345     }
 346 });
 347
 348    Roo.onReady(function() {
 349         Roo.XComponent.is_alt = true;
 350           Roo.XComponent.build();
 351           //dRoo.bootstrap.Tooltip.init();
 352       });
 353
 354         </script>
 355 </head>
 356 <body class="xtheme-gray">
 357
 358  </body>
 359 </html>