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: 'NavHeaderbar',
  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: 'NavItem',
  42                                     xns: Roo.bootstrap,
  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: 'NavItem',
  65                                     xns: Roo.bootstrap,
  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: 'NavItem',
  96                                     xns: Roo.bootstrap,
  97                                     html: "hello",
  98                                     badge: 'test',
  99                                     active: true
 100                                 },
 101                                 {
 102                                     xtype: 'NavItem',
 103                                     xns: Roo.bootstrap,
 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: 'NavItem',
 122                                     xns: Roo.bootstrap,
 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: 'PagingToolbar',
 163                                             xns: Roo.bootstrap,
 164
 165                                         }
 166                                     ]
 167                                 }
 168                             ]
 169                         },
 170                         {
 171                             xtype: 'Row',
 172                             xns: Roo.bootstrap,
 173                             items : [
 174
 175                                 {
 176                                     xtype: 'Column',
 177                                     xns: Roo.bootstrap,
 178                                     colspan : 12,
 179                                     items : [
 180
 181                                         {
 182                                             xtype: 'NavSimplebar',
 183                                             xns: Roo.bootstrap,
 184                                             bar: true,
 185                                             items : [
 186                                                 {
 187                                                     xtype: 'NavGroup',
 188                                                     xns: Roo.bootstrap,
 189                                                     items : [
 190                                                         {
 191                                                             xtype: 'NavItem',
 192                                                             xns: Roo.bootstrap,
 193                                                             html: "nav",
 194                                                             href : 'http://roojs.com',
 195
 196                                                             menu:    {
 197                                                                 xtype: 'Menu',
 198                                                                 xns: Roo.bootstrap,
 199                                                                 items : [
 200                                                                     {
 201                                                                         xtype: 'MenuItem',
 202                                                                         xns: Roo.bootstrap,
 203                                                                         html: "hello",
 204                                                                         href : 'http://roojs.com'
 205                                                                     },
 206                                                                     {
 207                                                                         xtype: 'MenuSeparator',
 208                                                                         xns: Roo.bootstrap,
 209                                                                     },
 210                                                                     {
 211                                                                         xtype: 'MenuItem',
 212                                                                         xns: Roo.bootstrap,
 213                                                                         html: "hello",
 214                                                                         href: 'http://roojs.com'
 215                                                                     }
 216                                                                 ]
 217                                                             }
 218                                                         }
 219                                                     ]
 220                                                 },
 221                                                 {
 222
 223                                                     xtype: 'Form',
 224                                                     xns: Roo.bootstrap,
 225                                                     items : [
 226                                                         {
 227                                                             xtype: 'Input',
 228                                                             xns: Roo.bootstrap,
 229                                                             name : 'testinput'
 230                                                         },{
 231
 232                                                             xtype: 'Button',
 233                                                             xns: Roo.bootstrap,
 234                                                             html : 'submit'
 235                                                         }
 236                                                     ]
 237                                                 }
 238
 239                                             ]
 240                                         }
 241                                     ]
 242                                 }
 243                             ]
 244                         }
 245                     ]
 246                 },
 247                 {
 248                     xtype: 'Container',
 249                     xns: Roo.bootstrap,
 250                     style :  'margin-top:60px',
 251                     items : [
 252                         {
 253                             xtype: 'Button',
 254                             xns : Roo.bootstrap,
 255                             html: 'popover - default',
 256                             items : [
 257                                 {
 258                                     xtype: 'Popover',
 259                                     xns: Roo.bootstrap,
 260                                     title : "test popover",
 261                                     html : "test content",
 262                                     listeners : {
 263                                         render : function(args) {
 264                                             _this.popover = this;
 265                                         }
 266                                     }
 267                                 }
 268                             ]
 269                         },
 270                          {
 271                             xtype: 'Button',
 272                             xns : Roo.bootstrap,
 273                             active: true,
 274                             html: 'active'
 275                         },
 276                         {
 277                             xtype: 'Button',
 278                             xns : Roo.bootstrap,
 279                             weight: 'primary',
 280                             html: 'primary'
 281                         },
 282                         {
 283                             xtype: 'Button',
 284                             xns : Roo.bootstrap,
 285                             weight: 'success',
 286                             html: 'success'
 287                         },
 288                         {
 289                             xtype: 'Button',
 290                             xns : Roo.bootstrap,
 291                             weight: 'info',
 292                             size : 'lg',
 293                             html: 'info lg'
 294                         },
 295                         {
 296                             xtype: 'Button',
 297                             xns : Roo.bootstrap,
 298                             weight: 'warning',
 299                             html: 'warning'
 300                         },
 301                         {
 302                             xtype: 'Button',
 303                             xns : Roo.bootstrap,
 304                             weight: 'danger',
 305                             size : 'sm',
 306                             html: 'danger sm'
 307                         },
 308                         {
 309                             xtype: 'Button',
 310                             xns : Roo.bootstrap,
 311                             weight: 'danger',
 312                             size : 'xs',
 313                             html: 'danger xs'
 314                         },
 315                         {
 316                             xtype: 'Button',
 317                             xns : Roo.bootstrap,
 318                             weight: 'link',
 319                             tag: 'a',
 320                             href: 'http://www.roojs.com',
 321                             html: 'link a'
 322                         },
 323                         {
 324                             xtype: 'Button',
 325                             xns : Roo.bootstrap,
 326                             disabled: true,
 327                             html: 'disabled'
 328                         },
 329                         {
 330                             xtype: 'Button',
 331                             xns : Roo.bootstrap,
 332                             isClose: true,
 333                         },
 334                         {
 335                             xtype: 'Button',
 336                             xns : Roo.bootstrap,
 337                             glyphicon: 'volume-up',
 338                             html: 'glyphicon'
 339                         },
 340                         {
 341                             xtype: 'Button',
 342                             xns : Roo.bootstrap,
 343                             badge: '42',
 344                             href: '#'
 345                         }
 346                     ]
 347                 },
 348                 {
 349                     xtype: 'Container',
 350                     xns: Roo.bootstrap,
 351                     style :  'margin-top:60px',
 352
 353                     items : [
 354                         {
 355                             xtype: 'ButtonGroup',
 356                             xns: Roo.bootstrap,
 357                             items : [
 358                                 {
 359                                     xtype: 'Button',
 360                                     xns: Roo.bootstrap,
 361                                     html: "hello",
 362                                     menu:  {
 363                                             xtype: 'Menu',
 364                                             xns: Roo.bootstrap,
 365                                             items : [
 366                                                 {
 367                                                     xtype: 'MenuItem',
 368                                                     xns: Roo.bootstrap,
 369                                                     html: "hello aaa",
 370                                                     href : 'http://roojs.com'
 371                                                 },
 372                                                 {
 373                                                     xtype: 'MenuItem',
 374                                                     xns: Roo.bootstrap,
 375                                                     html: "hello",
 376                                                     href : 'http://roojs.com'
 377                                                 }
 378                                             ]
 379                                         }
 380                                 }
 381                             ]
 382                         }
 383                     ]
 384                 },
 385                 {
 386                     xtype: 'Container',
 387                     xns: Roo.bootstrap,
 388                     style :  'margin-top:60px',
 389                     items : [
 390                         {
 391                             xtype: 'ButtonGroup',
 392                             xns : Roo.bootstrap,
 393                             items: [
 394                                 {
 395                                     xtype: 'Button',
 396                                     xns : Roo.bootstrap,
 397                                 },
 398                                 {
 399                                     xtype: 'Button',
 400                                     xns : Roo.bootstrap,
 401                                 },
 402                                 {
 403                                     xtype: 'Button',
 404                                     xns : Roo.bootstrap,
 405                                 }
 406                             ]
 407                         },
 408                         {
 409                             xtype: 'ButtonGroup',
 410                             xns : Roo.bootstrap,
 411                             align: 'vertical',
 412                             items: [
 413                                 {
 414                                     xtype: 'Button',
 415                                     xns : Roo.bootstrap,
 416                                 },
 417                                 {
 418                                     xtype: 'Button',
 419                                     xns : Roo.bootstrap,
 420                                 },
 421                                 {
 422                                     xtype: 'Button',
 423                                     xns : Roo.bootstrap,
 424                                 }
 425                             ]
 426                         },
 427                         {
 428                             xtype: 'ButtonGroup',
 429                             xns : Roo.bootstrap,
 430                             size: 'lg',
 431                             align: 'justified',
 432                             items: [
 433                                 {
 434                                     xtype: 'Button',
 435                                     xns : Roo.bootstrap,
 436                                     tag : 'a'
 437                                 },
 438                                 {
 439                                     xtype: 'Button',
 440                                     xns : Roo.bootstrap,
 441                                     tag : 'a'
 442                                 },
 443                                 {
 444                                     xtype: 'Button',
 445                                     xns : Roo.bootstrap,
 446                                     tag : 'a'
 447                                 }
 448                             ]
 449                         }
 450                     ]
 451                 },
 452                 {
 453                     xtype: 'Container',
 454                     xns: Roo.bootstrap,
 455                     style :  'margin-top:60px',
 456                     items : [
 457                         {
 458                             xtype: 'Form',
 459                             xns: Roo.bootstrap,
 460                             items : [
 461                                 {
 462                                     xtype: 'Input',
 463                                     xns: Roo.bootstrap,
 464                                     name : 'test',
 465                                     fieldLabel : 'test - keyup',
 466                                     listeners : {
 467                                         keyup : function() {
 468                                             alert("Test");
 469                                         }
 470                                     }
 471                                 },
 472                                 {
 473                                     xtype: 'ComboBox',
 474                                     xns: Roo.bootstrap,
 475                                     name : 'test',
 476                                     fieldLabel : 'test',
 477                                     displayField : 'state',
 478                                     hiddenField: 'abbr',
 479                                     hiddenName: 'testval',
 480                                     mode : 'local',
 481                                     store : {
 482                                         xtype : 'SimpleStore',
 483                                         xns : Roo.data,
 484                                         fields: ['abbr', 'state'],
 485                                         data : [ [ 'aa', 'aaa'] , ['bb', 'bbb'] ]
 486                                     },
 487                                     listeners : {
 488                                         render : function(self)
 489                                         {
 490                                             _this.combo = self;
 491                                         }
 492                                     }
 493
 494                                 },
 495                                 {
 496                                     xtype: 'Button',
 497                                     xns: Roo.bootstrap,
 498                                     html : 'Submit'
 499
 500                                 },
 501                             ]
 502                         }
 503                     ]
 504                 },{
 505                     xtype: 'Container',
 506                     xns: Roo.bootstrap,
 507                     style :  'margin-top:60px',
 508
 509                     items : [
 510                         {
 511                             xtype: 'Form',
 512                             xns: Roo.bootstrap,
 513                             labelAlign : 'left',
 514                             items : [
 515                                 {
 516                                     xtype: 'Input',
 517                                     xns: Roo.bootstrap,
 518                                     name : 'test',
 519                                     fieldLabel : 'test'
 520                                 },
 521                                 {
 522                                            allowBlank : true,
 523                                     xtype: 'SecurePass',
 524                                     inputType : 'password',
 525                                     xns: Roo.bootstrap,
 526                                     name : 'test1',
 527                                     imageRoot : rootURL + '/Pman/templates/images',
 528                                     fieldLabel : 'test password'
 529                                 },
 530                                 {
 531                                     xtype: 'Button',
 532                                     xns: Roo.bootstrap,
 533                                     html : 'Submit'
 534
 535                                 },
 536                             ]
 537                         }
 538                     ]
 539                 },
 540                 {
 541                     xtype: 'Container',
 542                     xns: Roo.bootstrap,
 543                     style :  'margin-top:60px',
 544                     items: [
 545                         {
 546                             xtype: 'ButtonGroup',
 547                             xns: Roo.bootstrap,
 548                             size: 'xs',
 549                             toolbar: true,
 550
 551                             items : [
 552                                 {
 553                                     xtype: 'ButtonGroup',
 554                                     xns: Roo.bootstrap,
 555                                     items : [
 556                                         {
 557                                             xtype: 'Button',
 558                                             xns: Roo.bootstrap,
 559                                             html : 'A',
 560                                         },
 561                                         {
 562                                             xtype: 'Button',
 563                                             xns: Roo.bootstrap,
 564                                             html : 'B',
 565                                         },
 566                                         {
 567                                             xtype: 'Button',
 568                                             xns: Roo.bootstrap,
 569                                             html : 'C',
 570                                         },
 571                                         {
 572                                             xtype: 'Button',
 573                                             xns: Roo.bootstrap,
 574                                             html : 'D',
 575                                         }
 576                                     ]
 577                                 },
 578                                 {
 579                                     xtype: 'ButtonGroup',
 580                                     xns: Roo.bootstrap,
 581                                     items : [
 582                                         {
 583                                             xtype: 'Button',
 584                                             xns: Roo.bootstrap,
 585                                             html : ' ',
 586                                             glyphicon: 'align-left'
 587                                         },
 588                                         {
 589                                             xtype: 'Button',
 590                                             xns: Roo.bootstrap,
 591                                             html : ' ',
 592                                             glyphicon: 'align-center'
 593                                         },
 594                                         {
 595                                             xtype: 'Button',
 596                                             xns: Roo.bootstrap,
 597                                             html : ' ',
 598                                             glyphicon: 'align-right'
 599                                         },
 600                                         {
 601                                             xtype: 'Button',
 602                                             xns: Roo.bootstrap,
 603                                             html : ' ',
 604                                             glyphicon: 'align-justify'
 605                                         }
 606                                     ]
 607                                 }
 608                             ]
 609                         }
 610                     ]
 611                 },
 612                 {
 613                     xtype: 'Container',
 614                     xns: Roo.bootstrap,
 615                     items: [
 616                         {
 617                             xtype: 'Img',
 618                             xns: Roo.bootstrap,
 619                             src: 'http://img.brothersoft.com/screenshots/softimage/r/rose_flower_screensaver-234027-1240456558.jpeg',
 620                             border: 'thumbnail',
 621                             style: 'width: 400px'
 622                         }
 623                     ]
 624                 }
 625             ]
 626         };
 627     }
 628 });