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