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