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