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

   1 //<script type="text/javascript">
   2
   3 // Auto generated file - created by app.Builder.js- do not edit directly (at present!)
   4
   5 dashboard1 = new Roo.XComponent({
   6     part     :  ["bootstrap", "dashboard1" ],
   7     order    : '001-dashboard-',
   8     region   : 'center',
   9     parent   : false,
  10     name     : "unnamed module",
  11     disabled : false,
  12     permname : '',
  13     _tree : function()
  14     {
  15         var _this = this;
  16         var MODULE = this;
  17         return {
  18             cls : 'skin-blue',
  19             xtype : 'Body',
  20             xns : Roo.bootstrap,
  21             items : [
  22                 Roo.apply(Dashboard.Header1._tree(), {
  23                     cls : 'header',
  24                     xtype : 'Container',
  25                     tag : 'header',
  26                     xns : Roo.bootstrap
  27                 }),
  28                 {
  29                     cls : 'wrapper row-offcanvas row-offcanvas-left',
  30                     xtype : 'Container',
  31                     'flexy:include' : 'Sidebar.html',
  32                     xns : Roo.bootstrap,
  33                     items : [
  34                         Roo.apply(Dashboard.Sidebar2._tree(), {
  35                             tag : 'aside',
  36                             cls : 'left-side sidebar-offcanvas',
  37                             xtype : 'Container',
  38                             xns : Roo.bootstrap
  39                         }),
  40                         {
  41                             tag : 'aside',
  42                             cls : 'right-side',
  43                             xtype : 'Container',
  44                             xns : Roo.bootstrap,
  45                             items : [
  46                                 {
  47                                     tag : 'section',
  48                                     cls : 'content-header',
  49                                     xtype : 'Container',
  50                                     xns : Roo.bootstrap,
  51                                     items : [
  52                                         {
  53                                             xtype : 'Header',
  54                                             xns : Roo.bootstrap,
  55                                             html : 'General Form Elements  <small> Preview </small>'
  56                                         }
  57                                     ]
  58
  59                                 },
  60                                 {
  61                                     tag : 'section',
  62                                     cls : 'content',
  63                                     xtype : 'Container',
  64                                     xns : Roo.bootstrap,
  65                                     items : [
  66                                         {
  67                                             xtype : 'Row',
  68                                             xns : Roo.bootstrap,
  69                                             items : [
  70                                                 {
  71                                                     md : 6,
  72                                                     xtype : 'Column',
  73                                                     xns : Roo.bootstrap,
  74                                                     sm : 12,
  75                                                     items : [
  76                                                         {
  77                                                             cls : 'box box-primary',
  78                                                             xtype : 'Container',
  79                                                             xns : Roo.bootstrap,
  80                                                             items : [
  81                                                                 {
  82                                                                     cls : 'box-header',
  83                                                                     xtype : 'Container',
  84                                                                     xns : Roo.bootstrap,
  85                                                                     items : [
  86                                                                         {
  87                                                                             cls : 'box-title',
  88                                                                             xtype : 'Header',
  89                                                                             xns : Roo.bootstrap,
  90                                                                             level : 3,
  91                                                                             html : 'Quick Example'
  92                                                                         }
  93                                                                     ]
  94
  95                                                                 },
  96                                                                 {
  97                                                                     xtype : 'Form',
  98                                                                     labelAlign : 'top',
  99                                                                     xns : Roo.bootstrap,
 100                                                                     items : [
 101                                                                         {
 102                                                                             cls : 'box-body',
 103                                                                             xtype : 'Container',
 104                                                                             xns : Roo.bootstrap,
 105                                                                             items : [
 106                                                                                 {
 107                                                                                     xtype : 'Input',
 108                                                                                     placeholder : 'Enter email',
 109                                                                                     fieldLabel : 'Email Address',
 110                                                                                     xns : Roo.bootstrap
 111                                                                                 },
 112                                                                                 {
 113                                                                                     xtype : 'Input',
 114                                                                                     placeholder : 'Enter password',
 115                                                                                     inputType : 'password',
 116                                                                                     fieldLabel : 'Password',
 117                                                                                     xns : Roo.bootstrap
 118                                                                                 },
 119                                                                                 {
 120                                                                                     xtype : 'Input',
 121                                                                                     placeholder : 'Enter email',
 122                                                                                     inputType : 'file',
 123                                                                                     fieldLabel : 'File Input',
 124                                                                                     xns : Roo.bootstrap
 125                                                                                 },
 126                                                                                 {
 127                                                                                     xtype : 'Input',
 128                                                                                     inputType : 'checkbox',
 129                                                                                     xns : Roo.bootstrap,
 130                                                                                     fieldLabel : 'Fixme - checkbox type'
 131                                                                                 },
 132                                                                                 {
 133                                                                                     weight : 'primary',
 134                                                                                     xtype : 'Button',
 135                                                                                     xns : Roo.bootstrap,
 136                                                                                     html : 'Submit'
 137                                                                                 }
 138                                                                             ]
 139
 140                                                                         }
 141                                                                     ]
 142
 143                                                                 }
 144                                                             ]
 145
 146                                                         },
 147                                                         {
 148                                                             cls : 'box box-success',
 149                                                             xtype : 'Container',
 150                                                             xns : Roo.bootstrap,
 151                                                             items : [
 152                                                                 {
 153                                                                     cls : 'box-header',
 154                                                                     xtype : 'Container',
 155                                                                     xns : Roo.bootstrap,
 156                                                                     items : [
 157                                                                         {
 158                                                                             cls : 'box-title',
 159                                                                             xtype : 'Header',
 160                                                                             xns : Roo.bootstrap,
 161                                                                             level : 3,
 162                                                                             html : 'Different Height'
 163                                                                         }
 164                                                                     ]
 165
 166                                                                 },
 167                                                                 {
 168                                                                     xtype : 'Form',
 169                                                                     labelAlign : 'top',
 170                                                                     xns : Roo.bootstrap,
 171                                                                     items : [
 172                                                                         {
 173                                                                             cls : 'box-body',
 174                                                                             xtype : 'Container',
 175                                                                             xns : Roo.bootstrap,
 176                                                                             items : [
 177                                                                                 {
 178                                                                                     xtype : 'Input',
 179                                                                                     placeholder : 'size lg',
 180                                                                                     xns : Roo.bootstrap,
 181                                                                                     size : 'lg'
 182                                                                                 },
 183                                                                                 {
 184                                                                                     xtype : 'Input',
 185                                                                                     placeholder : 'size md',
 186                                                                                     xns : Roo.bootstrap,
 187                                                                                     size : 'md'
 188                                                                                 },
 189                                                                                 {
 190                                                                                     xtype : 'Input',
 191                                                                                     placeholder : 'size sm',
 192                                                                                     xns : Roo.bootstrap,
 193                                                                                     size : 'sm'
 194                                                                                 }
 195                                                                             ]
 196
 197                                                                         }
 198                                                                     ]
 199
 200                                                                 }
 201                                                             ]
 202
 203                                                         },
 204                                                         {
 205                                                             cls : 'box box-danger',
 206                                                             xtype : 'Container',
 207                                                             xns : Roo.bootstrap,
 208                                                             items : [
 209                                                                 {
 210                                                                     cls : 'box-header',
 211                                                                     xtype : 'Container',
 212                                                                     xns : Roo.bootstrap,
 213                                                                     items : [
 214                                                                         {
 215                                                                             cls : 'box-title',
 216                                                                             xtype : 'Header',
 217                                                                             xns : Roo.bootstrap,
 218                                                                             level : 3,
 219                                                                             html : 'Different Width'
 220                                                                         }
 221                                                                     ]
 222
 223                                                                 },
 224                                                                 {
 225                                                                     xtype : 'Form',
 226                                                                     labelAlign : 'top',
 227                                                                     xns : Roo.bootstrap,
 228                                                                     items : [
 229                                                                         {
 230                                                                             cls : 'box-body',
 231                                                                             xtype : 'Container',
 232                                                                             xns : Roo.bootstrap,
 233                                                                             items : [
 234                                                                                 {
 235                                                                                     xtype : 'Row',
 236                                                                                     xns : Roo.bootstrap,
 237                                                                                     items : [
 238                                                                                         {
 239                                                                                             md : 3,
 240                                                                                             xtype : 'Input',
 241                                                                                             placeholder : 'md 3',
 242                                                                                             xns : Roo.bootstrap,
 243                                                                                             size : 'md'
 244                                                                                         },
 245                                                                                         {
 246                                                                                             md : 3,
 247                                                                                             xtype : 'Input',
 248                                                                                             placeholder : 'md 4',
 249                                                                                             xns : Roo.bootstrap,
 250                                                                                             size : 'md'
 251                                                                                         },
 252                                                                                         {
 253                                                                                             md : 5,
 254                                                                                             xtype : 'Input',
 255                                                                                             placeholder : 'md 3',
 256                                                                                             xns : Roo.bootstrap,
 257                                                                                             size : 'md'
 258                                                                                         }
 259                                                                                     ]
 260
 261                                                                                 }
 262                                                                             ]
 263
 264                                                                         }
 265                                                                     ]
 266
 267                                                                 }
 268                                                             ]
 269
 270                                                         },
 271                                                         {
 272                                                             cls : 'box box-info',
 273                                                             xtype : 'Container',
 274                                                             xns : Roo.bootstrap,
 275                                                             items : [
 276                                                                 {
 277                                                                     cls : 'box-header',
 278                                                                     xtype : 'Container',
 279                                                                     xns : Roo.bootstrap,
 280                                                                     items : [
 281                                                                         {
 282                                                                             cls : 'box-title',
 283                                                                             xtype : 'Header',
 284                                                                             xns : Roo.bootstrap,
 285                                                                             level : 3,
 286                                                                             html : 'Input Addon'
 287                                                                         }
 288                                                                     ]
 289
 290                                                                 },
 291                                                                 {
 292                                                                     xtype : 'Form',
 293                                                                     labelAlign : 'top',
 294                                                                     xns : Roo.bootstrap,
 295                                                                     items : [
 296                                                                         {
 297                                                                             cls : 'box-body',
 298                                                                             xtype : 'Container',
 299                                                                             xns : Roo.bootstrap,
 300                                                                             items : [
 301                                                                                 {
 302                                                                                     xtype : 'Input',
 303                                                                                     placeholder : 'before : @',
 304                                                                                     xns : Roo.bootstrap,
 305                                                                                     before : '@',
 306                                                                                     size : 'md'
 307                                                                                 },
 308                                                                                 {
 309                                                                                     xtype : 'Input',
 310                                                                                     placeholder : 'after: .00',
 311                                                                                     xns : Roo.bootstrap,
 312                                                                                     size : 'md',
 313                                                                                     after : 0
 314                                                                                 },
 315                                                                                 {
 316                                                                                     xtype : 'Input',
 317                                                                                     placeholder : 'before $, after: .00',
 318                                                                                     xns : Roo.bootstrap,
 319                                                                                     before : '$',
 320                                                                                     size : 'md',
 321                                                                                     after : 0
 322                                                                                 },
 323                                                                                 {
 324                                                                                     xtype : 'Header',
 325                                                                                     xns : Roo.bootstrap,
 326                                                                                     level : 4,
 327                                                                                     html : 'With Icons'
 328                                                                                 },
 329                                                                                 {
 330                                                                                     xtype : 'Input',
 331                                                                                     placeholder : 'before : &lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt;',
 332                                                                                     xns : Roo.bootstrap,
 333                                                                                     before : '<i class=\"fa fa-envelope\"></i>',
 334                                                                                     size : 'md'
 335                                                                                 },
 336                                                                                 {
 337                                                                                     xtype : 'Input',
 338                                                                                     placeholder : 'after : &lt;i class=&quot;fa fa-after&quot;&gt;&lt;/i&gt;',
 339                                                                                     xns : Roo.bootstrap,
 340                                                                                     size : 'md',
 341                                                                                     after : '<i class=\"fa fa-check\"></i>'
 342                                                                                 },
 343                                                                                 {
 344                                                                                     xtype : 'Input',
 345                                                                                     placeholder : 'after : &lt;i class=&quot;fa fa-ambulance&quot;&gt;&lt;/i&gt; before : &lt;i class=&quot;fa fa-dollar&quot;&gt;&lt;/i&gt;',
 346                                                                                     xns : Roo.bootstrap,
 347                                                                                     before : '<i class=\"fa fa-dollar\"></i>',
 348                                                                                     size : 'md',
 349                                                                                     after : '<i class=\"fa fa-ambulance\"></i>'
 350                                                                                 },
 351                                                                                 {
 352                                                                                     xtype : 'Header',
 353                                                                                     level : 4,
 354                                                                                     xns : Roo.bootstrap,
 355                                                                                     html : 'With checkbox and radio'
 356                                                                                 },
 357                                                                                 {
 358                                                                                     xtype : 'Row',
 359                                                                                     xns : Roo.bootstrap,
 360                                                                                     items : [
 361                                                                                         {
 362                                                                                             md : 6,
 363                                                                                             xtype : 'Input',
 364                                                                                             placeholder : '?',
 365                                                                                             xns : Roo.bootstrap,
 366                                                                                             before : 'fixme',
 367                                                                                             size : 'md'
 368                                                                                         },
 369                                                                                         {
 370                                                                                             md : 6,
 371                                                                                             xtype : 'Input',
 372                                                                                             placeholder : 'md 4',
 373                                                                                             xns : Roo.bootstrap,
 374                                                                                             size : 'md'
 375                                                                                         }
 376                                                                                     ]
 377
 378                                                                                 },
 379                                                                                 {
 380                                                                                     xtype : 'Header',
 381                                                                                     xns : Roo.bootstrap,
 382                                                                                     level : 4,
 383                                                                                     html : 'With buttons'
 384                                                                                 },
 385                                                                                 {
 386                                                                                     before : {
 387                                                                                         menu : {
 388                                                                                             xtype : 'Menu',
 389                                                                                             xns : Roo.bootstrap,
 390                                                                                             items : [
 391                                                                                                 {
 392                                                                                                     xtype : 'MenuItem',
 393                                                                                                     xns : Roo.bootstrap,
 394                                                                                                     html : 'http://',
 395                                                                                                     listeners : {
 396                                                                                                         click : function (e)
 397                                                                                                            {
 398                                                                                                                _this.httpButton.setText("http://");
 399                                                                                                            }
 400                                                                                                     }
 401                                                                                                 },
 402                                                                                                 {
 403                                                                                                     xtype : 'MenuItem',
 404                                                                                                     xns : Roo.bootstrap,
 405                                                                                                     html : 'https://',
 406                                                                                                     listeners : {
 407                                                                                                         click : function (e)
 408                                                                                                            {
 409                                                                                                                _this.httpButton.setText("https://");
 410                                                                                                            }
 411                                                                                                     }
 412                                                                                                 }
 413                                                                                             ]
 414
 415                                                                                         },
 416                                                                                         weight : 'primary',
 417                                                                                         xtype : 'Button',
 418                                                                                         xns : Roo.bootstrap,
 419                                                                                         html : 'http://',
 420                                                                                         listeners : {
 421                                                                                                 render : function (_self)
 422                                                                                                    {
 423                                                                                                        _this.httpButton = _self;
 424                                                                                                    }
 425                                                                                         },
 426                                                                                         items : [
 427
 428                                                                                         ]
 429
 430                                                                                     },
 431                                                                                     xtype : 'Input',
 432                                                                                     placeholder : 'before :  - an object...    ',
 433                                                                                     xns : Roo.bootstrap,
 434                                                                                     size : 'md',
 435                                                                                     items : [
 436
 437                                                                                     ]
 438
 439                                                                                 },
 440                                                                                 {
 441                                                                                     after : {
 442                                                                                         weight : 'success',
 443                                                                                         xtype : 'Button',
 444                                                                                         xns : Roo.bootstrap,
 445                                                                                         html : 'Go'
 446                                                                                     },
 447                                                                                     xtype : 'Input',
 448                                                                                     placeholder : 'after - a button',
 449                                                                                     xns : Roo.bootstrap,
 450                                                                                     size : 'md',
 451                                                                                     items : [
 452
 453                                                                                     ]
 454
 455                                                                                 }
 456                                                                             ]
 457
 458                                                                         }
 459                                                                     ]
 460
 461                                                                 }
 462                                                             ]
 463
 464                                                         }
 465                                                     ]
 466
 467                                                 },
 468                                                 {
 469                                                     md : 6,
 470                                                     xtype : 'Column',
 471                                                     xns : Roo.bootstrap,
 472                                                     sm : 12,
 473                                                     items : [
 474                                                         {
 475                                                             cls : 'box box-primary',
 476                                                             xtype : 'Container',
 477                                                             xns : Roo.bootstrap,
 478                                                             items : [
 479                                                                 {
 480                                                                     cls : 'box-header',
 481                                                                     xtype : 'Container',
 482                                                                     xns : Roo.bootstrap,
 483                                                                     items : [
 484                                                                         {
 485                                                                             cls : 'box-title',
 486                                                                             xtype : 'Header',
 487                                                                             xns : Roo.bootstrap,
 488                                                                             level : 3,
 489                                                                             html : 'Quick Example'
 490                                                                         }
 491                                                                     ]
 492
 493                                                                 },
 494                                                                 {
 495                                                                     xtype : 'Form',
 496                                                                     labelAlign : 'top',
 497                                                                     xns : Roo.bootstrap,
 498                                                                     items : [
 499                                                                         {
 500                                                                             cls : 'box-body',
 501                                                                             xtype : 'Container',
 502                                                                             xns : Roo.bootstrap,
 503                                                                             items : [
 504                                                                                 {
 505                                                                                     xtype : 'Input',
 506                                                                                     placeholder : 'Enter email',
 507                                                                                     fieldLabel : 'Email Address',
 508                                                                                     xns : Roo.bootstrap
 509                                                                                 },
 510                                                                                 {
 511                                                                                     xtype : 'Input',
 512                                                                                     placeholder : 'Enter password',
 513                                                                                     inputType : 'password',
 514                                                                                     fieldLabel : 'Password',
 515                                                                                     xns : Roo.bootstrap
 516                                                                                 },
 517                                                                                 {
 518                                                                                     xtype : 'Input',
 519                                                                                     placeholder : 'Enter email',
 520                                                                                     inputType : 'file',
 521                                                                                     fieldLabel : 'File Input',
 522                                                                                     xns : Roo.bootstrap
 523                                                                                 },
 524                                                                                 {
 525                                                                                     xtype : 'Input',
 526                                                                                     inputType : 'checkbox',
 527                                                                                     xns : Roo.bootstrap,
 528                                                                                     fieldLabel : 'Fixme - checkbox type'
 529                                                                                 },
 530                                                                                 {
 531                                                                                     weight : 'primary',
 532                                                                                     xtype : 'Button',
 533                                                                                     xns : Roo.bootstrap,
 534                                                                                     html : 'Submit'
 535                                                                                 }
 536                                                                             ]
 537
 538                                                                         }
 539                                                                     ]
 540
 541                                                                 }
 542                                                             ]
 543
 544                                                         },
 545                                                         {
 546                                                             cls : 'box box-success',
 547                                                             xtype : 'Container',
 548                                                             xns : Roo.bootstrap,
 549                                                             items : [
 550                                                                 {
 551                                                                     cls : 'box-header',
 552                                                                     xtype : 'Container',
 553                                                                     xns : Roo.bootstrap,
 554                                                                     items : [
 555                                                                         {
 556                                                                             cls : 'box-title',
 557                                                                             xtype : 'Header',
 558                                                                             xns : Roo.bootstrap,
 559                                                                             level : 3,
 560                                                                             html : 'Different Height'
 561                                                                         }
 562                                                                     ]
 563
 564                                                                 },
 565                                                                 {
 566                                                                     xtype : 'Form',
 567                                                                     labelAlign : 'top',
 568                                                                     xns : Roo.bootstrap,
 569                                                                     items : [
 570                                                                         {
 571                                                                             cls : 'box-body',
 572                                                                             xtype : 'Container',
 573                                                                             xns : Roo.bootstrap,
 574                                                                             items : [
 575                                                                                 {
 576                                                                                     xtype : 'Input',
 577                                                                                     placeholder : 'size lg',
 578                                                                                     xns : Roo.bootstrap,
 579                                                                                     size : 'lg'
 580                                                                                 },
 581                                                                                 {
 582                                                                                     xtype : 'Input',
 583                                                                                     placeholder : 'size md',
 584                                                                                     xns : Roo.bootstrap,
 585                                                                                     size : 'md'
 586                                                                                 },
 587                                                                                 {
 588                                                                                     xtype : 'Input',
 589                                                                                     placeholder : 'size sm',
 590                                                                                     xns : Roo.bootstrap,
 591                                                                                     size : 'sm'
 592                                                                                 }
 593                                                                             ]
 594
 595                                                                         }
 596                                                                     ]
 597
 598                                                                 }
 599                                                             ]
 600
 601                                                         },
 602                                                         {
 603                                                             cls : 'box box-danger',
 604                                                             xtype : 'Container',
 605                                                             xns : Roo.bootstrap,
 606                                                             items : [
 607                                                                 {
 608                                                                     cls : 'box-header',
 609                                                                     xtype : 'Container',
 610                                                                     xns : Roo.bootstrap,
 611                                                                     items : [
 612                                                                         {
 613                                                                             cls : 'box-title',
 614                                                                             xtype : 'Header',
 615                                                                             xns : Roo.bootstrap,
 616                                                                             level : 3,
 617                                                                             html : 'Different Width'
 618                                                                         }
 619                                                                     ]
 620
 621                                                                 },
 622                                                                 {
 623                                                                     xtype : 'Form',
 624                                                                     labelAlign : 'top',
 625                                                                     xns : Roo.bootstrap,
 626                                                                     items : [
 627                                                                         {
 628                                                                             cls : 'box-body',
 629                                                                             xtype : 'Container',
 630                                                                             xns : Roo.bootstrap,
 631                                                                             items : [
 632                                                                                 {
 633                                                                                     xtype : 'Row',
 634                                                                                     xns : Roo.bootstrap,
 635                                                                                     items : [
 636                                                                                         {
 637                                                                                             md : 3,
 638                                                                                             xtype : 'Input',
 639                                                                                             placeholder : 'md 3',
 640                                                                                             xns : Roo.bootstrap,
 641                                                                                             size : 'md'
 642                                                                                         },
 643                                                                                         {
 644                                                                                             md : 3,
 645                                                                                             xtype : 'Input',
 646                                                                                             placeholder : 'md 4',
 647                                                                                             xns : Roo.bootstrap,
 648                                                                                             size : 'md'
 649                                                                                         },
 650                                                                                         {
 651                                                                                             md : 5,
 652                                                                                             xtype : 'Input',
 653                                                                                             placeholder : 'md 3',
 654                                                                                             xns : Roo.bootstrap,
 655                                                                                             size : 'md'
 656                                                                                         }
 657                                                                                     ]
 658
 659                                                                                 }
 660                                                                             ]
 661
 662                                                                         }
 663                                                                     ]
 664
 665                                                                 }
 666                                                             ]
 667
 668                                                         },
 669                                                         {
 670                                                             cls : 'box box-info',
 671                                                             xtype : 'Container',
 672                                                             xns : Roo.bootstrap,
 673                                                             items : [
 674                                                                 {
 675                                                                     cls : 'box-header',
 676                                                                     xtype : 'Container',
 677                                                                     xns : Roo.bootstrap,
 678                                                                     items : [
 679                                                                         {
 680                                                                             cls : 'box-title',
 681                                                                             xtype : 'Header',
 682                                                                             xns : Roo.bootstrap,
 683                                                                             level : 3,
 684                                                                             html : 'Input Addon'
 685                                                                         }
 686                                                                     ]
 687
 688                                                                 },
 689                                                                 {
 690                                                                     xtype : 'Form',
 691                                                                     labelAlign : 'top',
 692                                                                     xns : Roo.bootstrap,
 693                                                                     items : [
 694                                                                         {
 695                                                                             cls : 'box-body',
 696                                                                             xtype : 'Container',
 697                                                                             xns : Roo.bootstrap,
 698                                                                             items : [
 699                                                                                 {
 700                                                                                     xtype : 'Input',
 701                                                                                     placeholder : 'before : @',
 702                                                                                     xns : Roo.bootstrap,
 703                                                                                     before : '@',
 704                                                                                     size : 'md'
 705                                                                                 },
 706                                                                                 {
 707                                                                                     xtype : 'Input',
 708                                                                                     placeholder : 'after: .00',
 709                                                                                     xns : Roo.bootstrap,
 710                                                                                     size : 'md',
 711                                                                                     after : 0
 712                                                                                 },
 713                                                                                 {
 714                                                                                     xtype : 'Input',
 715                                                                                     placeholder : 'before $, after: .00',
 716                                                                                     xns : Roo.bootstrap,
 717                                                                                     before : '$',
 718                                                                                     size : 'md',
 719                                                                                     after : 0
 720                                                                                 },
 721                                                                                 {
 722                                                                                     xtype : 'Header',
 723                                                                                     level : 4,
 724                                                                                     xns : Roo.bootstrap,
 725                                                                                     html : 'With Icons'
 726                                                                                 },
 727                                                                                 {
 728                                                                                     xtype : 'Input',
 729                                                                                     placeholder : 'before : &lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt;',
 730                                                                                     xns : Roo.bootstrap,
 731                                                                                     before : '<i class=\"fa fa-envelope\"></i>',
 732                                                                                     size : 'md'
 733                                                                                 },
 734                                                                                 {
 735                                                                                     xtype : 'Input',
 736                                                                                     placeholder : 'after : &lt;i class=&quot;fa fa-after&quot;&gt;&lt;/i&gt;',
 737                                                                                     xns : Roo.bootstrap,
 738                                                                                     size : 'md',
 739                                                                                     after : '<i class=\"fa fa-check\"></i>'
 740                                                                                 },
 741                                                                                 {
 742                                                                                     xtype : 'Input',
 743                                                                                     placeholder : 'after : &lt;i class=&quot;fa fa-ambulance&quot;&gt;&lt;/i&gt; before : &lt;i class=&quot;fa fa-dollar&quot;&gt;&lt;/i&gt;',
 744                                                                                     xns : Roo.bootstrap,
 745                                                                                     before : '<i class=\"fa fa-dollar\"></i>',
 746                                                                                     size : 'md',
 747                                                                                     after : '<i class=\"fa fa-ambulance\"></i>'
 748                                                                                 },
 749                                                                                 {
 750                                                                                     xtype : 'Header',
 751                                                                                     xns : Roo.bootstrap,
 752                                                                                     level : 4,
 753                                                                                     html : 'With checkbox and radio'
 754                                                                                 },
 755                                                                                 {
 756                                                                                     xtype : 'Row',
 757                                                                                     xns : Roo.bootstrap,
 758                                                                                     items : [
 759                                                                                         {
 760                                                                                             md : 6,
 761                                                                                             xtype : 'Input',
 762                                                                                             placeholder : '?',
 763                                                                                             xns : Roo.bootstrap,
 764                                                                                             before : 'fixme',
 765                                                                                             size : 'md'
 766                                                                                         },
 767                                                                                         {
 768                                                                                             md : 6,
 769                                                                                             xtype : 'Input',
 770                                                                                             placeholder : 'md 4',
 771                                                                                             xns : Roo.bootstrap,
 772                                                                                             size : 'md'
 773                                                                                         }
 774                                                                                     ]
 775
 776                                                                                 },
 777                                                                                 {
 778                                                                                     xtype : 'Header',
 779                                                                                     level : 4,
 780                                                                                     xns : Roo.bootstrap,
 781                                                                                     html : 'With buttons'
 782                                                                                 },
 783                                                                                 {
 784                                                                                     before : {
 785                                                                                         menu : {
 786                                                                                             xtype : 'Menu',
 787                                                                                             xns : Roo.bootstrap,
 788                                                                                             items : [
 789                                                                                                 {
 790                                                                                                     xtype : 'MenuItem',
 791                                                                                                     xns : Roo.bootstrap,
 792                                                                                                     html : 'http://',
 793                                                                                                     listeners : {
 794                                                                                                         click : function (e)
 795                                                                                                            {
 796                                                                                                                _this.httpButton.setText("http://");
 797                                                                                                            }
 798                                                                                                     }
 799                                                                                                 },
 800                                                                                                 {
 801                                                                                                     xtype : 'MenuItem',
 802                                                                                                     xns : Roo.bootstrap,
 803                                                                                                     html : 'https://',
 804                                                                                                     listeners : {
 805                                                                                                         click : function (e)
 806                                                                                                            {
 807                                                                                                                _this.httpButton.setText("https://");
 808                                                                                                            }
 809                                                                                                     }
 810                                                                                                 }
 811                                                                                             ]
 812
 813                                                                                         },
 814                                                                                         weight : 'primary',
 815                                                                                         xtype : 'Button',
 816                                                                                         xns : Roo.bootstrap,
 817                                                                                         html : 'http://',
 818                                                                                         listeners : {
 819                                                                                                 render : function (_self)
 820                                                                                                    {
 821                                                                                                        _this.httpButton = _self;
 822                                                                                                    }
 823                                                                                         },
 824                                                                                         items : [
 825
 826                                                                                         ]
 827
 828                                                                                     },
 829                                                                                     xtype : 'Input',
 830                                                                                     placeholder : 'before :  - an object...    ',
 831                                                                                     xns : Roo.bootstrap,
 832                                                                                     size : 'md',
 833                                                                                     items : [
 834
 835                                                                                     ]
 836
 837                                                                                 },
 838                                                                                 {
 839                                                                                     after : {
 840                                                                                         weight : 'success',
 841                                                                                         xtype : 'Button',
 842                                                                                         xns : Roo.bootstrap,
 843                                                                                         html : 'Go'
 844                                                                                     },
 845                                                                                     xtype : 'Input',
 846                                                                                     placeholder : 'after - a button',
 847                                                                                     xns : Roo.bootstrap,
 848                                                                                     size : 'md',
 849                                                                                     items : [
 850
 851                                                                                     ]
 852
 853                                                                                 }
 854                                                                             ]
 855
 856                                                                         }
 857                                                                     ]
 858
 859                                                                 }
 860                                                             ]
 861
 862                                                         }
 863                                                     ]
 864
 865                                                 }
 866                                             ]
 867
 868                                         }
 869                                     ]
 870
 871                                 }
 872                             ]
 873
 874                         }
 875                     ]
 876
 877                 }
 878             ]
 879
 880         };    }
 881 });