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