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

   1
   2
   3 Roo.example = Roo.example || {};
   4
   5 Roo.example.bootstrap = new Roo.XComponent({
   6     part     :  ["layout","viewpanel"],
   7     order    : '001-viewpanel',
   8     region   : '',
   9     parent   : '#bootstrap',
  10     name     : "unnamed module",
  11     disabled : false,
  12     permname : '',
  13     _tree    : function() {
  14         this.parent = {
  15             el : new Roo.bootstrap.Body(),
  16         }
  17         this.parent.el.layout = false;
  18         this.parent.el.render(document.body);
  19
  20         var _this = this;
  21         var MODULE = this;
  22         return {
  23             xtype: 'Body',
  24             xns: Roo.bootstrap,
  25             items: [
  26                 {
  27                     xtype: 'NavHeaderbar',
  28                     xns: Roo.bootstrap,
  29                     bar: true,
  30                     position: 'static-top',
  31                     inverse: true,
  32                     brand: '<img src="http://detail.herokuapp.com/img/logo.png" alt="logo">',
  33                     collapse: true,
  34                     items: [
  35                         {
  36                             xtype: 'NavGroup',
  37                             xns: Roo.bootstrap,
  38                             align: 'right',
  39                             items: [
  40                                 {
  41                                     xtype: 'NavItem',
  42                                     xns: Roo.bootstrap,
  43                                     items: [
  44                                         {
  45                                             xtype: 'Element',
  46                                             xns: Roo.bootstrap,
  47                                             tag: 'input',
  48                                             cls: 'search',
  49                                             type: 'text'
  50                                         }
  51                                     ]
  52                                 }
  53                             ]
  54                         }
  55                     ]
  56                 },
  57                 {
  58                     xtype: 'NavSidebar',
  59                     xns: Roo.bootstrap,
  60                     sidebar: true,
  61                     items: [
  62                         {
  63                             xtype: 'NavGroup',
  64                             xns: Roo.bootstrap,
  65                             items: [
  66                                 {
  67                                     xtype: 'NavItem',
  68                                     xns: Roo.bootstrap,
  69                                     href: '#',
  70                                     glyphicon: 'home',
  71                                     html: 'Hello'
  72                                 },
  73                                 {
  74                                     xtype: 'NavItem',
  75                                     xns: Roo.bootstrap,
  76                                     href: '#',
  77                                     glyphicon: 'stats',
  78                                     html: 'Charts'
  79                                 },
  80                                 {
  81                                     xtype: 'NavItem',
  82                                     xns: Roo.bootstrap,
  83                                     href: '#',
  84                                     glyphicon: 'user',
  85                                     html: 'Users',
  86                                     active: true,
  87                                     menu:  {
  88                                         xtype: 'Menu',
  89                                         xns: Roo.bootstrap,
  90                                         type: 'submenu',
  91                                         items : [
  92                                             {
  93                                                 xtype: 'MenuItem',
  94                                                 xns: Roo.bootstrap,
  95                                                 html: "User list",
  96                                                 href : 'http://roojs.com'
  97                                             },
  98                                             {
  99                                                 xtype: 'MenuItem',
 100                                                 xns: Roo.bootstrap,
 101                                                 html: "New user form",
 102                                                 href : 'http://roojs.com'
 103                                             },
 104                                             {
 105                                                 xtype: 'MenuItem',
 106                                                 xns: Roo.bootstrap,
 107                                                 html: "User profile",
 108                                                 href : 'http://roojs.com'
 109                                             }
 110                                         ]
 111                                     }
 112                                 },
 113                                 {
 114                                     xtype: 'NavItem',
 115                                     xns: Roo.bootstrap,
 116                                     href: '#',
 117                                     glyphicon: 'edit',
 118                                     html: 'Forms'
 119                                 },
 120                                 {
 121                                     xtype: 'NavItem',
 122                                     xns: Roo.bootstrap,
 123                                     href: '#',
 124                                     glyphicon: 'picture',
 125                                     html: 'Gallery'
 126                                 },
 127                                 {
 128                                     xtype: 'NavItem',
 129                                     xns: Roo.bootstrap,
 130                                     href: '#',
 131                                     glyphicon: 'calendar',
 132                                     html: 'Calendar'
 133                                 },
 134                                 {
 135                                     xtype: 'NavItem',
 136                                     xns: Roo.bootstrap,
 137                                     href: '#',
 138                                     glyphicon: 'th-large',
 139                                     html: 'Tables'
 140                                 },
 141                                 {
 142                                     xtype: 'NavItem',
 143                                     xns: Roo.bootstrap,
 144                                     href: '#',
 145                                     glyphicon: 'flash',
 146                                     html: 'UI Elements'
 147                                 },
 148                                 {
 149                                     xtype: 'NavItem',
 150                                     xns: Roo.bootstrap,
 151                                     href: '#',
 152                                     glyphicon: 'cog',
 153                                     html: 'My Info'
 154                                 },
 155                                 {
 156                                     xtype: 'NavItem',
 157                                     xns: Roo.bootstrap,
 158                                     href: '#',
 159                                     glyphicon: 'share-alt',
 160                                     html: 'Extras'
 161                                 }
 162                             ]
 163                         }
 164                     ]
 165                 },
 166                 {
 167                     xtype: 'Container',
 168                     xns: Roo.bootstrap,
 169                     cls: 'content',
 170                     items: [
 171                         {
 172                             xtype: 'Container',
 173                             xns: Roo.bootstrap,
 174                             cls: 'pad-wrapper',
 175                             items: [
 176                                 {
 177                                     xtype: 'Row',
 178                                     xns: Roo.bootstrap,
 179                                     cls: 'section btns',
 180                                     items: [
 181                                         {
 182                                             xtype: 'Header',
 183                                             xns: Roo.bootstrap,
 184                                             level: 4,
 185                                             html: 'Flat Buttons',
 186                                             cls: 'title'
 187                                         },
 188                                         {
 189                                             xtype: 'Column',
 190                                             xns: Roo.bootstrap,
 191                                             md: 6,
 192                                             items: [
 193                                                 {
 194                                                     xtype: 'Table',
 195                                                     xns: Roo.bootstrap,
 196                                                     items: [
 197                                                         {
 198                                                             xtype: 'TableBody',
 199                                                             xns: Roo.bootstrap,
 200                                                             items: [
 201                                                                 {
 202                                                                     xtype: 'TableRow',
 203                                                                     xns: Roo.bootstrap,
 204                                                                     items: [
 205                                                                         {
 206                                                                             xtype: 'TableCell',
 207                                                                             xns: Roo.bootstrap,
 208                                                                             html: '<code>.btn-flat.inverse</code>'
 209                                                                         },
 210                                                                         {
 211                                                                             xtype: 'TableCell',
 212                                                                             xns: Roo.bootstrap,
 213                                                                             items: [
 214                                                                                 {
 215                                                                                     xtype: 'Element',
 216                                                                                     xns: Roo.bootstrap,
 217                                                                                     tag: 'a',
 218                                                                                     cls: 'btn-flat inverse',
 219                                                                                     html: 'INVERSE BUTTON'
 220                                                                                 }
 221                                                                             ]
 222                                                                         }
 223                                                                     ]
 224                                                                 },
 225                                                                 {
 226                                                                     xtype: 'TableRow',
 227                                                                     xns: Roo.bootstrap,
 228                                                                     items: [
 229                                                                         {
 230                                                                             xtype: 'TableCell',
 231                                                                             xns: Roo.bootstrap,
 232                                                                             html: '<code>.btn-flat.white</code>'
 233                                                                         },
 234                                                                         {
 235                                                                             xtype: 'TableCell',
 236                                                                             xns: Roo.bootstrap,
 237                                                                             items: [
 238                                                                                 {
 239                                                                                     xtype: 'Element',
 240                                                                                     xns: Roo.bootstrap,
 241                                                                                     tag: 'a',
 242                                                                                     cls: 'btn-flat white',
 243                                                                                     html: 'WHITE BUTTON'
 244                                                                                 }
 245                                                                             ]
 246                                                                         }
 247                                                                     ]
 248                                                                 },
 249                                                                 {
 250                                                                     xtype: 'TableRow',
 251                                                                     xns: Roo.bootstrap,
 252                                                                     items: [
 253                                                                         {
 254                                                                             xtype: 'TableCell',
 255                                                                             xns: Roo.bootstrap,
 256                                                                             html: '<code>.btn-flat.gray</code>'
 257                                                                         },
 258                                                                         {
 259                                                                             xtype: 'TableCell',
 260                                                                             xns: Roo.bootstrap,
 261                                                                             items: [
 262                                                                                 {
 263                                                                                     xtype: 'Element',
 264                                                                                     xns: Roo.bootstrap,
 265                                                                                     tag: 'a',
 266                                                                                     cls: 'btn-flat gray',
 267                                                                                     html: 'GRAY BUTTON'
 268                                                                                 }
 269                                                                             ]
 270                                                                         }
 271                                                                     ]
 272                                                                 },
 273                                                                 {
 274                                                                     xtype: 'TableRow',
 275                                                                     xns: Roo.bootstrap,
 276                                                                     items: [
 277                                                                         {
 278                                                                             xtype: 'TableCell',
 279                                                                             xns: Roo.bootstrap,
 280                                                                             html: '<code>.btn-flat.default</code>'
 281                                                                         },
 282                                                                         {
 283                                                                             xtype: 'TableCell',
 284                                                                             xns: Roo.bootstrap,
 285                                                                             items: [
 286                                                                                 {
 287                                                                                     xtype: 'Element',
 288                                                                                     xns: Roo.bootstrap,
 289                                                                                     tag: 'a',
 290                                                                                     cls: 'btn-flat default',
 291                                                                                     html: 'DEFAULT BUTTON'
 292                                                                                 }
 293                                                                             ]
 294                                                                         }
 295                                                                     ]
 296                                                                 },
 297                                                                 {
 298                                                                     xtype: 'TableRow',
 299                                                                     xns: Roo.bootstrap,
 300                                                                     items: [
 301                                                                         {
 302                                                                             xtype: 'TableCell',
 303                                                                             xns: Roo.bootstrap,
 304                                                                             html: '<code>.btn-flat.primary</code>'
 305                                                                         },
 306                                                                         {
 307                                                                             xtype: 'TableCell',
 308                                                                             xns: Roo.bootstrap,
 309                                                                             items: [
 310                                                                                 {
 311                                                                                     xtype: 'Element',
 312                                                                                     xns: Roo.bootstrap,
 313                                                                                     tag: 'a',
 314                                                                                     cls: 'btn-flat primary',
 315                                                                                     html: 'PRIMARY BUTTON'
 316                                                                                 }
 317                                                                             ]
 318                                                                         }
 319                                                                     ]
 320                                                                 },
 321                                                                 {
 322                                                                     xtype: 'TableRow',
 323                                                                     xns: Roo.bootstrap,
 324                                                                     items: [
 325                                                                         {
 326                                                                             xtype: 'TableCell',
 327                                                                             xns: Roo.bootstrap,
 328                                                                             html: '<code>.btn-flat.success</code>'
 329                                                                         },
 330                                                                         {
 331                                                                             xtype: 'TableCell',
 332                                                                             xns: Roo.bootstrap,
 333                                                                             items: [
 334                                                                                 {
 335                                                                                     xtype: 'Element',
 336                                                                                     xns: Roo.bootstrap,
 337                                                                                     tag: 'a',
 338                                                                                     cls: 'btn-flat success',
 339                                                                                     html: 'SUCCESS BUTTON'
 340                                                                                 }
 341                                                                             ]
 342                                                                         }
 343                                                                     ]
 344                                                                 },
 345                                                                 {
 346                                                                     xtype: 'TableRow',
 347                                                                     xns: Roo.bootstrap,
 348                                                                     items: [
 349                                                                         {
 350                                                                             xtype: 'TableCell',
 351                                                                             xns: Roo.bootstrap,
 352                                                                             html: '<code>.btn-flat.gray</code>'
 353                                                                         },
 354                                                                         {
 355                                                                             xtype: 'TableCell',
 356                                                                             xns: Roo.bootstrap,
 357                                                                             items: [
 358                                                                                 {
 359                                                                                     xtype: 'Element',
 360                                                                                     xns: Roo.bootstrap,
 361                                                                                     tag: 'a',
 362                                                                                     cls: 'btn-flat info',
 363                                                                                     html: 'INFO BUTTON'
 364                                                                                 }
 365                                                                             ]
 366                                                                         }
 367                                                                     ]
 368                                                                 },
 369                                                                 {
 370                                                                     xtype: 'TableRow',
 371                                                                     xns: Roo.bootstrap,
 372                                                                     items: [
 373                                                                         {
 374                                                                             xtype: 'TableCell',
 375                                                                             xns: Roo.bootstrap,
 376                                                                             html: '<code>.btn-flat.danger</code>'
 377                                                                         },
 378                                                                         {
 379                                                                             xtype: 'TableCell',
 380                                                                             xns: Roo.bootstrap,
 381                                                                             items: [
 382                                                                                 {
 383                                                                                     xtype: 'Element',
 384                                                                                     xns: Roo.bootstrap,
 385                                                                                     tag: 'a',
 386                                                                                     cls: 'btn-flat danger',
 387                                                                                     html: 'DANGER BUTTON'
 388                                                                                 }
 389                                                                             ]
 390                                                                         }
 391                                                                     ]
 392                                                                 }
 393                                                             ]
 394                                                         }
 395                                                     ]
 396                                                 }
 397                                             ]
 398                                         },
 399                                         {
 400                                             xtype: 'Column',
 401                                             xns: Roo.bootstrap,
 402                                             md: 5,
 403                                             items: [
 404                                                 {
 405                                                     xtype: 'Row',
 406                                                     xns: Roo.bootstrap,
 407                                                     cls: 'ctrls',
 408                                                     items: [
 409                                                         {
 410                                                             xtype: 'ButtonGroup',
 411                                                             xns: Roo.bootstrap,
 412                                                             cls: 'large',
 413                                                             btn: false,
 414                                                             items: [
 415                                                                 {
 416                                                                     xtype: 'Button',
 417                                                                     xns: Roo.bootstrap,
 418                                                                     cls: 'glow left',
 419                                                                     html: ' ',
 420                                                                     glyphicon: 'link'
 421                                                                 },
 422                                                                 {
 423                                                                     xtype: 'Button',
 424                                                                     xns: Roo.bootstrap,
 425                                                                     cls: 'glow middle',
 426                                                                     html: ' ',
 427                                                                     glyphicon: 'random'
 428                                                                 },
 429                                                                 {
 430                                                                     xtype: 'Button',
 431                                                                     xns: Roo.bootstrap,
 432                                                                     cls: 'glow middle',
 433                                                                     html: ' ',
 434                                                                     glyphicon: 'fullscreen'
 435                                                                 },
 436                                                                 {
 437                                                                     xtype: 'Button',
 438                                                                     xns: Roo.bootstrap,
 439                                                                     cls: 'glow right',
 440                                                                     html: ' ',
 441                                                                     glyphicon: 'zoom-out'
 442                                                                 }
 443                                                             ]
 444                                                         },
 445                                                         {
 446                                                             xtype: 'ButtonGroup',
 447                                                             xns: Roo.bootstrap,
 448                                                             btn: false,
 449                                                             items: [
 450                                                                 {
 451                                                                     xtype: 'Button',
 452                                                                     xns: Roo.bootstrap,
 453                                                                     cls: 'glow left',
 454                                                                     html: 'LEFT',
 455                                                                     active: true
 456                                                                 },
 457                                                                 {
 458                                                                     xtype: 'Button',
 459                                                                     xns: Roo.bootstrap,
 460                                                                     cls: 'glow middle',
 461                                                                     html: 'RIGHT'
 462                                                                 }
 463                                                             ]
 464                                                         },
 465                                                         {
 466                                                             xtype: 'ButtonGroup',
 467                                                             xns: Roo.bootstrap,
 468                                                             cls: 'large',
 469                                                             btn: false,
 470                                                             items: [
 471                                                                 {
 472                                                                     xtype: 'Button',
 473                                                                     xns: Roo.bootstrap,
 474                                                                     cls: 'glow left',
 475                                                                     glyphicon: 'play',
 476                                                                     html: ' '
 477                                                                 },
 478                                                                 {
 479                                                                     xtype: 'Button',
 480                                                                     xns: Roo.bootstrap,
 481                                                                     cls: 'glow middle',
 482                                                                     glyphicon: 'pause',
 483                                                                     html: ' '
 484                                                                 },
 485                                                                 {
 486                                                                     xtype: 'Button',
 487                                                                     xns: Roo.bootstrap,
 488                                                                     cls: 'glow right',
 489                                                                     glyphicon: 'stop',
 490                                                                     html: ' '
 491                                                                 }
 492                                                             ]
 493                                                         }
 494                                                     ]
 495                                                 },
 496                                                 {
 497                                                     xtype: 'Row',
 498                                                     xns: Roo.bootstrap,
 499                                                     cls: 'ctrls',
 500                                                     items: [
 501                                                         {
 502                                                             xtype: 'Button',
 503                                                             xns: Roo.bootstrap,
 504                                                             cls:'btn-flat icon',
 505                                                             html: 'Fork me on github',
 506                                                             glyphicon: 'circle-arrow-up'
 507                                                         },
 508                                                         {
 509                                                             xtype: 'Button',
 510                                                             xns: Roo.bootstrap,
 511                                                             theme: 'glow',
 512                                                             html: 'Icon button',
 513                                                             glyphicon: 'wrench'
 514                                                         },
 515                                                         {
 516                                                             xtype: 'ButtonGroup',
 517                                                             xns: Roo.bootstrap,
 518                                                             items: [
 519                                                                 {
 520                                                                     xtype: 'Button',
 521                                                                     xns: Roo.bootstrap,
 522                                                                     cls: 'btn glow',
 523                                                                     html: 'Drop down'
 524                                                                 },
 525                                                                 {
 526                                                                     xtype: 'Button',
 527                                                                     xns: Roo.bootstrap,
 528                                                                     cls: 'btn glow',
 529                                                                     html: '<span class="caret"></span>',
 530                                                                     menu: {
 531                                                                         xtype: 'Menu',
 532                                                                         xns: Roo.bootstrap,
 533                                                                         items: [
 534                                                                             {
 535                                                                                 xtype: 'MenuItem',
 536                                                                                 xns: Roo.bootstrap,
 537                                                                                 html: "hello aaa",
 538                                                                                 href : 'http://roojs.com'
 539                                                                             },
 540                                                                             {
 541                                                                                 xtype: 'MenuItem',
 542                                                                                 xns: Roo.bootstrap,
 543                                                                                 html: "hello aaa",
 544                                                                                 href : 'http://roojs.com'
 545                                                                             },
 546                                                                             {
 547                                                                                 xtype: 'MenuItem',
 548                                                                                 xns: Roo.bootstrap,
 549                                                                                 html: "hello aaa",
 550                                                                                 href : 'http://roojs.com'
 551                                                                             }
 552                                                                         ]
 553                                                                     }
 554                                                                 }
 555                                                             ]
 556                                                         }
 557                                                     ]
 558                                                 },
 559                                                 {
 560                                                     xtype: 'Row',
 561                                                     xns: Roo.bootstrap,
 562                                                     cls: 'ctrls',
 563                                                     items: [
 564                                                         {
 565                                                             xtype: 'Pagination',
 566                                                             xns: Roo.bootstrap,
 567                                                             inverse: false,
 568                                                             align: 'left',
 569                                                             from: 1,
 570                                                             to: 4,
 571                                                             active: 1
 572                                                         },
 573                                                         {
 574                                                             xtype: 'Pagination',
 575                                                             xns: Roo.bootstrap,
 576                                                             inverse: true,
 577                                                             align: 'left',
 578                                                             from: 1,
 579                                                             to: 4,
 580                                                             active: 1
 581                                                         }
 582                                                     ]
 583                                                 },
 584                                                 {
 585                                                     xtype: 'Row',
 586                                                     xns: Roo.bootstrap,
 587                                                     cls: 'ctrls',
 588                                                     items: [
 589                                                         {
 590                                                             xtype: 'Element',
 591                                                             xns: Roo.bootstrap,
 592                                                             html: '<input class="search" type="text" placeholder="Search input...">'
 593                                                         }
 594                                                     ]
 595                                                 },
 596                                                 {
 597                                                     xtype: 'Header',
 598                                                     xns: Roo.bootstrap,
 599                                                     level: 4,
 600                                                     html: 'Switch buttons',
 601                                                     cls: 'title'
 602                                                 },
 603                                                 {
 604                                                     xtype: 'Row',
 605                                                     xns: Roo.bootstrap,
 606                                                     cls: 'ctrls',
 607                                                     items: [
 608                                                         {
 609                                                             xtype: 'Button',
 610                                                             xns: Roo.bootstrap,
 611                                                             toggle: true,
 612                                                             ontext: 'ON',
 613                                                             offtext: 'OFF',
 614                                                             defaulton: false
 615                                                         },
 616                                                         {
 617                                                             xtype: 'Button',
 618                                                             xns: Roo.bootstrap,
 619                                                             toggle: true,
 620                                                             ontext: 'ON',
 621                                                             offtext: 'OFF',
 622                                                             defaulton: false,
 623                                                             weight: 'primary'
 624                                                         },
 625                                                         {
 626                                                             xtype: 'Button',
 627                                                             xns: Roo.bootstrap,
 628                                                             toggle: true,
 629                                                             ontext: 'ON',
 630                                                             offtext: 'OFF',
 631                                                             defaulton: false,
 632                                                             weight: 'info'
 633                                                         },
 634                                                         {
 635                                                             xtype: 'Button',
 636                                                             xns: Roo.bootstrap,
 637                                                             toggle: true,
 638                                                             ontext: 'ON',
 639                                                             offtext: 'OFF',
 640                                                             defaulton: false,
 641                                                             weight: 'success'
 642                                                         },
 643                                                         {
 644                                                             xtype: 'Button',
 645                                                             xns: Roo.bootstrap,
 646                                                             toggle: true,
 647                                                             ontext: 'ON',
 648                                                             offtext: 'OFF',
 649                                                             defaulton: false,
 650                                                             weight: 'danger'
 651                                                         }
 652                                                     ]
 653                                                 }
 654                                             ]
 655                                         }
 656                                     ]
 657                                 },
 658                                 {
 659                                     xtype: 'Row',
 660                                     xns: Roo.bootstrap,
 661                                     cls: 'section btns',
 662                                     items: [
 663                                         {
 664                                             xtype: 'Column',
 665                                             xns: Roo.bootstrap,
 666                                             md: 6,
 667                                             items: [
 668                                                 {
 669                                                     xtype: 'Header',
 670                                                     xns: Roo.bootstrap,
 671                                                     level: 4,
 672                                                     html: 'Glow Buttons',
 673                                                     cls: 'title'
 674                                                 },
 675                                                 {
 676                                                     xtype: 'Table',
 677                                                     xns: Roo.bootstrap,
 678                                                     items: [
 679                                                         {
 680                                                             xtype: 'TableBody',
 681                                                             xns: Roo.bootstrap,
 682                                                             items: [
 683                                                                 {
 684                                                                     xtype: 'TableRow',
 685                                                                     xns: Roo.bootstrap,
 686                                                                     items: [
 687                                                                         {
 688                                                                             xtype: 'TableCell',
 689                                                                             xns: Roo.bootstrap,
 690                                                                             html: '<code>.btn-glow</code>'
 691                                                                         },
 692                                                                         {
 693                                                                             xtype: 'TableCell',
 694                                                                             xns: Roo.bootstrap,
 695                                                                             items: [
 696                                                                                 {
 697                                                                                     xtype: 'Button',
 698                                                                                     xns: Roo.bootstrap,
 699                                                                                     html: 'Sign up now',
 700                                                                                     theme: 'glow'
 701                                                                                 }
 702                                                                             ]
 703                                                                         }
 704                                                                     ]
 705                                                                 },
 706                                                                 {
 707                                                                     xtype: 'TableRow',
 708                                                                     xns: Roo.bootstrap,
 709                                                                     items: [
 710                                                                         {
 711                                                                             xtype: 'TableCell',
 712                                                                             xns: Roo.bootstrap,
 713                                                                             html: '<code>.btn-glow.inverse</code>'
 714                                                                         },
 715                                                                         {
 716                                                                             xtype: 'TableCell',
 717                                                                             xns: Roo.bootstrap,
 718                                                                             items: [
 719                                                                                 {
 720                                                                                     xtype: 'Button',
 721                                                                                     xns: Roo.bootstrap,
 722                                                                                     html: 'Sign up now',
 723                                                                                     theme: 'glow',
 724                                                                                     inverse: true
 725                                                                                 }
 726                                                                             ]
 727                                                                         }
 728                                                                     ]
 729                                                                 },
 730                                                                 {
 731                                                                     xtype: 'TableRow',
 732                                                                     xns: Roo.bootstrap,
 733                                                                     items: [
 734                                                                         {
 735                                                                             xtype: 'TableCell',
 736                                                                             xns: Roo.bootstrap,
 737                                                                             html: '<code>.btn-glow.primary</code>'
 738                                                                         },
 739                                                                         {
 740                                                                             xtype: 'TableCell',
 741                                                                             xns: Roo.bootstrap,
 742                                                                             items: [
 743                                                                                 {
 744                                                                                     xtype: 'Button',
 745                                                                                     xns: Roo.bootstrap,
 746                                                                                     html: 'Sign up now',
 747                                                                                     theme: 'glow',
 748                                                                                     weight: 'primary'
 749                                                                                 }
 750                                                                             ]
 751                                                                         }
 752                                                                     ]
 753                                                                 },
 754                                                                 {
 755                                                                     xtype: 'TableRow',
 756                                                                     xns: Roo.bootstrap,
 757                                                                     items: [
 758                                                                         {
 759                                                                             xtype: 'TableCell',
 760                                                                             xns: Roo.bootstrap,
 761                                                                             html: '<code>.btn-glow.success</code>'
 762                                                                         },
 763                                                                         {
 764                                                                             xtype: 'TableCell',
 765                                                                             xns: Roo.bootstrap,
 766                                                                             items: [
 767                                                                                 {
 768                                                                                     xtype: 'Button',
 769                                                                                     xns: Roo.bootstrap,
 770                                                                                     html: 'Sign up now',
 771                                                                                     theme: 'glow',
 772                                                                                     weight: 'success'
 773                                                                                 }
 774                                                                             ]
 775                                                                         }
 776                                                                     ]
 777                                                                 }
 778                                                             ]
 779                                                         }
 780                                                     ]
 781                                                 }
 782                                             ]
 783                                         },
 784                                         {
 785                                             xtype: 'Column',
 786                                             xns: Roo.bootstrap,
 787                                             md: 5,
 788                                             items: [
 789                                                 {
 790                                                     xtype: 'Header',
 791                                                     xns: Roo.bootstrap,
 792                                                     level: 4,
 793                                                     html: 'Sliders',
 794                                                     cls: 'title'
 795                                                 },
 796                                                 {
 797                                                     xtype: 'Container',
 798                                                     xns: Roo.bootstrap,
 799                                                     cls: 'sliders',
 800                                                     items: [
 801                                                         {
 802                                                             xtype: 'Slider',
 803                                                             xns: Roo.bootstrap,
 804                                                             html: 'Sign up now',
 805                                                             cls: 'btn-glow success'
 806                                                         }
 807                                                     ]
 808                                                 }
 809                                             ]
 810                                         }
 811                                     ]
 812                                 },
 813                                 {
 814                                     xtype: 'Row',
 815                                     xns: Roo.bootstrap,
 816                                     cls: 'section btns',
 817                                     items: [
 818                                         {
 819                                             xtype: 'Column',
 820                                             xns: Roo.bootstrap,
 821                                             md: 6,
 822                                             items: [
 823                                                 {
 824                                                     xtype: 'Header',
 825                                                     xns: Roo.bootstrap,
 826                                                     level: 4,
 827                                                     html: 'Bootstrap 3 buttons',
 828                                                     cls: 'title'
 829                                                 },
 830                                                 {
 831                                                     xtype: 'Table',
 832                                                     xns: Roo.bootstrap,
 833                                                     items: [
 834                                                         {
 835                                                             xtype: 'TableBody',
 836                                                             xns: Roo.bootstrap,
 837                                                             items: [
 838                                                                 {
 839                                                                     xtype: 'TableRow',
 840                                                                     xns: Roo.bootstrap,
 841                                                                     items: [
 842                                                                         {
 843                                                                             xtype: 'TableCell',
 844                                                                             xns: Roo.bootstrap,
 845                                                                             html: '<code>.btn.btn-default</code>'
 846                                                                         },
 847                                                                         {
 848                                                                             xtype: 'TableCell',
 849                                                                             xns: Roo.bootstrap,
 850                                                                             items: [
 851                                                                                 {
 852                                                                                     xtype: 'Button',
 853                                                                                     xns: Roo.bootstrap,
 854                                                                                     html: 'Sign up now'
 855                                                                                 }
 856                                                                             ]
 857                                                                         }
 858                                                                     ]
 859                                                                 },
 860                                                                 {
 861                                                                     xtype: 'TableRow',
 862                                                                     xns: Roo.bootstrap,
 863                                                                     items: [
 864                                                                         {
 865                                                                             xtype: 'TableCell',
 866                                                                             xns: Roo.bootstrap,
 867                                                                             html: '<code>.btn.btn-primary</code>'
 868                                                                         },
 869                                                                         {
 870                                                                             xtype: 'TableCell',
 871                                                                             xns: Roo.bootstrap,
 872                                                                             items: [
 873                                                                                 {
 874                                                                                     xtype: 'Button',
 875                                                                                     weight: 'primary',
 876                                                                                     xns: Roo.bootstrap,
 877                                                                                     html: 'Sign up now'
 878                                                                                 }
 879                                                                             ]
 880                                                                         }
 881                                                                     ]
 882                                                                 },
 883                                                                 {
 884                                                                     xtype: 'TableRow',
 885                                                                     xns: Roo.bootstrap,
 886                                                                     items: [
 887                                                                         {
 888                                                                             xtype: 'TableCell',
 889                                                                             xns: Roo.bootstrap,
 890                                                                             html: '<code>.btn.btn-success</code>'
 891                                                                         },
 892                                                                         {
 893                                                                             xtype: 'TableCell',
 894                                                                             xns: Roo.bootstrap,
 895                                                                             items: [
 896                                                                                 {
 897                                                                                     xtype: 'Button',
 898                                                                                     weight: 'success',
 899                                                                                     xns: Roo.bootstrap,
 900                                                                                     html: 'Sign up now'
 901                                                                                 }
 902                                                                             ]
 903                                                                         }
 904                                                                     ]
 905                                                                 },
 906                                                                 {
 907                                                                     xtype: 'TableRow',
 908                                                                     xns: Roo.bootstrap,
 909                                                                     items: [
 910                                                                         {
 911                                                                             xtype: 'TableCell',
 912                                                                             xns: Roo.bootstrap,
 913                                                                             html: '<code>.btn.btn-warning</code>'
 914                                                                         },
 915                                                                         {
 916                                                                             xtype: 'TableCell',
 917                                                                             xns: Roo.bootstrap,
 918                                                                             items: [
 919                                                                                 {
 920                                                                                     xtype: 'Button',
 921                                                                                     weight: 'warning',
 922                                                                                     xns: Roo.bootstrap,
 923                                                                                     html: 'Sign up now'
 924                                                                                 }
 925                                                                             ]
 926                                                                         }
 927                                                                     ]
 928                                                                 },
 929                                                                 {
 930                                                                     xtype: 'TableRow',
 931                                                                     xns: Roo.bootstrap,
 932                                                                     items: [
 933                                                                         {
 934                                                                             xtype: 'TableCell',
 935                                                                             xns: Roo.bootstrap,
 936                                                                             html: '<code>.btn.btn-info</code>'
 937                                                                         },
 938                                                                         {
 939                                                                             xtype: 'TableCell',
 940                                                                             xns: Roo.bootstrap,
 941                                                                             items: [
 942                                                                                 {
 943                                                                                     xtype: 'Button',
 944                                                                                     weight: 'info',
 945                                                                                     xns: Roo.bootstrap,
 946                                                                                     html: 'Sign up now'
 947                                                                                 }
 948                                                                             ]
 949                                                                         }
 950                                                                     ]
 951                                                                 },
 952                                                                 {
 953                                                                     xtype: 'TableRow',
 954                                                                     xns: Roo.bootstrap,
 955                                                                     items: [
 956                                                                         {
 957                                                                             xtype: 'TableCell',
 958                                                                             xns: Roo.bootstrap,
 959                                                                             html: '<code>.btn.btn-danger</code>'
 960                                                                         },
 961                                                                         {
 962                                                                             xtype: 'TableCell',
 963                                                                             xns: Roo.bootstrap,
 964                                                                             items: [
 965                                                                                 {
 966                                                                                     xtype: 'Button',
 967                                                                                     weight: 'danger',
 968                                                                                     xns: Roo.bootstrap,
 969                                                                                     html: 'Sign up now'
 970                                                                                 }
 971                                                                             ]
 972                                                                         }
 973                                                                     ]
 974                                                                 }
 975                                                             ]
 976                                                         }
 977                                                     ]
 978                                                 }
 979                                             ]
 980                                         },
 981                                         {
 982                                             xtype: 'Column',
 983                                             xns: Roo.bootstrap,
 984                                             md: 5,
 985                                             items: [
 986                                                 {
 987                                                     xtype: 'Header',
 988                                                     xns: Roo.bootstrap,
 989                                                     level: 4,
 990                                                     html: 'Bootstrap 3 buttons',
 991                                                     cls: 'title'
 992                                                 },
 993                                                 {
 994                                                     xtype: 'Row',
 995                                                     xns: Roo.bootstrap,
 996                                                     cls: 'ctrls',
 997                                                     items: [
 998                                                         {
 999                                                             xtype: 'Element',
1000                                                             xns: Roo.bootstrap,
1001                                                             cls: 'dropdown',
1002                                                             items: [
1003                                                                 {
1004                                                                     xtype: 'Element',
1005                                                                     xns: Roo.bootstrap,
1006                                                                     tag: 'ul',
1007                                                                     cls: 'dropdown-menu',
1008                                                                     items: [
1009                                                                         {
1010                                                                             xtype: 'Element',
1011                                                                             xns: Roo.bootstrap,
1012                                                                             tag: 'li',
1013                                                                             cls: 'dropdown-header',
1014                                                                             html: 'Dropdown header'
1015                                                                         }
1016                                                                     ]
1017                                                                 }
1018                                                             ]
1019                                                         },
1020                                                         {
1021                                                             xtype: 'ButtonGroup',
1022                                                             xns: Roo.bootstrap,
1023                                                             items: [
1024                                                                 {
1025                                                                     xtype: 'Button',
1026                                                                     xns: Roo.bootstrap,
1027                                                                     html: '1'
1028                                                                 },
1029                                                                 {
1030                                                                     xtype: 'Button',
1031                                                                     xns: Roo.bootstrap,
1032                                                                     html: '2'
1033                                                                 },
1034                                                                 {
1035                                                                     xtype: 'Button',
1036                                                                     xns: Roo.bootstrap,
1037                                                                     html: '3'
1038                                                                 },
1039                                                                 {
1040                                                                     xtype: 'Button',
1041                                                                     xns: Roo.bootstrap,
1042                                                                     html: 'Dropdown',
1043                                                                     menu: {
1044                                                                         xtype: 'Menu',
1045                                                                         xns: Roo.bootstrap,
1046                                                                         items: [
1047                                                                             {
1048                                                                                 xtype: 'MenuItem',
1049                                                                                 xns: Roo.bootstrap,
1050                                                                                 html: "hello aaa",
1051                                                                                 href : 'http://roojs.com'
1052                                                                             },
1053                                                                             {
1054                                                                                 xtype: 'MenuItem',
1055                                                                                 xns: Roo.bootstrap,
1056                                                                                 html: "hello aaa",
1057                                                                                 href : 'http://roojs.com'
1058                                                                             },
1059                                                                             {
1060                                                                                 xtype: 'MenuItem',
1061                                                                                 xns: Roo.bootstrap,
1062                                                                                 html: "hello aaa",
1063                                                                                 href : 'http://roojs.com'
1064                                                                             }
1065                                                                         ]
1066                                                                     }
1067                                                                 }
1068                                                             ]
1069                                                         }
1070                                                     ]
1071                                                 },
1072                                                 {
1073                                                     xtype: 'Row',
1074                                                     xns: Roo.bootstrap,
1075                                                     cls: 'ctrls',
1076                                                     items: [
1077                                                         {
1078                                                             xtype: 'NavSimplebar',
1079                                                             xns: Roo.bootstrap,
1080                                                             bar: false,
1081                                                             type: 'tabs',
1082                                                             items: [
1083                                                                 {
1084                                                                     xtype: 'Button',
1085                                                                     xns: Roo.bootstrap,
1086                                                                     html: 'Home',
1087                                                                     active: true
1088                                                                 },
1089                                                                 {
1090                                                                     xtype: 'Button',
1091                                                                     xns: Roo.bootstrap,
1092                                                                     html: 'Profile',
1093                                                                     active: true
1094                                                                 },
1095                                                                 {
1096                                                                     xtype: 'Button',
1097                                                                     xns: Roo.bootstrap,
1098                                                                     html: 'Messages',
1099                                                                     active: true
1100                                                                 }
1101                                                             ]
1102                                                         }
1103                                                     ]
1104                                                 },
1105                                                 {
1106                                                     xtype: 'Row',
1107                                                     xns: Roo.bootstrap,
1108                                                     cls: 'ctrls',
1109                                                     items: [
1110                                                         {
1111                                                             xtype: 'ButtonGroup',
1112                                                             xns: Roo.bootstrap,
1113                                                             items: [
1114                                                                 {
1115                                                                     xtype: 'Button',
1116                                                                     xns: Roo.bootstrap,
1117                                                                     html: 'Action'
1118                                                                 },
1119                                                                 {
1120                                                                     xtype: 'Button',
1121                                                                     xns: Roo.bootstrap,
1122                                                                     html: 'Action',
1123                                                                     menu: {
1124                                                                         xtype: 'Menu',
1125                                                                         xns: Roo.bootstrap,
1126                                                                         items: [
1127                                                                             {
1128                                                                                 xtype: 'MenuItem',
1129                                                                                 xns: Roo.bootstrap,
1130                                                                                 html: "hello aaa",
1131                                                                                 href : 'http://roojs.com'
1132                                                                             },
1133                                                                             {
1134                                                                                 xtype: 'MenuItem',
1135                                                                                 xns: Roo.bootstrap,
1136                                                                                 html: "hello aaa",
1137                                                                                 href : 'http://roojs.com'
1138                                                                             },
1139                                                                             {
1140                                                                                 xtype: 'MenuItem',
1141                                                                                 xns: Roo.bootstrap,
1142                                                                                 html: "hello aaa",
1143                                                                                 href : 'http://roojs.com'
1144                                                                             }
1145                                                                         ]
1146                                                                     }
1147                                                                 }
1148                                                             ]
1149                                                         }
1150                                                     ]
1151                                                 }
1152                                             ]
1153                                         }
1154                                     ]
1155                                 }
1156                             ]
1157                         }
1158                     ]
1159                 }
1160             ]
1161         };
1162     }
1163 });