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                                 }
 243                             ]
 244                         },
 245                          {
 246                             xtype: 'Button',
 247                             xns : Roo.bootstrap,
 248                             active: true,
 249                             html: 'active'
 250                         },
 251                         {
 252                             xtype: 'Button',
 253                             xns : Roo.bootstrap,
 254                             weight: 'primary',
 255                             html: 'primary'
 256                         },
 257                         {
 258                             xtype: 'Button',
 259                             xns : Roo.bootstrap,
 260                             weight: 'success',
 261                             html: 'success'
 262                         },
 263                         {
 264                             xtype: 'Button',
 265                             xns : Roo.bootstrap,
 266                             weight: 'info',
 267                             size : 'lg',
 268                             html: 'info lg'
 269                         },
 270                         {
 271                             xtype: 'Button',
 272                             xns : Roo.bootstrap,
 273                             weight: 'warning',
 274                             html: 'warning'
 275                         },
 276                         {
 277                             xtype: 'Button',
 278                             xns : Roo.bootstrap,
 279                             weight: 'danger',
 280                             size : 'sm',
 281                             html: 'danger sm'
 282                         },
 283                         {
 284                             xtype: 'Button',
 285                             xns : Roo.bootstrap,
 286                             weight: 'danger',
 287                             size : 'xs',
 288                             html: 'danger xs'
 289                         },
 290                         {
 291                             xtype: 'Button',
 292                             xns : Roo.bootstrap,
 293                             weight: 'link',
 294                             tag: 'a',
 295                             href: 'http://www.roojs.com',
 296                             html: 'link a'
 297                         },
 298                         {
 299                             xtype: 'Button',
 300                             xns : Roo.bootstrap,
 301                             disabled: true,
 302                             html: 'disabled'
 303                         },
 304                         {
 305                             xtype: 'Button',
 306                             xns : Roo.bootstrap,
 307                             isClose: true,
 308                         },
 309                         {
 310                             xtype: 'Button',
 311                             xns : Roo.bootstrap,
 312                             glyphicon: 'volume-up',
 313                             html: 'glyphicon'
 314                         },
 315                         {
 316                             xtype: 'Button',
 317                             xns : Roo.bootstrap,
 318                             badge: '42',
 319                             href: '#'
 320                         }
 321                     ]
 322                 },
 323                 {
 324                     xtype: 'Container',
 325                     xns: Roo.bootstrap,
 326                     style :  'margin-top:60px',
 327
 328                     items : [
 329                         {
 330                             xtype: 'ButtonGroup',
 331                             xns: Roo.bootstrap,
 332                             items : [
 333                                 {
 334                                     xtype: 'Button',
 335                                     xns: Roo.bootstrap,
 336                                     html: "hello",
 337                                     menu:  {
 338                                             xtype: 'Menu',
 339                                             xns: Roo.bootstrap,
 340                                             items : [
 341                                                 {
 342                                                     xtype: 'MenuItem',
 343                                                     xns: Roo.bootstrap,
 344                                                     html: "hello aaa",
 345                                                     href : 'http://roojs.com'
 346                                                 },
 347                                                 {
 348                                                     xtype: 'MenuItem',
 349                                                     xns: Roo.bootstrap,
 350                                                     html: "hello",
 351                                                     href : 'http://roojs.com'
 352                                                 }
 353                                             ]
 354                                         }
 355                                 }
 356                             ]
 357                         }
 358                     ]
 359                 },
 360                 {
 361                     xtype: 'Container',
 362                     xns: Roo.bootstrap,
 363                     style :  'margin-top:60px',
 364                     items : [
 365                         {
 366                             xtype: 'ButtonGroup',
 367                             xns : Roo.bootstrap,
 368                             items: [
 369                                 {
 370                                     xtype: 'Button',
 371                                     xns : Roo.bootstrap,
 372                                 },
 373                                 {
 374                                     xtype: 'Button',
 375                                     xns : Roo.bootstrap,
 376                                 },
 377                                 {
 378                                     xtype: 'Button',
 379                                     xns : Roo.bootstrap,
 380                                 }
 381                             ]
 382                         },
 383                         {
 384                             xtype: 'ButtonGroup',
 385                             xns : Roo.bootstrap,
 386                             align: 'vertical',
 387                             items: [
 388                                 {
 389                                     xtype: 'Button',
 390                                     xns : Roo.bootstrap,
 391                                 },
 392                                 {
 393                                     xtype: 'Button',
 394                                     xns : Roo.bootstrap,
 395                                 },
 396                                 {
 397                                     xtype: 'Button',
 398                                     xns : Roo.bootstrap,
 399                                 }
 400                             ]
 401                         },
 402                         {
 403                             xtype: 'ButtonGroup',
 404                             xns : Roo.bootstrap,
 405                             size: 'lg',
 406                             align: 'justified',
 407                             items: [
 408                                 {
 409                                     xtype: 'Button',
 410                                     xns : Roo.bootstrap,
 411                                     tag : 'a'
 412                                 },
 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                         }
 425                     ]
 426                 },
 427                 {
 428                     xtype: 'Container',
 429                     xns: Roo.bootstrap,
 430                     style :  'margin-top:60px',
 431                     items : [
 432                         {
 433                             xtype: 'Form',
 434                             xns: Roo.bootstrap,
 435                             items : [
 436                                 {
 437                                     xtype: 'Input',
 438                                     xns: Roo.bootstrap,
 439                                     name : 'test',
 440                                     fieldLabel : 'test - keyup',
 441                                     listeners : {
 442                                         keyup : function() {
 443                                             alert("Test");
 444                                         }
 445                                     }
 446                                 },
 447                                 {
 448                                     xtype: 'ComboBox',
 449                                     xns: Roo.bootstrap,
 450                                     name : 'test',
 451                                     fieldLabel : 'test',
 452                                     displayField : 'state',
 453                                     hiddenField: 'abbr',
 454                                     hiddenName: 'testval',
 455                                     mode : 'local',
 456                                     store : {
 457                                         xtype : 'SimpleStore',
 458                                         xns : Roo.data,
 459                                         fields: ['abbr', 'state'],
 460                                         data : [ [ 'aa', 'aaa'] , ['bb', 'bbb'] ]
 461                                     },
 462                                     listeners : {
 463                                         render : function(self)
 464                                         {
 465                                             _this.combo = self;
 466                                         }
 467                                     }
 468
 469                                 },
 470                                 {
 471                                     xtype: 'Button',
 472                                     xns: Roo.bootstrap,
 473                                     html : 'Submit'
 474
 475                                 },
 476                             ]
 477                         }
 478                     ]
 479                 },{
 480                     xtype: 'Container',
 481                     xns: Roo.bootstrap,
 482                     style :  'margin-top:60px',
 483
 484                     items : [
 485                         {
 486                             xtype: 'Form',
 487                             xns: Roo.bootstrap,
 488                             labelAlign : 'left',
 489                             items : [
 490                                 {
 491                                     xtype: 'Input',
 492                                     xns: Roo.bootstrap,
 493                                     name : 'test',
 494                                     fieldLabel : 'test'
 495                                 },
 496                                 {
 497                                     xtype: 'Button',
 498                                     xns: Roo.bootstrap,
 499                                     html : 'Submit'
 500
 501                                 },
 502                             ]
 503                         }
 504                     ]
 505                 },
 506                 {
 507                     xtype: 'Container',
 508                     xns: Roo.bootstrap,
 509                     style :  'margin-top:60px',
 510                     items: [
 511                         {
 512                             xtype: 'ButtonGroup',
 513                             xns: Roo.bootstrap,
 514                             size: 'xs',
 515                             toolbar: true,
 516
 517                             items : [
 518                                 {
 519                                     xtype: 'ButtonGroup',
 520                                     xns: Roo.bootstrap,
 521                                     items : [
 522                                         {
 523                                             xtype: 'Button',
 524                                             xns: Roo.bootstrap,
 525                                             html : 'A',
 526                                         },
 527                                         {
 528                                             xtype: 'Button',
 529                                             xns: Roo.bootstrap,
 530                                             html : 'B',
 531                                         },
 532                                         {
 533                                             xtype: 'Button',
 534                                             xns: Roo.bootstrap,
 535                                             html : 'C',
 536                                         },
 537                                         {
 538                                             xtype: 'Button',
 539                                             xns: Roo.bootstrap,
 540                                             html : 'D',
 541                                         }
 542                                     ]
 543                                 },
 544                                 {
 545                                     xtype: 'ButtonGroup',
 546                                     xns: Roo.bootstrap,
 547                                     items : [
 548                                         {
 549                                             xtype: 'Button',
 550                                             xns: Roo.bootstrap,
 551                                             html : ' ',
 552                                             glyphicon: 'align-left'
 553                                         },
 554                                         {
 555                                             xtype: 'Button',
 556                                             xns: Roo.bootstrap,
 557                                             html : ' ',
 558                                             glyphicon: 'align-center'
 559                                         },
 560                                         {
 561                                             xtype: 'Button',
 562                                             xns: Roo.bootstrap,
 563                                             html : ' ',
 564                                             glyphicon: 'align-right'
 565                                         },
 566                                         {
 567                                             xtype: 'Button',
 568                                             xns: Roo.bootstrap,
 569                                             html : ' ',
 570                                             glyphicon: 'align-justify'
 571                                         }
 572                                     ]
 573                                 }
 574                             ]
 575                         }
 576                     ]
 577                 },
 578                 {
 579                     xtype: 'Container',
 580                     xns: Roo.bootstrap,
 581                     items: [
 582                         {
 583                             xtype: 'Img',
 584                             xns: Roo.bootstrap,
 585                             src: 'http://img.brothersoft.com/screenshots/softimage/r/rose_flower_screensaver-234027-1240456558.jpeg',
 586                             border: 'thumbnail',
 587                             style: 'width: 400px'
 588                         }
 589                     ]
 590                 }
 591             ]
 592         };
 593     }
 594 });