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