git.roojs.org Git - roojs1/blob - examples/bootstrap/bootstrap.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     {
  15         this.parent = {
  16             el : new Roo.bootstrap.Body(),
  17         }
  18         this.parent.el.layout = false;
  19         this.parent.el.render(document.body);
  20
  21         var _this = this;
  22         var MODULE = this;
  23         return {
  24             xtype: 'Body',
  25             xns: Roo.bootstrap,
  26             items : [
  27                  {
  28                     xtype: 'Navbar',
  29                     position : 'fixed-top',
  30                     inverse : true,
  31                     collapse: true,
  32                     contained: true,
  33                     brand: 'Brand',
  34                     xns: Roo.bootstrap,
  35                     items : [
  36                         {
  37                             xtype: 'NavGroup',
  38                             xns: Roo.bootstrap,
  39                             items: [
  40                                 {
  41                                     xtype: 'Item',
  42                                     xns: Roo.bootstrap.Navbar,
  43                                     html: "hello",
  44                                     menu:  {
  45                                             xtype: 'Menu',
  46                                             xns: Roo.bootstrap,
  47                                             items : [
  48                                                 {
  49                                                     xtype: 'MenuItem',
  50                                                     xns: Roo.bootstrap,
  51                                                     html: "hello aaa",
  52                                                     href : 'http://roojs.com'
  53                                                 },
  54                                                 {
  55                                                     xtype: 'MenuItem',
  56                                                     xns: Roo.bootstrap,
  57                                                     html: "hello",
  58                                                     href : 'http://roojs.com'
  59                                                 }
  60                                             ]
  61                                         }
  62                                 },
  63                                 {
  64                                     xtype: 'Item',
  65                                     xns: Roo.bootstrap.Navbar,
  66                                     html: "hello",
  67                                     menu:  {
  68                                             xtype: 'Menu',
  69                                             xns: Roo.bootstrap,
  70                                             items : [
  71                                                 {
  72                                                     xtype: 'MenuItem',
  73                                                     xns: Roo.bootstrap,
  74                                                     html: "hello aaa",
  75                                                     href : 'http://roojs.com'
  76                                                 },
  77                                                 {
  78                                                     xtype: 'MenuItem',
  79                                                     xns: Roo.bootstrap,
  80                                                     html: "hello",
  81                                                     href : 'http://roojs.com'
  82                                                 }
  83                                             ]
  84                                         }
  85                                 }
  86                             ]
  87                         },
  88                         {
  89                             xtype: 'NavGroup',
  90                             xns: Roo.bootstrap,
  91                             align: 'right',
  92                             items: [
  93                                 {
  94                                     xtype: 'Item',
  95                                     xns: Roo.bootstrap.Navbar,
  96                                     href: '#',
  97                                     html: "hello",
  98                                     badge: 'test',
  99                                     active: true
 100                                 },
 101                                 {
 102                                     xtype: 'Item',
 103                                     xns: Roo.bootstrap.Navbar,
 104
 105                                     html: "dialog",
 106                                     listeners : {
 107                                         click : function() {
 108                                             Roo.ComponentMgr.get('test-modal-1').show()
 109                                         }
 110                                     }
 111
 112                                 },
 113                                 {
 114                                     xtype: 'Modal',
 115                                     id: 'test-modal-1',
 116                                     xns: Roo.bootstrap,
 117                                     title : 'test1',
 118                                     html: "dialog"
 119                                 }
 120                             ]
 121                         }
 122                     ]
 123
 124                 },
 125                 {
 126                     xtype: 'Container',
 127                     xns: Roo.bootstrap,
 128                     jumbotron : true,
 129                     style :  'padding: 30px 15px 40px',
 130                     items: [
 131                         {
 132                             xtype: 'Container',
 133                             xns: Roo.bootstrap,
 134                             html: '<h1> hello world </h1><p>test</p>'
 135                         }
 136                     ]
 137                 },
 138                 {
 139                     xtype: 'Container',
 140                     xns: Roo.bootstrap,
 141                     style :  'margin-top:50px',
 142                     items : [
 143                         {
 144                             xtype: 'Row',
 145                             xns: Roo.bootstrap,
 146                             items : [
 147
 148                                 {
 149                                     xtype: 'Column',
 150                                     xns: Roo.bootstrap,
 151                                     colspan : 12,
 152                                     items : [
 153
 154                                         {
 155                                             xtype: 'Navbar',
 156                                             xns: Roo.bootstrap,
 157                                             items : [
 158                                                 {
 159                                                     xtype: 'NavGroup',
 160                                                     xns: Roo.bootstrap,
 161                                                     items : [
 162                                                         {
 163                                                             xtype: 'Item',
 164                                                             xns: Roo.bootstrap.Navbar,
 165                                                             html: "nav",
 166                                                             href : 'http://roojs.com',
 167
 168                                                             menu:    {
 169                                                                 xtype: 'Menu',
 170                                                                 xns: Roo.bootstrap,
 171                                                                 items : [
 172                                                                     {
 173                                                                         xtype: 'MenuItem',
 174                                                                         xns: Roo.bootstrap,
 175                                                                         html: "hello",
 176                                                                         href : 'http://roojs.com'
 177                                                                     },
 178                                                                     {
 179                                                                         xtype: 'MenuSeparator',
 180                                                                         xns: Roo.bootstrap,
 181                                                                     },
 182                                                                     {
 183                                                                         xtype: 'MenuItem',
 184                                                                         xns: Roo.bootstrap,
 185                                                                         html: "hello",
 186                                                                         href: 'http://roojs.com'
 187                                                                     }
 188                                                                 ]
 189                                                             }
 190                                                         }
 191                                                     ]
 192                                                 }
 193                                             ]
 194                                         }
 195                                     ]
 196                                 }
 197                             ]
 198                         }
 199                     ]
 200                 },
 201                 {
 202                     xtype: 'Container',
 203                     xns: Roo.bootstrap,
 204                     style :  'margin-top:60px',
 205                     items : [
 206                         {
 207                             xtype: 'Button',
 208                             xns : Roo.bootstrap,
 209                             html: 'default'
 210                         },
 211                          {
 212                             xtype: 'Button',
 213                             xns : Roo.bootstrap,
 214                             active: true,
 215                             html: 'active'
 216                         },
 217                         {
 218                             xtype: 'Button',
 219                             xns : Roo.bootstrap,
 220                             weight: 'primary',
 221                             html: 'primary'
 222                         },
 223                         {
 224                             xtype: 'Button',
 225                             xns : Roo.bootstrap,
 226                             weight: 'success',
 227                             html: 'success'
 228                         },
 229                         {
 230                             xtype: 'Button',
 231                             xns : Roo.bootstrap,
 232                             weight: 'info',
 233                             size : 'lg',
 234                             html: 'info lg'
 235                         },
 236                         {
 237                             xtype: 'Button',
 238                             xns : Roo.bootstrap,
 239                             weight: 'warning',
 240                             html: 'warning'
 241                         },
 242                         {
 243                             xtype: 'Button',
 244                             xns : Roo.bootstrap,
 245                             weight: 'danger',
 246                             size : 'sm',
 247                             html: 'danger sm'
 248                         },
 249                         {
 250                             xtype: 'Button',
 251                             xns : Roo.bootstrap,
 252                             weight: 'danger',
 253                             size : 'xs',
 254                             html: 'danger xs'
 255                         },
 256                         {
 257                             xtype: 'Button',
 258                             xns : Roo.bootstrap,
 259                             weight: 'link',
 260                             tag: 'a',
 261                             href: 'http://www.roojs.com',
 262                             html: 'link a'
 263                         },
 264                         {
 265                             xtype: 'Button',
 266                             xns : Roo.bootstrap,
 267                             disabled: true,
 268                             html: 'disabled'
 269                         },
 270                         {
 271                             xtype: 'Button',
 272                             xns : Roo.bootstrap,
 273                             isClose: true,
 274                         },
 275                         {
 276                             xtype: 'Button',
 277                             xns : Roo.bootstrap,
 278                             glyphicon: 'volume-up',
 279                             html: 'glyphicon'
 280                         },
 281                         {
 282                             xtype: 'Button',
 283                             xns : Roo.bootstrap,
 284                             badge: '42',
 285                             href: '#'
 286                         }
 287                     ]
 288                 },
 289                 {
 290                     xtype: 'Container',
 291                     xns: Roo.bootstrap,
 292                     style :  'margin-top:60px',
 293
 294                     items : [
 295                         {
 296                             xtype: 'ButtonGroup',
 297                             xns: Roo.bootstrap,
 298                             items : [
 299                                 {
 300                                     xtype: 'Button',
 301                                     xns: Roo.bootstrap,
 302                                     html: "hello",
 303                                     menu:  {
 304                                             xtype: 'Menu',
 305                                             xns: Roo.bootstrap,
 306                                             items : [
 307                                                 {
 308                                                     xtype: 'MenuItem',
 309                                                     xns: Roo.bootstrap,
 310                                                     html: "hello aaa",
 311                                                     href : 'http://roojs.com'
 312                                                 },
 313                                                 {
 314                                                     xtype: 'MenuItem',
 315                                                     xns: Roo.bootstrap,
 316                                                     html: "hello",
 317                                                     href : 'http://roojs.com'
 318                                                 }
 319                                             ]
 320                                         }
 321                                 }
 322                             ]
 323                         }
 324                     ]
 325                 },
 326                 {
 327                     xtype: 'Container',
 328                     xns: Roo.bootstrap,
 329                     style :  'margin-top:60px',
 330                     items : [
 331                         {
 332                             xtype: 'ButtonGroup',
 333                             xns : Roo.bootstrap,
 334                             items: [
 335                                 {
 336                                     xtype: 'Button',
 337                                     xns : Roo.bootstrap,
 338                                 },
 339                                 {
 340                                     xtype: 'Button',
 341                                     xns : Roo.bootstrap,
 342                                 },
 343                                 {
 344                                     xtype: 'Button',
 345                                     xns : Roo.bootstrap,
 346                                 }
 347                             ]
 348                         },
 349                         {
 350                             xtype: 'ButtonGroup',
 351                             xns : Roo.bootstrap,
 352                             align: 'vertical',
 353                             items: [
 354                                 {
 355                                     xtype: 'Button',
 356                                     xns : Roo.bootstrap,
 357                                 },
 358                                 {
 359                                     xtype: 'Button',
 360                                     xns : Roo.bootstrap,
 361                                 },
 362                                 {
 363                                     xtype: 'Button',
 364                                     xns : Roo.bootstrap,
 365                                 }
 366                             ]
 367                         },
 368                         {
 369                             xtype: 'ButtonGroup',
 370                             xns : Roo.bootstrap,
 371                             size: 'lg',
 372                             align: 'justified',
 373                             items: [
 374                                 {
 375                                     xtype: 'Button',
 376                                     xns : Roo.bootstrap,
 377                                     tag : 'a'
 378                                 },
 379                                 {
 380                                     xtype: 'Button',
 381                                     xns : Roo.bootstrap,
 382                                     tag : 'a'
 383                                 },
 384                                 {
 385                                     xtype: 'Button',
 386                                     xns : Roo.bootstrap,
 387                                     tag : 'a'
 388                                 }
 389                             ]
 390                         }
 391                     ]
 392                 },
 393                 {
 394                     xtype: 'Container',
 395                     xns: Roo.bootstrap,
 396                     style :  'margin-top:60px',
 397                     items : [
 398                         {
 399                             xtype: 'Form',
 400                             xns: Roo.bootstrap,
 401                             items : [
 402                                 {
 403                                     xtype: 'Input',
 404                                     xns: Roo.bootstrap,
 405                                     name : 'test',
 406                                     fieldLabel : 'test'
 407                                 },
 408                                 {
 409                                     xtype: 'Button',
 410                                     xns: Roo.bootstrap,
 411                                     html : 'Submit'
 412
 413                                 },
 414                             ]
 415                         }
 416                     ]
 417                 },{
 418                     xtype: 'Container',
 419                     xns: Roo.bootstrap,
 420                     style :  'margin-top:60px',
 421
 422                     items : [
 423                         {
 424                             xtype: 'Form',
 425                             xns: Roo.bootstrap,
 426                             labelAlign : 'left',
 427                             items : [
 428                                 {
 429                                     xtype: 'Input',
 430                                     xns: Roo.bootstrap,
 431                                     name : 'test',
 432                                     fieldLabel : 'test'
 433                                 },
 434                                 {
 435                                     xtype: 'Button',
 436                                     xns: Roo.bootstrap,
 437                                     html : 'Submit'
 438
 439                                 },
 440                             ]
 441                         }
 442                     ]
 443                 },
 444                 {
 445                     xtype: 'Container',
 446                     xns: Roo.bootstrap,
 447                     style :  'margin-top:60px',
 448                     items: [
 449                         {
 450                             xtype: 'ButtonGroup',
 451                             xns: Roo.bootstrap,
 452                             size: 'xs',
 453                             toolbar: true,
 454
 455                             items : [
 456                                 {
 457                                     xtype: 'ButtonGroup',
 458                                     xns: Roo.bootstrap,
 459                                     items : [
 460                                         {
 461                                             xtype: 'Button',
 462                                             xns: Roo.bootstrap,
 463                                             html : 'A',
 464                                         },
 465                                         {
 466                                             xtype: 'Button',
 467                                             xns: Roo.bootstrap,
 468                                             html : 'B',
 469                                         },
 470                                         {
 471                                             xtype: 'Button',
 472                                             xns: Roo.bootstrap,
 473                                             html : 'C',
 474                                         },
 475                                         {
 476                                             xtype: 'Button',
 477                                             xns: Roo.bootstrap,
 478                                             html : 'D',
 479                                         }
 480                                     ]
 481                                 },
 482                                 {
 483                                     xtype: 'ButtonGroup',
 484                                     xns: Roo.bootstrap,
 485                                     items : [
 486                                         {
 487                                             xtype: 'Button',
 488                                             xns: Roo.bootstrap,
 489                                             html : ' ',
 490                                             glyphicon: 'align-left'
 491                                         },
 492                                         {
 493                                             xtype: 'Button',
 494                                             xns: Roo.bootstrap,
 495                                             html : ' ',
 496                                             glyphicon: 'align-center'
 497                                         },
 498                                         {
 499                                             xtype: 'Button',
 500                                             xns: Roo.bootstrap,
 501                                             html : ' ',
 502                                             glyphicon: 'align-right'
 503                                         },
 504                                         {
 505                                             xtype: 'Button',
 506                                             xns: Roo.bootstrap,
 507                                             html : ' ',
 508                                             glyphicon: 'align-justify'
 509                                         }
 510                                     ]
 511                                 }
 512                             ]
 513                         }
 514                     ]
 515                 },
 516                 {
 517                     xtype: 'Container',
 518                     xns: Roo.bootstrap,
 519                     items: [
 520                         {
 521                             xtype: 'Img',
 522                             xns: Roo.bootstrap,
 523                             src: 'http://img.brothersoft.com/screenshots/softimage/r/rose_flower_screensaver-234027-1240456558.jpeg',
 524                             border: 'thumbnail',
 525                             style: 'width: 400px'
 526                         }
 527                     ]
 528                 }
 529             ]
 530         };
 531     }
 532 });