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