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                                     ]
 203                                 }
 204                             ]
 205                         }
 206                     ]
 207                 },
 208                 {
 209                     xtype: 'Container',
 210                     xns: Roo.bootstrap,
 211                     style :  'margin-top:60px',
 212                     items : [
 213                         {
 214                             xtype: 'Button',
 215                             xns : Roo.bootstrap,
 216                             html: 'default'
 217                         },
 218                          {
 219                             xtype: 'Button',
 220                             xns : Roo.bootstrap,
 221                             active: true,
 222                             html: 'active'
 223                         },
 224                         {
 225                             xtype: 'Button',
 226                             xns : Roo.bootstrap,
 227                             weight: 'primary',
 228                             html: 'primary'
 229                         },
 230                         {
 231                             xtype: 'Button',
 232                             xns : Roo.bootstrap,
 233                             weight: 'success',
 234                             html: 'success'
 235                         },
 236                         {
 237                             xtype: 'Button',
 238                             xns : Roo.bootstrap,
 239                             weight: 'info',
 240                             size : 'lg',
 241                             html: 'info lg'
 242                         },
 243                         {
 244                             xtype: 'Button',
 245                             xns : Roo.bootstrap,
 246                             weight: 'warning',
 247                             html: 'warning'
 248                         },
 249                         {
 250                             xtype: 'Button',
 251                             xns : Roo.bootstrap,
 252                             weight: 'danger',
 253                             size : 'sm',
 254                             html: 'danger sm'
 255                         },
 256                         {
 257                             xtype: 'Button',
 258                             xns : Roo.bootstrap,
 259                             weight: 'danger',
 260                             size : 'xs',
 261                             html: 'danger xs'
 262                         },
 263                         {
 264                             xtype: 'Button',
 265                             xns : Roo.bootstrap,
 266                             weight: 'link',
 267                             tag: 'a',
 268                             href: 'http://www.roojs.com',
 269                             html: 'link a'
 270                         },
 271                         {
 272                             xtype: 'Button',
 273                             xns : Roo.bootstrap,
 274                             disabled: true,
 275                             html: 'disabled'
 276                         },
 277                         {
 278                             xtype: 'Button',
 279                             xns : Roo.bootstrap,
 280                             isClose: true,
 281                         },
 282                         {
 283                             xtype: 'Button',
 284                             xns : Roo.bootstrap,
 285                             glyphicon: 'volume-up',
 286                             html: 'glyphicon'
 287                         },
 288                         {
 289                             xtype: 'Button',
 290                             xns : Roo.bootstrap,
 291                             badge: '42',
 292                             href: '#'
 293                         }
 294                     ]
 295                 },
 296                 {
 297                     xtype: 'Container',
 298                     xns: Roo.bootstrap,
 299                     style :  'margin-top:60px',
 300
 301                     items : [
 302                         {
 303                             xtype: 'ButtonGroup',
 304                             xns: Roo.bootstrap,
 305                             items : [
 306                                 {
 307                                     xtype: 'Button',
 308                                     xns: Roo.bootstrap,
 309                                     html: "hello",
 310                                     menu:  {
 311                                             xtype: 'Menu',
 312                                             xns: Roo.bootstrap,
 313                                             items : [
 314                                                 {
 315                                                     xtype: 'MenuItem',
 316                                                     xns: Roo.bootstrap,
 317                                                     html: "hello aaa",
 318                                                     href : 'http://roojs.com'
 319                                                 },
 320                                                 {
 321                                                     xtype: 'MenuItem',
 322                                                     xns: Roo.bootstrap,
 323                                                     html: "hello",
 324                                                     href : 'http://roojs.com'
 325                                                 }
 326                                             ]
 327                                         }
 328                                 }
 329                             ]
 330                         }
 331                     ]
 332                 },
 333                 {
 334                     xtype: 'Container',
 335                     xns: Roo.bootstrap,
 336                     style :  'margin-top:60px',
 337                     items : [
 338                         {
 339                             xtype: 'ButtonGroup',
 340                             xns : Roo.bootstrap,
 341                             items: [
 342                                 {
 343                                     xtype: 'Button',
 344                                     xns : Roo.bootstrap,
 345                                 },
 346                                 {
 347                                     xtype: 'Button',
 348                                     xns : Roo.bootstrap,
 349                                 },
 350                                 {
 351                                     xtype: 'Button',
 352                                     xns : Roo.bootstrap,
 353                                 }
 354                             ]
 355                         },
 356                         {
 357                             xtype: 'ButtonGroup',
 358                             xns : Roo.bootstrap,
 359                             align: 'vertical',
 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                             size: 'lg',
 379                             align: 'justified',
 380                             items: [
 381                                 {
 382                                     xtype: 'Button',
 383                                     xns : Roo.bootstrap,
 384                                     tag : 'a'
 385                                 },
 386                                 {
 387                                     xtype: 'Button',
 388                                     xns : Roo.bootstrap,
 389                                     tag : 'a'
 390                                 },
 391                                 {
 392                                     xtype: 'Button',
 393                                     xns : Roo.bootstrap,
 394                                     tag : 'a'
 395                                 }
 396                             ]
 397                         }
 398                     ]
 399                 },
 400                 {
 401                     xtype: 'Container',
 402                     xns: Roo.bootstrap,
 403                     style :  'margin-top:60px',
 404                     items : [
 405                         {
 406                             xtype: 'Form',
 407                             xns: Roo.bootstrap,
 408                             items : [
 409                                 {
 410                                     xtype: 'Input',
 411                                     xns: Roo.bootstrap,
 412                                     name : 'test',
 413                                     fieldLabel : 'test - keyup',
 414                                     listeners : {
 415                                         keyup : function() {
 416                                             alert("Test");
 417                                         }
 418                                     }
 419                                 },
 420                                 {
 421                                     xtype: 'Button',
 422                                     xns: Roo.bootstrap,
 423                                     html : 'Submit'
 424
 425                                 },
 426                             ]
 427                         }
 428                     ]
 429                 },{
 430                     xtype: 'Container',
 431                     xns: Roo.bootstrap,
 432                     style :  'margin-top:60px',
 433
 434                     items : [
 435                         {
 436                             xtype: 'Form',
 437                             xns: Roo.bootstrap,
 438                             labelAlign : 'left',
 439                             items : [
 440                                 {
 441                                     xtype: 'Input',
 442                                     xns: Roo.bootstrap,
 443                                     name : 'test',
 444                                     fieldLabel : 'test'
 445                                 },
 446                                 {
 447                                     xtype: 'Button',
 448                                     xns: Roo.bootstrap,
 449                                     html : 'Submit'
 450
 451                                 },
 452                             ]
 453                         }
 454                     ]
 455                 },
 456                 {
 457                     xtype: 'Container',
 458                     xns: Roo.bootstrap,
 459                     style :  'margin-top:60px',
 460                     items: [
 461                         {
 462                             xtype: 'ButtonGroup',
 463                             xns: Roo.bootstrap,
 464                             size: 'xs',
 465                             toolbar: true,
 466
 467                             items : [
 468                                 {
 469                                     xtype: 'ButtonGroup',
 470                                     xns: Roo.bootstrap,
 471                                     items : [
 472                                         {
 473                                             xtype: 'Button',
 474                                             xns: Roo.bootstrap,
 475                                             html : 'A',
 476                                         },
 477                                         {
 478                                             xtype: 'Button',
 479                                             xns: Roo.bootstrap,
 480                                             html : 'B',
 481                                         },
 482                                         {
 483                                             xtype: 'Button',
 484                                             xns: Roo.bootstrap,
 485                                             html : 'C',
 486                                         },
 487                                         {
 488                                             xtype: 'Button',
 489                                             xns: Roo.bootstrap,
 490                                             html : 'D',
 491                                         }
 492                                     ]
 493                                 },
 494                                 {
 495                                     xtype: 'ButtonGroup',
 496                                     xns: Roo.bootstrap,
 497                                     items : [
 498                                         {
 499                                             xtype: 'Button',
 500                                             xns: Roo.bootstrap,
 501                                             html : ' ',
 502                                             glyphicon: 'align-left'
 503                                         },
 504                                         {
 505                                             xtype: 'Button',
 506                                             xns: Roo.bootstrap,
 507                                             html : ' ',
 508                                             glyphicon: 'align-center'
 509                                         },
 510                                         {
 511                                             xtype: 'Button',
 512                                             xns: Roo.bootstrap,
 513                                             html : ' ',
 514                                             glyphicon: 'align-right'
 515                                         },
 516                                         {
 517                                             xtype: 'Button',
 518                                             xns: Roo.bootstrap,
 519                                             html : ' ',
 520                                             glyphicon: 'align-justify'
 521                                         }
 522                                     ]
 523                                 }
 524                             ]
 525                         }
 526                     ]
 527                 },
 528                 {
 529                     xtype: 'Container',
 530                     xns: Roo.bootstrap,
 531                     items: [
 532                         {
 533                             xtype: 'Img',
 534                             xns: Roo.bootstrap,
 535                             src: 'http://img.brothersoft.com/screenshots/softimage/r/rose_flower_screensaver-234027-1240456558.jpeg',
 536                             border: 'thumbnail',
 537                             style: 'width: 400px'
 538                         }
 539                     ]
 540                 }
 541             ]
 542         };
 543     }
 544 });