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