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