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