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