git.roojs.org Git - roojs1/blob - examples/bootstrap/nested.js

   1
   2 Roo.namespace("Example");
   3
   4 Example.Nested = new Roo.XComponent({
   5     part     :  ["example", "nested" ],
   6     order    : '001-Example-Nested',
   7     region   : 'center',
   8     parent   : false,
   9     name     : "unnamed module",
  10     disabled : false,
  11     permname : '',
  12     _tree : function()
  13     {
  14         var _this = this;
  15         var MODULE = this;
  16         return {
  17             is_root : true,
  18             xtype : 'Border',
  19             xns : Roo.bootstrap.layout,
  20             el : document.body, // border layout can be applied to the outer one...
  21
  22             north: {
  23                 xtype : 'Region',
  24                 xns: Roo.bootstrap.layout,
  25                 overflow : 'visible',
  26
  27                 initialSize: 50,
  28                 titlebar: false
  29
  30             },
  31             center: {
  32                 xtype : 'Region',
  33                 xns: Roo.bootstrap.layout,
  34                 autoScroll: false,
  35                 tabPosition:'west',
  36                 titlebar: true
  37             },
  38             west: {
  39                 xtype : 'Region',
  40                 xns: Roo.bootstrap.layout,
  41                 autoScroll: false,
  42                 tabPosition:'west',
  43                 titlebar: true,
  44                 initialSize: 200,
  45                 title : "Menu"
  46             },
  47             items : [
  48                 {
  49                     xtype : 'Content',
  50                     xns: Roo.bootstrap.panel,
  51                     title : "Title north" ,
  52                     fitToFrame:true,
  53                     closable:false,
  54                     region : 'north',
  55                     items : [
  56                         {
  57                             bar : true,
  58                             position : 'static-top',
  59                             xtype : 'NavHeaderbar',
  60                             tag : 'nav',
  61                             xns : Roo.bootstrap,
  62                             items : [
  63                                 {
  64                                     cls : 'navbar-btn sidebar-toggle',
  65                                     xtype : 'Link',
  66                                     xns : Roo.bootstrap,
  67                                     html : '<span class=\"icon-bar\"></span><span class=\"icon-bar\"></span><span class=\"icon-bar\"></span>'
  68                                 },
  69                                 {
  70                                     xtype : 'NavGroup',
  71                                     align : 'right',
  72                                     xns : Roo.bootstrap,
  73                                     items : [
  74                                         {
  75                                             menu : {
  76                                                 xtype : 'Menu',
  77                                                 xns : Roo.bootstrap,
  78                                                 items : [
  79                                                     {
  80                                                         xtype : 'MenuItem',
  81                                                         xns : Roo.bootstrap,
  82                                                         html : 'test'
  83                                                     }
  84                                                 ]
  85
  86                                             },
  87                                             xtype : 'NavItem',
  88                                             xns : Roo.bootstrap,
  89                                             listeners : {
  90                                                 click : function()
  91                                                 {
  92                                                    // Example.NestedDialog.show({});
  93                                                 }
  94                                             },
  95                                             html : 'test dialog',
  96                                             items : [
  97
  98                                             ]
  99
 100                                         },
 101                                         {
 102                                             xtype : 'NavItem',
 103                                             xns : Roo.bootstrap,
 104                                             html : 'test'
 105                                         }
 106                                     ]
 107
 108                                 }
 109                             ]
 110
 111                         }
 112                     ]
 113
 114                 },
 115
 116
 117
 118
 119                 {
 120                     xtype : 'Nest',
 121                     title : "Title Nest Center",
 122
 123                     xns: Roo.bootstrap.panel,
 124                     region : 'center',
 125
 126                     layout : {
 127                         xtype : 'Border',
 128                         xns: Roo.bootstrap.layout,
 129                         south: {
 130                             xtype : 'Region',
 131                             xns: Roo.bootstrap.layout,
 132                             split:true,
 133                             initialSize: 200,
 134                             minSize: 100,
 135                             maxSize: 400,
 136                             autoScroll:true,
 137                             collapsible:true,
 138                             titlebar: true,
 139                             tabPosition : 'bottom'
 140                          },
 141                         center: {
 142                             xtype : 'Region',
 143                             xns: Roo.bootstrap.layout,
 144                             autoScroll:true,
 145                             tabPosition:'west'
 146                         },
 147
 148                         west: {
 149                             xtype : 'Region',
 150                             xns: Roo.bootstrap.layout,
 151                             split:true,
 152                             tabPosition: 'top',
 153                             initialSize: 400,
 154                             titlebar: true,
 155                            // collapsible: true,
 156                             minSize: 100,
 157                             maxSize: 500
 158                         },
 159
 160                         items : [
 161                             {
 162                                 xtype : 'Content',
 163                                 xns: Roo.bootstrap.panel,
 164                                 title : "South Tab 1",
 165                                 region : 'south',
 166                                 html : 'some body south'
 167                             },
 168                             {
 169                                 xtype : 'Content',
 170                                 xns: Roo.bootstrap.panel,
 171                                 title : "South Tab 2",
 172                                 background : true,
 173                                 region : 'south',
 174                                 html : 'some body south'
 175                             },
 176                             {
 177                                 xtype : 'Content',
 178                                 xns: Roo.bootstrap.panel,
 179                                 title : "the body",
 180                                 region : 'center',
 181                                 html : 'some body center'
 182                             },
 183                              {
 184                                 xtype : 'Content',
 185                                 xns: Roo.bootstrap.panel,
 186                                 title : "the body 2",
 187                                 region : 'center',
 188                                 html : 'some body center 2 '
 189                             },
 190
 191                             {
 192                                 xtype : 'Content',
 193                                 xns: Roo.bootstrap.panel,
 194                                 title : "Title west a" ,
 195                                 fitToFrame:true,
 196                                 closable:false,
 197                                 region : 'west',
 198                                 html : 'some body west'
 199
 200                             },
 201                             {
 202                                 xtype : 'Grid',
 203                                 xns: Roo.bootstrap.panel,
 204                                 title : "Test Grid",
 205                                 fitToFrame:true,
 206                                 closable:false,
 207                                 region : 'west',
 208                                 listeners : {
 209                                         activate : function()
 210                                         {
 211                                           //  this.grid.store.load.defer(100, this.grid.store);
 212                                             this.grid.footer.onClick('first');
 213                                         }
 214                                     },
 215                                 toolbar : {
 216                                     xtype: 'NavSimplebar',
 217                                     xns : Roo.bootstrap,
 218
 219                                     items: [
 220                                         {
 221                                             xtype: 'NavGroup',
 222                                             xns: Roo.bootstrap,
 223                                             form: true,
 224                                             items : [
 225                                                 {
 226                                                     xtype: 'NavItem',
 227                                                     xns: Roo.bootstrap,
 228                                                     html: 'a button'
 229
 230                                                 },
 231                                                 {
 232                                                     xtype: 'Input',
 233                                                     xns: Roo.bootstrap,
 234                                                     placeholder: 'a text input'
 235
 236                                                 }
 237                                             ]
 238                                         }
 239                                     ]
 240
 241                                 },
 242                                 grid : {
 243                                     loadMask : true,
 244                                     striped : true,
 245                                     xns : Roo.bootstrap,
 246                                     xtype : 'Table',
 247                                     cls : 'table-fixed',
 248                                     rowSelection : true,
 249                                     footer : {
 250                                         xtype : 'PagingToolbar',
 251                                         pageSize : 25,
 252                                         xns : Roo.bootstrap,
 253                                         '|xns' : 'Roo.bootstrap'
 254                                     },
 255                                     store : {
 256                                         xns : Roo.data,
 257                                         xtype : 'Store',
 258
 259                                         proxy : {
 260                                             xns : Roo.data,
 261                                             xtype : 'MemoryProxy',
 262                                             data: [
 263                                                 ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
 264                                                 ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
 265                                                 ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
 266                                                 ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
 267                                                 ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
 268                                                 ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
 269                                                 ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
 270                                                 ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
 271                                                 ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
 272                                                 ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
 273                                                 ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
 274                                                 ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
 275                                                 ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
 276                                                 ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am']
 277                                             ]
 278                                         },
 279                                         reader : {
 280
 281                                             xns : Roo.data,
 282                                             xtype : 'ArrayReader',
 283                                             fields: [
 284                                                 {name: 'company'},
 285                                                 {name: 'price', type: 'float'},
 286                                                 {name: 'change', type: 'float'},
 287                                                 {name: 'pctChange', type: 'float'},
 288                                                 {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
 289                                             ]
 290                                         },
 291                                     },
 292                                     cm : [
 293
 294                                         {
 295                                             id:'company',
 296                                             header: "Company",
 297                                             width: 160,
 298                                             sortable: true,
 299                                             locked:false,
 300                                             dataIndex: 'company',
 301                                             xns : Roo.grid,
 302                                             xtype : 'ColumnModel'
 303                                         },
 304                                         {
 305                                             header: "Price",
 306                                            width: 160,
 307                                             sortable: true,
 308                                             renderer: Roo.util.Format.usMoney,
 309                                             dataIndex: 'price',
 310                                             xns : Roo.grid,
 311                                             xtype : 'ColumnModel'
 312                                         }
 313
 314                                     ]
 315
 316                                 }
 317
 318                             }
 319
 320
 321
 322                         ]
 323                     }
 324
 325
 326                 },
 327                 {
 328                     xtype : 'Content',
 329                     xns: Roo.bootstrap.panel,
 330                     title : "Title Center",
 331                     background : true,
 332                     fitToFrame:true,
 333                     closable:false,
 334                     region : 'center',
 335                     html : 'some body center'
 336
 337                 }
 338
 339             ]
 340
 341         }
 342     }
 343 });
 344
 345    Roo.onReady(function() {
 346         Roo.XComponent.is_alt = true;
 347           Roo.XComponent.build();
 348           //dRoo.bootstrap.Tooltip.init();
 349       });