git.roojs.org Git - roojs1/blob - examples/bootstrap/bootstrap.js

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