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