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

   1 /*
   2  * - LGPL
   3  *
   4  * base class for bootstrap elements.
   5  *
   6  */
   7
   8 Roo.bootstrap = Roo.bootstrap || {};
   9 /**
  10  * @class Roo.bootstrap.Component
  11  * @extends Roo.Component
  12  * Bootstrap Component base class
  13  * @cfg {String} cls css class
  14  * @cfg {String} style any extra css
  15  *
  16  * @constructor
  17  * Do not use directly - it does not do anything..
  18  * @param {Object} config The config object
  19  */
  20
  21
  22
  23 Roo.bootstrap.Component = function(config){
  24     Roo.bootstrap.Component.superclass.constructor.call(this, config);
  25 };
  26
  27 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
  28
  29     cls : false,
  30
  31     style : false,
  32
  33     autoCreate : false,
  34
  35     initEvents : function() {  },
  36
  37     parentId : false,
  38
  39     parent: function() {
  40         // returns the parent component..
  41         return Roo.ComponentMgr.get(this.parentId)
  42
  43
  44     },
  45
  46     // private
  47     onRender : function(ct, position)
  48     {
  49         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
  50         if(this.el){
  51             return;
  52         }
  53         var cfg = Roo.apply({},  this.getAutoCreate());
  54         cfg.id = Roo.id();
  55
  56         if (this.cls) {
  57             cfg.cls += ' ' + this.cls;
  58         }
  59         if (this.style) { // fixme needs to support more complex style data.
  60             cfg.style = this.style;
  61         }
  62         this.el = ct.createChild(cfg, position);
  63         if(this.tabIndex !== undefined){
  64             this.el.dom.setAttribute('tabIndex', this.tabIndex);
  65         }
  66         this.initEvents();
  67
  68
  69     },
  70
  71     getChildContainer : function()
  72     {
  73         return this.el;
  74     },
  75
  76     addxtype : function (tree, cntr) {
  77         var cn = this;
  78         cntr = typeof(cntr == 'undefined' ) ? 'getChildContainer' : cntr;
  79
  80         if (tree.xtype != 'Body') {
  81
  82             cn = Roo.factory(tree);
  83
  84             cn.parentType = this.xtype; //??
  85             cn.parentId = this.id;
  86             cn.render(this[cntr]());
  87             // then add the element..
  88         }
  89         var nitems = [];
  90         if (typeof (tree.menu) != 'undefined') {
  91             tree.menu.parentType = cn.xtype;
  92             tree.menu.triggerEl = cn.el;
  93             nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
  94
  95         }
  96         if (typeof (tree.buttons) != 'undefined' && typeof(cn.getButtonContainer) == 'function') {
  97
  98             for(var i =0;i < tree.buttons.length;i++) {
  99                 nitems.push(cn.addxtype(Roo.apply({}, tree.buttons[i]), 'getButtonContainer'));
 100             }
 101
 102
 103         }
 104         if (!tree.items || !tree.items.length) {
 105             this.items = nitems;
 106             return this;
 107         }
 108         var items = tree.items;
 109         delete tree.items;
 110
 111         //Roo.log(items.length);
 112             // add the items..
 113         for(var i =0;i < items.length;i++) {
 114             nitems.push(cn.addxtype(Roo.apply({}, items[i])));
 115         }
 116
 117         this.items = nitems;
 118
 119
 120         return this;
 121     }
 122
 123
 124
 125
 126 });
 127
 128  /*
 129  * - LGPL
 130  *
 131  * page container.
 132  *
 133  */
 134 Roo.bootstrap.Body = function(config){
 135     Roo.bootstrap.Body.superclass.constructor.call(this, config);
 136 };
 137
 138 Roo.extend(Roo.bootstrap.Body, Roo.bootstrap.Component,  {
 139
 140         autoCreate : {
 141         cls: 'container'
 142     },
 143     onRender : function(ct, position){
 144         this.el = Roo.get(document.body);
 145
 146         //this.el.addClass([this.fieldClass, this.cls]);
 147
 148     }
 149
 150
 151
 152
 153 });
 154
 155  /*
 156  * - LGPL
 157  *
 158  * button group
 159  *
 160  */
 161
 162
 163 /**
 164  * @class Roo.bootstrap.ButtonGroup
 165  * @extends Roo.bootstrap.Component
 166  * Bootstrap ButtonGroup class
 167  * @cfg {String} size lg | sm | xs (default empty normal)
 168  * @cfg {String} align vertical | justified  (default none)
 169  * @cfg {String} direction up | down (default down)
 170  * @cfg {Boolean} toolbar false | true
 171  * @cfg {Boolean} btn true | false
 172  *
 173  *
 174  * @constructor
 175  * Create a new Input
 176  * @param {Object} config The config object
 177  */
 178
 179 Roo.bootstrap.ButtonGroup = function(config){
 180     Roo.bootstrap.ButtonGroup.superclass.constructor.call(this, config);
 181 };
 182
 183 Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component,  {
 184
 185     size: '',
 186     align: '',
 187     direction: '',
 188     toolbar: false,
 189     btn: true,
 190
 191     getAutoCreate : function(){
 192         var cfg = {
 193             cls: 'btn-group',
 194             html : null
 195         }
 196
 197         cfg.html = this.html || cfg.html;
 198
 199         if (this.toolbar) {
 200             cfg = {
 201                 cls: 'btn-toolbar',
 202                 html: null
 203             }
 204
 205             return cfg;
 206         }
 207
 208         if (['vertical','justified'].indexOf(this.align)!==-1) {
 209             cfg.cls = 'btn-group-' + this.align;
 210
 211             if (this.align == 'justified') {
 212                 console.log(this.items);
 213             }
 214         }
 215
 216         if (['lg','sm','xs'].indexOf(this.size)!==-1) {
 217             cfg.cls += ' btn-group-' + this.size;
 218         }
 219
 220         if (this.direction == 'up') {
 221             cfg.cls += ' dropup' ;
 222         }
 223
 224         return cfg;
 225     }
 226
 227 });
 228
 229  /*
 230  * - LGPL
 231  *
 232  * button
 233  *
 234  */
 235
 236 /**
 237  * @class Roo.bootstrap.Button
 238  * @extends Roo.bootstrap.Component
 239  * Bootstrap Button class
 240  * @cfg {String} html The button content
 241  * @cfg {String} weight default (or empty) | primary | success | info | warning | danger
 242  * @cfg {String} size empty | lg | sm | xs
 243  * @cfg {String} tag empty | a | input | submit
 244  * @cfg {String} href empty or href
 245  * @cfg {Boolean} disabled false | true
 246  * @cfg {Boolean} isClose false | true
 247  * @cfg {String} glyphicon empty | adjust | align-center | align-justify | align-left | align-right | arrow-down | arrow-left | arrow-right | arrow-up | asterisk | backward | ban-circle | barcode | bell | bold | book | bookmark | briefcase | bullhorn | calendar | camera | certificate | check | chevron-down | chevron-left | chevron-right | chevron-up | circle-arrow-down | circle-arrow-left | circle-arrow-right | circle-arrow-up | cloud | cloud-download | cloud-upload | cog | collapse-down | collapse-up | comment | compressed | copyright-mark | credit-card | cutlery | dashboard | download | download-alt | earphone | edit | eject | envelope | euro | exclamation-sign | expand | export | eye-close | eye-open | facetime-video | fast-backward | fast-forward | file | film | filter | fire | flag | flash | floppy-disk | floppy-open | floppy-remove | floppy-save | floppy-saved | folder-close | folder-open | font | forward | fullscreen | gbp | gift | glass | globe | hand-down | hand-left | hand-right | hand-up | hd-video | hdd | header | headphones | heart | heart-empty | home | import | inbox | indent-left | indent-right | info-sign | italic | leaf | link | list | list-alt | lock | log-in | log-out | magnet | map-marker | minus | minus-sign | move | music | new-window | off | ok | ok-circle | ok-sign | open | paperclip | pause | pencil | phone | phone-alt | picture | plane | play | play-circle | plus | plus-sign | print | pushpin | qrcode | question-sign | random | record | refresh | registration-mark | remove | remove-circle | remove-sign | repeat | resize-full | resize-horizontal | resize-small | resize-vertical | retweet | road | save | saved | screenshot | sd-video | search | send | share | share-alt | shopping-cart | signal | sort | sort-by-alphabet | sort-by-alphabet-alt | sort-by-attributes | sort-by-attributes-alt | sort-by-order | sort-by-order-alt | sound-5-1 | sound-6-1 | sound-7-1 | sound-dolby | sound-stereo | star | star-empty | stats | step-backward | step-forward | stop | subtitles | tag | tags | tasks | text-height | text-width | th | th-large | th-list | thumbs-down | thumbs-up | time | tint | tower | transfer | trash | tree-conifer | tree-deciduous | unchecked | upload | usd | user | volume-down | volume-off | volume-up | warning-sign | wrench | zoom-in | zoom-out
 248  * @cfg {String} badge text for badge
 249  * @cfg {String} theme default (or empty) | glow
 250  * @cfg {Boolean} inverse false | true
 251  * @cfg {Boolean} toggle false | true
 252  * @cfg {String} ontext text for on toggle state
 253  * @cfg {String} offtext text for off toggle state
 254  * @cfg {Boolean} defaulton true | false
 255  *
 256  * @constructor
 257  * Create a new button
 258  * @param {Object} config The config object
 259  */
 260
 261
 262 Roo.bootstrap.Button = function(config){
 263     Roo.bootstrap.Button.superclass.constructor.call(this, config);
 264     this.addEvents({
 265         // raw events
 266         /**
 267          * @event click
 268          * The raw click event for the entire grid.
 269          * @param {Roo.EventObject} e
 270          */
 271         "click" : true
 272     });
 273 };
 274
 275 Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
 276     html: false,
 277     active: false,
 278     weight: '',
 279     size: '',
 280     tag: 'button',
 281     href: '',
 282     disabled: false,
 283     isClose: false,
 284     glyphicon: '',
 285     badge: '',
 286     theme: 'default',
 287     inverse: false,
 288
 289     toggle: false,
 290     ontext: 'ON',
 291     offtext: 'OFF',
 292     defaulton: true,
 293
 294     getAutoCreate : function(){
 295
 296         var cfg = {
 297             tag : 'button',
 298             html: 'hello'
 299         };
 300
 301         if (['a', 'button', 'input', 'submit'].indexOf(this.tag) < 0) {
 302             throw "Invalid value for tag: " + this.tag + ". must be a, button, input or submit.";
 303             this.tag = 'button';
 304         } else {
 305             cfg.tag = this.tag;
 306         }
 307         cfg.html = this.html || cfg.html;
 308
 309         if (this.toggle===true) {
 310             cfg={
 311                 tag: 'div',
 312                 cls: 'slider-frame',
 313                 cn: [
 314                     {
 315                         tag: 'span',
 316                         'data-on-text':'ON',
 317                         'data-off-text':'OFF',
 318                         cls: 'slider-button',
 319                         html: this.offtext
 320                     }
 321                 ]
 322             };
 323
 324             if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
 325                 cfg.cls += ' '+this.weight;
 326             }
 327
 328             return cfg;
 329         }
 330
 331         if (this.isClose) {
 332             cfg.cls += ' close';
 333
 334             cfg["aria-hidden"] = true;
 335
 336             cfg.html = "&times;";
 337
 338             return cfg;
 339         }
 340
 341         if (true) {
 342             if (this.theme==='default') {
 343                 cfg.cls = 'btn';
 344
 345                 if (this.parentType != 'Navbar') {
 346                     this.weight = this.weight.length ?  this.weight : 'default';
 347                 }
 348                 if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
 349
 350                     cfg.cls += ' btn-' + this.weight;
 351                 }
 352             } else if (this.theme==='glow') {
 353
 354                 cfg.tag = 'a';
 355                 cfg.cls='btn-glow';
 356
 357                 if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) {
 358
 359                     cfg.cls += ' ' + this.weight;
 360                 }
 361             }
 362         }
 363
 364         if (this.inverse) {
 365             this.cls += ' inverse';
 366         }
 367
 368
 369         if (this.active) {
 370             cfg.cls += ' active';
 371         }
 372
 373         cfg.cls += this.size.length ? (' btn-' + this.size) : '';
 374
 375         //gsRoo.log(this.parentType);
 376         if (this.parentType === 'Navbar') {
 377             cfg.tag = 'li';
 378
 379             cfg.cls = '';
 380             cfg.cn =  [{
 381                 tag : 'a',
 382                 html : this.html,
 383                 href : this.href || '#'
 384             }];
 385             if (this.menu) {
 386                 cfg.cn[0].html = this.html  + ' <span class="caret"></span>';
 387                 cfg.cls += ' dropdown';
 388             }
 389
 390             delete cfg.html;
 391
 392         } else if (this.menu) {
 393             cfg.tag = 'a';
 394             cfg.cls += ' dropdown test';
 395         }
 396
 397
 398
 399         if (this.disabled) {
 400             cfg.disabled = 'disabled';
 401         }
 402
 403         if (this.items) {
 404             Roo.log('changing to ul' );
 405             cfg.tag = 'ul';
 406             this.glyphicon = 'caret';
 407         }
 408
 409         if (this.glyphicon) {
 410             cfg.html = ' ' + cfg.html;
 411
 412             cfg.cn = [
 413                 {
 414                     tag: 'span',
 415                     cls: 'glyphicon glyphicon-' + this.glyphicon
 416                 }
 417             ];
 418         }
 419
 420         if (this.badge) {
 421             cfg.html += ' ';
 422
 423             cfg.tag = 'a';
 424
 425             cfg.cls='btn';
 426
 427             cfg.href=this.href;
 428
 429             cfg.cn = [
 430                 cfg.html,
 431                 {
 432                     tag: 'span',
 433                     cls: 'badge',
 434                     html: this.badge
 435                 }
 436             ];
 437
 438             cfg.html='';
 439         }
 440
 441         if (cfg.tag !== 'a' && this.href !== '') {
 442             throw "Tag must be a to set href.";
 443         } else if (this.href.length > 0) {
 444             cfg.href = this.href;
 445         }
 446
 447         return cfg;
 448     },
 449     initEvents: function() {
 450        // Roo.log('init events?');
 451        // Roo.log(this.el.dom);
 452         this.el.select('a',true).on('click',
 453                 function(e) {
 454                     this.fireEvent('click', this);
 455                 },
 456                 this
 457         );
 458     }
 459
 460 });
 461
 462  /*
 463  * - LGPL
 464  *
 465  * column
 466  *
 467  */
 468
 469 /**
 470  * @class Roo.bootstrap.Column
 471  * @extends Roo.bootstrap.Component
 472  * Bootstrap Column class
 473  * @cfg {Number} xs colspan out of 12 for mobile-sized screens
 474  * @cfg {Number} sm colspan out of 12 for tablet-sized screens
 475  * @cfg {Number} md colspan out of 12 for computer-sized screens
 476  * @cfg {Number} lg colspan out of 12 for large computer-sized screens
 477  * @cfg {String} html content of column.
 478  *
 479  * @constructor
 480  * Create a new Column
 481  * @param {Object} config The config object
 482  */
 483
 484 Roo.bootstrap.Column = function(config){
 485     Roo.bootstrap.Column.superclass.constructor.call(this, config);
 486 };
 487
 488 Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
 489
 490     xs: null,
 491     sm: null,
 492     md: null,
 493     lg: null,
 494     html: '',
 495     offset: 0,
 496
 497     getAutoCreate : function(){
 498         var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
 499
 500         cfg = {
 501             tag: 'div',
 502             cls: 'column'
 503         };
 504
 505         var settings=this;
 506         ['xs','sm','md','lg'].map(function(size){
 507             if (settings[size]) {
 508                 cfg.cls += ' col-' + size + '-' + settings[size];
 509             }
 510         });
 511         if (this.html.length) {
 512             cfg.html = html;
 513         }
 514
 515         return cfg;
 516     }
 517
 518 });
 519
 520
 521
 522  /*
 523  * - LGPL
 524  *
 525  * page container.
 526  *
 527  */
 528
 529
 530 /**
 531  * @class Roo.bootstrap.Container
 532  * @extends Roo.bootstrap.Component
 533  * Bootstrap Container class
 534  * @cfg {Boolean} jumbotron is it a jumbotron element
 535  * @cfg {String} html content of element
 536  * @cfg {String} well (lg|sm|md) a well, large, small or medium.
 537  * @cfg {String} panel (primary|success|info|warning|danger) render as a panel.
 538  * @cfg {String} header content of header (for panel)
 539  * @cfg {String} footer content of footer (for panel)
 540  *
 541  *
 542  * @constructor
 543  * Create a new Container
 544  * @param {Object} config The config object
 545  */
 546
 547 Roo.bootstrap.Container = function(config){
 548     Roo.bootstrap.Container.superclass.constructor.call(this, config);
 549 };
 550
 551 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
 552
 553     jumbotron : false,
 554     well: '',
 555     panel : '',
 556     header: '',
 557     footer : '',
 558
 559     getChildContainer : function() {
 560         if (this.panel.length) {
 561             return this.el.select('.panel-body',true).first();
 562         }
 563
 564         return this.el;
 565     },
 566
 567
 568     getAutoCreate : function(){
 569
 570         var cfg = {
 571             cls: 'container',
 572             html : ''
 573         };
 574         if (this.jumbotron) {
 575             cfg.cls = 'jumbotron';
 576         }
 577         if (this.cls) {
 578             cfg.cls = this.cls;
 579         }
 580
 581         if (this.well.length) {
 582             switch (this.well) {
 583                 case 'lg':
 584                 case 'sm':
 585                     cfg.cls +'well well-' +this.well;
 586                     break;
 587                 default:
 588                     cfg.cls +'well';
 589                     break;
 590             }
 591         }
 592
 593         var body = cfg;
 594
 595         if (this.panel.length) {
 596             cfg.cls += 'panel panel-' + this.panel;
 597             cfg.cn = [];
 598             if (this.header.length) {
 599                 cfg.cn.push({
 600                     tag: 'h3',
 601                     cls : 'panel-heading',
 602                     html : this.header
 603                 });
 604             }
 605             body = false;
 606             cfg.cn.push({
 607                 cls : 'panel-body',
 608                 html : this.html
 609             });
 610
 611
 612             if (this.footer.length) {
 613                 cfg.cn.push({
 614                     tag: 'h3',
 615                     cls : 'panel-footer',
 616                     html : this.footer
 617                 });
 618             }
 619
 620         }
 621         if (body) {
 622             body.html = this.html || cfg.html;
 623         }
 624
 625
 626         return cfg;
 627     }
 628
 629 });
 630
 631  /*
 632  * - LGPL
 633  *
 634  * form
 635  *
 636  */
 637
 638 /**
 639  * @class Roo.bootstrap.Form
 640  * @extends Roo.bootstrap.Component
 641  * Bootstrap Form class
 642  * @cfg {String} method  GET | POST (default POST)
 643  * @cfg {String} labelAlign top | left (default top)
 644  *
 645  * @constructor
 646  * Create a new Form
 647  * @param {Object} config The config object
 648  */
 649
 650
 651 Roo.bootstrap.Form = function(config){
 652     Roo.bootstrap.Form.superclass.constructor.call(this, config);
 653     this.addEvents({
 654         /**
 655          * @event clientvalidation
 656          * If the monitorValid config option is true, this event fires repetitively to notify of valid state
 657          * @param {Form} this
 658          * @param {Boolean} valid true if the form has passed client-side validation
 659          */
 660         clientvalidation: true,
 661         /**
 662          * @event rendered
 663          * Fires when the form is rendered
 664          * @param {Roo.form.Form} form
 665          */
 666         rendered : true
 667     });
 668 };
 669
 670 Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
 671
 672
 673      getAutoCreate : function(){
 674
 675         var cfg = {
 676             tag: 'form',
 677             method : this.method || 'POST',
 678             id : this.id || Roo.id(),
 679             cls : ''
 680         }
 681
 682         if (this.labelAlign == 'left' ) {
 683             cfg.cls += ' form-horizontal';
 684         }
 685         return cfg;
 686     }
 687
 688 });
 689
 690
 691 /*
 692  * - LGPL
 693  *
 694  * image
 695  *
 696  */
 697
 698
 699 /**
 700  * @class Roo.bootstrap.Img
 701  * @extends Roo.bootstrap.Component
 702  * Bootstrap Img class
 703  * @cfg {Boolean} imgResponsive false | true
 704  * @cfg {String} border rounded | circle | thumbnail
 705  * @cfg {String} src image source
 706  * @cfg {String} alt image alternative text
 707  *
 708  * @constructor
 709  * Create a new Input
 710  * @param {Object} config The config object
 711  */
 712
 713 Roo.bootstrap.Img = function(config){
 714     Roo.bootstrap.Img.superclass.constructor.call(this, config);
 715 };
 716
 717 Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
 718
 719     imgResponsive: true,
 720     border: '',
 721     src: '',
 722
 723     getAutoCreate : function(){
 724
 725         cfg = {
 726             tag: 'img',
 727             cls: 'img-responsive',
 728             html : null
 729         }
 730
 731         cfg.html = this.html || cfg.html;
 732
 733         cfg.src = this.src || cfg.src;
 734
 735         if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) {
 736             cfg.cls += ' img-' + this.border;
 737         }
 738
 739         if(this.alt){
 740             cfg.alt = this.alt;
 741         }
 742
 743         return cfg;
 744     }
 745
 746 });
 747
 748  /*
 749  * - LGPL
 750  *
 751  * Input
 752  *
 753  */
 754
 755 /**
 756  * @class Roo.bootstrap.Input
 757  * @extends Roo.bootstrap.Component
 758  * Bootstrap Input class
 759  * @cfg {Boolean} disabled is it disabled
 760  * @cfg {String} fieldLabel - the label associated
 761  * @cfg {String} inputType button | checkbox | email | file | hidden | image | number | password | radio | range | reset | search | submit | text
 762  * @cfg {String} name name of the input
 763  * @cfg {boolean} disabled is it disabled
 764  * @cfg {string} fieldLabel - the label associated
 765  * @cfg {string}  inputType - input / file submit ...
 766  * @cfg {string} placeholder - placeholder to put in text.
 767  * @cfg {string}  before - input group add on before
 768  * @cfg {string} after - input group add on after
 769  *
 770  *
 771  * @constructor
 772  * Create a new Input
 773  * @param {Object} config The config object
 774  */
 775
 776 Roo.bootstrap.Input = function(config){
 777     Roo.bootstrap.Input.superclass.constructor.call(this, config);
 778
 779 };
 780
 781 Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
 782
 783     fieldLabel : '',
 784     inputType : 'text',
 785     disabled : false,
 786     name : false,
 787     placeholder: false,
 788     before : false,
 789     after : false,
 790
 791     getAutoCreate : function(){
 792
 793         var parent = this.parent();
 794
 795         var align = parent.labelAlign;
 796
 797         var id = Roo.id();
 798
 799         var cfg = {
 800             cls: 'form-group' //input-group
 801         };
 802
 803         var input =  {
 804             tag: 'input',
 805             id : id,
 806             type : this.inputType,
 807             cls : 'form-control',
 808             placeholder : this.placeholder || ''
 809
 810         };
 811         if (this.name) {
 812             input.name = name;
 813         }
 814
 815         var inputblock = input;
 816
 817         if (this.before || this.after) {
 818
 819             inputblock = {
 820                 cls : 'input-group',
 821                 cn :  []
 822             };
 823             if (this.before) {
 824                 inputblock.cn.push({
 825                     tag :'span',
 826                     cls : 'input-group-addon',
 827                     html : this.before
 828                 });
 829             }
 830             inputblock.cn.push(input);
 831             if (this.after) {
 832                 inputblock.cn.push({
 833                     tag :'span',
 834                     cls : 'input-group-addon',
 835                     html : this.after
 836                 });
 837             }
 838
 839         }
 840
 841         Roo.log(align);
 842         Roo.log(this.fieldLabel.length);
 843
 844         if (align ==='left' && this.fieldLabel.length) {
 845                 Roo.log("left and has label");
 846                 cfg.cn = [
 847
 848                     {
 849                         tag: 'label',
 850                         'for' :  id,
 851                         cls : 'col-sm-2 control-label',
 852                         html : this.fieldLabel
 853
 854                     },
 855                     {
 856                         cls : "col-sm-10",
 857                         cn: [
 858                             inputblock
 859                         ]
 860                     }
 861
 862                 ];
 863         } else if ( this.fieldLabel.length) {
 864                 Roo.log(" label");
 865                  cfg.cn = [
 866
 867                     {
 868                         tag: 'label',
 869                         //cls : 'input-group-addon',
 870                         html : this.fieldLabel
 871
 872                     },
 873
 874                     inputblock
 875
 876                 ];
 877
 878         } else {
 879
 880                    Roo.log(" no label && no align");
 881                 cfg.cn = [
 882
 883                         inputblock
 884
 885                 ];
 886
 887
 888         }
 889
 890
 891
 892
 893         if (this.disabled) {
 894             input.disabled=true;
 895         }
 896         return cfg;
 897
 898     },
 899     setDisabled : function(v)
 900     {
 901         var i  = this.el.select('input',true).dom;
 902         if (v) {
 903             i.removeAttribute('disabled');
 904             return;
 905
 906         }
 907         i.setAttribute('disabled','true');
 908     }
 909 });
 910
 911
 912 /*
 913  * - LGPL
 914  *
 915  * header
 916  *
 917  */
 918
 919 /**
 920  * @class Roo.bootstrap.Header
 921  * @extends Roo.bootstrap.Component
 922  * Bootstrap Header class
 923  * @cfg {String} html content of header
 924  * @cfg {Number} level (1|2|3|4|5|6) default 1
 925  *
 926  * @constructor
 927  * Create a new Header
 928  * @param {Object} config The config object
 929  */
 930
 931
 932 Roo.bootstrap.Header  = function(config){
 933     Roo.bootstrap.Header.superclass.constructor.call(this, config);
 934 };
 935
 936 Roo.extend(Roo.bootstrap.Header, Roo.bootstrap.Component,  {
 937
 938     //href : false,
 939     html : false,
 940     level : 1,
 941
 942
 943
 944     getAutoCreate : function(){
 945
 946         var cfg = {
 947             tag: 'h' + (1 *this.level),
 948             html: this.html || 'fill in html'
 949         } ;
 950
 951         return cfg;
 952     }
 953
 954 });
 955
 956
 957
 958  /*
 959  * - LGPL
 960  *
 961  * menu
 962  *
 963  */
 964
 965 /**
 966  * @class Roo.bootstrap.Menu
 967  * @extends Roo.bootstrap.Component
 968  * Bootstrap Menu class - container for MenuItems
 969  * @cfg {String} type type of menu
 970  *
 971  * @constructor
 972  * Create a new Menu
 973  * @param {Object} config The config object
 974  */
 975
 976
 977 Roo.bootstrap.Menu = function(config){
 978     Roo.bootstrap.Menu.superclass.constructor.call(this, config);
 979 };
 980
 981 Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
 982
 983    /// html : false,
 984     //align : '',
 985     triggerEl : false,
 986     type: false,
 987
 988
 989     getChildContainer : function() {
 990         return this.el;
 991     },
 992
 993     getAutoCreate : function(){
 994
 995         //if (['right'].indexOf(this.align)!==-1) {
 996         //    cfg.cn[1].cls += ' pull-right'
 997         //}
 998         var cfg = {
 999             tag : 'ul',
1000             cls : 'dropdown-menu'
1001
1002         }
1003
1004         if (this.type==='submenu') {
1005             cfg.cls='submenu active'
1006         }
1007
1008         return cfg;
1009     },
1010     initEvents : function() {
1011        // Roo.log("ADD event");
1012        // Roo.log(this.triggerEl.dom);
1013         this.triggerEl.on('click', this.toggle, this);
1014         this.triggerEl.addClass('dropdown-toggle');
1015
1016     },
1017     toggle  : function(e)
1018     {
1019         //Roo.log(e.getTarget());
1020        // Roo.log(this.triggerEl.dom);
1021         if (Roo.get(e.getTarget()).findParent('.dropdown-menu')) {
1022             return;
1023         }
1024         var isActive = this.triggerEl.hasClass('open');
1025         // if disabled.. ingore
1026         this.clearMenus(e);
1027         //if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
1028          // if mobile we use a backdrop because click events don't delegate
1029         // $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
1030         // }
1031
1032        //var relatedTarget = { relatedTarget: this }
1033        //$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
1034
1035        //if (e.isDefaultPrevented()) return;
1036
1037        this.triggerEl[isActive ? 'removeClass' : 'addClass']('open');
1038
1039        //  .trigger('shown.bs.dropdown', relatedTarget)
1040
1041        this.triggerEl.focus();
1042        Roo.log(e);
1043        e.preventDefault();
1044
1045
1046     },
1047     clearMenus : function()
1048     {
1049         //$(backdrop).remove()
1050         Roo.select('.dropdown-toggle',true).each(function(aa) {
1051             if (!aa.hasClass('open')) {
1052                 return;
1053             }
1054             // triger close...
1055             aa.removeClass('open');
1056           //var parent = getParent($(this))
1057           //var relatedTarget = { relatedTarget: this }
1058
1059            //$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
1060           //if (e.isDefaultPrevented()) return
1061            //$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
1062         })
1063     }
1064
1065
1066 });
1067
1068
1069
1070  /*
1071  * - LGPL
1072  *
1073  * menu item
1074  *
1075  */
1076
1077
1078 /**
1079  * @class Roo.bootstrap.MenuItem
1080  * @extends Roo.bootstrap.Component
1081  * Bootstrap MenuItem class
1082  * @cfg {String} html the menu label
1083  * @cfg {String} href the link
1084  *
1085  *
1086  * @constructor
1087  * Create a new MenuItem
1088  * @param {Object} config The config object
1089  */
1090
1091
1092 Roo.bootstrap.MenuItem = function(config){
1093     Roo.bootstrap.MenuItem.superclass.constructor.call(this, config);
1094 };
1095
1096 Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
1097
1098     href : false,
1099     html : false,
1100
1101     getAutoCreate : function(){
1102         var cfg= {
1103             tag: 'li',
1104             cn: [
1105                 {
1106                     tag : 'a',
1107                     href : '#',
1108                     html : 'Link'
1109                 }
1110             ]
1111         };
1112
1113         cfg.cn[0].href = this.href || cfg.cn[0].href ;
1114         cfg.cn[0].html = this.html || cfg.cn[0].html ;
1115         return cfg;
1116     }
1117
1118 });
1119
1120
1121
1122  /*
1123  * - LGPL
1124  *
1125  * menu separator
1126  *
1127  */
1128
1129
1130 /**
1131  * @class Roo.bootstrap.MenuSeparator
1132  * @extends Roo.bootstrap.Component
1133  * Bootstrap MenuSeparator class
1134  *
1135  * @constructor
1136  * Create a new MenuItem
1137  * @param {Object} config The config object
1138  */
1139
1140
1141 Roo.bootstrap.MenuSeparator = function(config){
1142     Roo.bootstrap.MenuSeparator.superclass.constructor.call(this, config);
1143 };
1144
1145 Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component,  {
1146
1147     getAutoCreate : function(){
1148         var cfg = {
1149             cls: 'divider',
1150             tag : 'li'
1151         };
1152
1153         return cfg;
1154     }
1155
1156 });
1157
1158
1159
1160
1161 /*
1162 <div class="modal fade">
1163   <div class="modal-dialog">
1164     <div class="modal-content">
1165       <div class="modal-header">
1166         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
1167         <h4 class="modal-title">Modal title</h4>
1168       </div>
1169       <div class="modal-body">
1170         <p>One fine body&hellip;</p>
1171       </div>
1172       <div class="modal-footer">
1173         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
1174         <button type="button" class="btn btn-primary">Save changes</button>
1175       </div>
1176     </div><!-- /.modal-content -->
1177   </div><!-- /.modal-dialog -->
1178 </div><!-- /.modal -->
1179 */
1180 /*
1181  * - LGPL
1182  *
1183  * page contgainer.
1184  *
1185  */
1186
1187 /**
1188  * @class Roo.bootstrap.Modal
1189  * @extends Roo.bootstrap.Component
1190  * Bootstrap Modal class
1191  * @cfg {String} title Title of dialog
1192  * @cfg {Array} buttons Array of buttons
1193  *
1194  * @constructor
1195  * Create a new Modal Dialog
1196  * @param {Object} config The config object
1197  */
1198
1199 Roo.bootstrap.Modal = function(config){
1200     Roo.bootstrap.Modal.superclass.constructor.call(this, config);
1201 };
1202
1203 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
1204
1205     title : 'test dialog',
1206
1207         buttons : false,
1208     onRender : function(ct, position){
1209         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
1210         if(!this.el){
1211             var cfg = Roo.apply({},  this.getAutoCreate());
1212             cfg.id = Roo.id();
1213             //if(!cfg.name){
1214             //    cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
1215             //}
1216             //if (!cfg.name.length) {
1217             //    delete cfg.name;
1218            // }
1219             if (this.cls) {
1220                 cfg.cls += ' ' + this.cls;
1221             }
1222             if (this.style) {
1223                 cfg.style = this.style;
1224             }
1225             this.el = Roo.get(document.body).createChild(cfg, position);
1226         }
1227         //var type = this.el.dom.type;
1228
1229         if(this.tabIndex !== undefined){
1230             this.el.dom.setAttribute('tabIndex', this.tabIndex);
1231         }
1232         this.initEvents();
1233         //this.el.addClass([this.fieldClass, this.cls]);
1234
1235     },
1236     getAutoCreate : function(){
1237
1238         return {
1239             cls: "modal fade",
1240             cn : [
1241                 {
1242                     cls: "modal-dialog",
1243                     cn : [
1244                         {
1245                             cls : "modal-content",
1246                             cn : [
1247                                 {
1248                                     cls : 'modal-header',
1249                                     cn : [
1250                                         {
1251                                             tag: 'button',
1252                                             cls : 'close',
1253                                             html : '&times'
1254                                         },
1255                                         {
1256                                             tag: 'h4',
1257                                             cls : 'modal-title',
1258                                             html : this.title
1259                                         }
1260
1261                                     ]
1262                                 },
1263                                 {
1264                                     cls : 'modal-body'
1265
1266                                 },
1267                                  {
1268                                     cls : 'modal-footer'
1269                                     /*
1270                                     cn : [
1271                                         {
1272                                             tag: 'button',
1273                                             cls : 'btn btn-default',
1274                                             html : 'Close'
1275                                         },
1276                                         {
1277                                             tag: 'button',
1278                                             cls : 'btn btn-primary',
1279                                             html : 'Save'
1280                                         }
1281
1282                                     ]
1283                                     */
1284                                 }
1285
1286
1287                             ]
1288
1289                         }
1290                     ]
1291
1292                 }
1293             ]
1294
1295
1296         };
1297
1298     },
1299     getChildContainer : function() {
1300
1301          return this.el.select('.modal-body',true).first();
1302
1303     },
1304     getButtonContainer : function() {
1305          return this.el.select('.modal-footer',true).first();
1306
1307     },
1308     initEvents : function()
1309     {
1310         this.el.select('.modal-header .close').on('click', this.hide, this);
1311     },
1312     show : function() {
1313         this.el.addClass('on');
1314         this.el.removeClass('fade');
1315         this.el.setStyle('display', 'block');
1316     },
1317     hide : function() {
1318         this.el.removeClass('on');
1319         this.el.addClass('fade');
1320         this.el.setStyle('display', 'none');
1321     }
1322 });
1323
1324  /*
1325  * - LGPL
1326  *
1327  * navbar
1328  *
1329  */
1330
1331 /**
1332  * @class Roo.bootstrap.Navbar
1333  * @extends Roo.bootstrap.Component
1334  * Bootstrap Navbar class
1335  * @cfg {Boolean} sidebar has side bar
1336  * @cfg {Boolean} bar is a bar?
1337  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
1338  * @cfg {String} brand what is brand
1339  * @cfg {Boolean} inverse is inverted color
1340  * @cfg {String} type (nav | pills | tabs)
1341  * @cfg {Boolean} arrangement stacked | justified
1342  * @cfg {String} align (left | right) alignment
1343  *
1344  *
1345  * @constructor
1346  * Create a new Navbar
1347  * @param {Object} config The config object
1348  */
1349
1350
1351 Roo.bootstrap.Navbar = function(config){
1352     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
1353 };
1354
1355 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
1356
1357     sidebar: false,
1358
1359     bar: false,
1360     brand: '',
1361     inverse: false,
1362     position: '',
1363     align : false,
1364     type: 'nav',
1365     arrangement: '',
1366
1367     getAutoCreate : function(){
1368         var cfg = {
1369             cls : 'navbar'
1370         };
1371
1372         if (this.sidebar === true) {
1373             cfg = {
1374                 tag: 'div',
1375                 cls: 'sidebar-nav'
1376             };
1377             return cfg;
1378         }
1379
1380         if (this.bar === true) {
1381             cfg = {
1382                 tag: 'nav',
1383                 cls: 'navbar',
1384                 role: 'navigation',
1385                 cn: [
1386                     {
1387                         tag: 'div',
1388                         cls: 'navbar-header',
1389                         cn: [
1390                             {
1391                             tag: 'button',
1392                             type: 'button',
1393                             cls: 'navbar-toggle',
1394                             'data-toggle': 'collapse',
1395                             cn: [
1396                                 {
1397                                     tag: 'span',
1398                                     cls: 'sr-only',
1399                                     html: 'Toggle navigation'
1400                                 },
1401                                 {
1402                                     tag: 'span',
1403                                     cls: 'icon-bar'
1404                                 },
1405                                 {
1406                                     tag: 'span',
1407                                     cls: 'icon-bar'
1408                                 },
1409                                 {
1410                                     tag: 'span',
1411                                     cls: 'icon-bar'
1412                                 }
1413                             ]
1414                             }
1415                         ]
1416                     },
1417                     {
1418                     tag: 'div',
1419                     cls: 'collapse navbar-collapse'
1420                     }
1421                 ]
1422             };
1423
1424             cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
1425
1426             if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
1427             cfg.cls += ' navbar-' + this.position;
1428             cfg.tag = this.position  == 'fixed-bottom' ? 'footer' : 'header';
1429             }
1430
1431             if (this.brand !== '') {
1432                 cfg.cn[0].cn.push({
1433                     tag: 'a',
1434                     href: '#',
1435                     cls: 'navbar-brand',
1436                     cn: [
1437                     this.brand
1438                     ]
1439                 });
1440             }
1441
1442             return cfg;
1443
1444         } else if (this.bar === false) {
1445
1446         } else {
1447             Roo.log('Property \'bar\' in of Navbar must be either true or false')
1448         }
1449
1450         cfg.cn = [
1451             {
1452                 cls: 'nav',
1453                 tag : 'ul'
1454             }
1455         ];
1456
1457         if (['tabs','pills'].indexOf(this.type)!==-1) {
1458             cfg.cn[0].cls += ' nav-' + this.type
1459         } else {
1460             if (this.type!=='nav') {
1461             Roo.log('nav type must be nav/tabs/pills')
1462             }
1463             cfg.cn[0].cls += ' navbar-nav'
1464         }
1465
1466         if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
1467             cfg.cn[0].cls += ' nav-' + this.arrangement;
1468         }
1469
1470         if (this.align === 'right') {
1471             cfg.cn[0].cls += ' navbar-right';
1472         }
1473         if (this.inverse) {
1474             cfg.cls += ' navbar-inverse';
1475
1476         }
1477
1478
1479         return cfg;
1480     },
1481
1482     getChildContainer : function() {
1483         if (this.bar === true) {
1484             return this.el.select('.collapse',true).first();
1485         }
1486         console.log(this);
1487         return this.el;
1488     }
1489
1490 });
1491
1492
1493
1494  /*
1495  * - LGPL
1496  *
1497  * nav group
1498  *
1499  */
1500
1501 /**
1502  * @class Roo.bootstrap.NavGroup
1503  * @extends Roo.bootstrap.Component
1504  * Bootstrap NavGroup class
1505  * @cfg {String} align left | right
1506  * @cfg {Boolean} inverse false | true
1507  *
1508  * @constructor
1509  * Create a new nav group
1510  * @param {Object} config The config object
1511  */
1512
1513 Roo.bootstrap.NavGroup = function(config){
1514     Roo.bootstrap.NavGroup.superclass.constructor.call(this, config);
1515 };
1516
1517 Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component,  {
1518
1519     align: '',
1520     inverse: false,
1521     form: false,
1522
1523     getAutoCreate : function(){
1524         var cfg = Roo.apply({}, Roo.bootstrap.NavGroup.superclass.getAutoCreate.call(this));
1525
1526         cfg = {
1527             tag : 'ul',
1528             cls: 'nav navbar-nav'
1529         }
1530
1531         if (this.parent().sidebar === true) {
1532             cfg = {
1533                 tag: 'ul',
1534                 cls: 'dashboard-menu'
1535             }
1536
1537             return cfg;
1538         }
1539
1540         if (this.form === true) {
1541             cfg = {
1542                 tag: 'form',
1543                 cls: 'navbar-form'
1544             }
1545
1546             if (this.align === 'right') {
1547                 cfg.cls += ' navbar-right';
1548             } else {
1549                 cfg.cls += ' navbar-left';
1550             }
1551         }
1552
1553
1554         if (this.align === 'right') {
1555             cfg.cls += ' navbar-right';
1556         }
1557
1558         if (this.inverse) {
1559             cfg.cls += ' navbar-inverse';
1560
1561         }
1562
1563
1564         return cfg;
1565     }
1566
1567 });
1568
1569
1570
1571  /*
1572  * - LGPL
1573  *
1574  * row
1575  *
1576  */
1577 /**
1578  * @class Roo.bootstrap.Navbar.Button
1579  * @extends Roo.bootstrap.Component
1580  * Bootstrap Navbar.Button class
1581  * @cfg {String} href  link to
1582  * @cfg {String} html content of button
1583
1584  * @constructor
1585  * Create a new Navbar Button
1586  * @param {Object} config The config object
1587  */
1588
1589
1590 Roo.bootstrap.Navbar.Button = function(config){
1591     Roo.bootstrap.Navbar.Button.superclass.constructor.call(this, config);
1592 };
1593
1594 Roo.extend(Roo.bootstrap.Navbar.Button, Roo.bootstrap.Component,  {
1595
1596     href : false,
1597     html : false,
1598
1599     autoCreate : {
1600         cls: 'btn',
1601         tag : 'button',
1602         html: 'hello'
1603     },
1604
1605     getAutoCreate : function(){
1606
1607         var cfg = {
1608             cls: 'btn',
1609             tag : 'button',
1610             html: 'hello',
1611             cn : []
1612
1613         } ;
1614         cfg.cn.push({
1615             html : this.html || ''
1616             //href : this.
1617              //       )
1618         });
1619         cfg.cn.push({
1620             tag: 'span',
1621             cls : 'carat'
1622         });
1623
1624         return cfg;
1625     }
1626
1627 });
1628
1629
1630
1631  /*
1632  * - LGPL
1633  *
1634  * row
1635  *
1636  */
1637
1638 /**
1639  * @class Roo.bootstrap.Navbar.Item
1640  * @extends Roo.bootstrap.Component
1641  * Bootstrap Navbar.Button class
1642  * @cfg {String} href  link to
1643  * @cfg {String} html content of button
1644  * @cfg {String} badge text inside badge
1645  * @cfg {String} glyphicon name of glyphicon
1646
1647  * @constructor
1648  * Create a new Navbar Button
1649  * @param {Object} config The config object
1650  */
1651 Roo.bootstrap.Navbar.Item = function(config){
1652     Roo.bootstrap.Navbar.Item.superclass.constructor.call(this, config);
1653 };
1654
1655 Roo.extend(Roo.bootstrap.Navbar.Item, Roo.bootstrap.Component,  {
1656
1657     href: false,
1658     html: '',
1659     badge: '',
1660     icon: false,
1661     glyphicon: false,
1662
1663     getAutoCreate : function(){
1664
1665         var cfg = Roo.apply({}, Roo.bootstrap.Navbar.Item.superclass.getAutoCreate.call(this));
1666
1667         if (this.parent().parent().sidebar === true) {
1668             cfg = {
1669                 tag: 'li',
1670                 cls: '',
1671                 cn: [
1672                     {
1673                         tag: 'p',
1674                         cls: ''
1675                     }
1676                 ]
1677             }
1678
1679             if (this.html) {
1680                 cfg.cn[0].html = this.html;
1681             }
1682
1683             if (this.active) {
1684                 this.cls += ' active';
1685             }
1686
1687             if (this.menu) {
1688                 cfg.cn[0].cls += ' dropdown-toggle';
1689                 cfg.cn[0].html = (cfg.cn[0].html || this.html) + '<span class="glyphicon glyphicon-chevron-down"></span>';
1690             }
1691
1692             if (this.href) {
1693                 cfg.cn[0].tag = 'a',
1694                 cfg.cn[0].href = this.href;
1695             }
1696
1697             if (this.glyphicon) {
1698                 cfg.cn[0].html = '<i class="glyphicon glyphicon-'+this.glyphicon+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
1699             }
1700
1701             return cfg;
1702         }
1703
1704         cfg = {
1705             tag: 'li'
1706         }
1707         cfg.cn = [
1708             {
1709                 tag: 'p',
1710                 html: 'Text'
1711             }
1712         ];
1713
1714         if (this.glyphicon) {
1715             if(cfg.html){cfg.html = ' ' + this.html};
1716             cfg.cn=[
1717                 {
1718                     tag: 'span',
1719                     cls: 'glyphicon glyphicon-' + this.glyphicon
1720                 }
1721             ];
1722         }
1723
1724         cfg.cn[0].html = this.html || cfg.cn[0].html ;
1725         if (this.menu) {
1726             cfg.cn[0].tag='a';
1727             cfg.cn[0].href='#';
1728             cfg.cn[0].html += " <span class='caret'></span>";
1729         //}else if (!this.href) {
1730         //    cfg.cn[0].tag='p';
1731         //    cfg.cn[0].cls='navbar-text';
1732         } else {
1733             cfg.cn[0].tag='a';
1734             cfg.cn[0].href=this.href||'#';
1735             cfg.cn[0].html=this.html;
1736         }
1737
1738         if (this.badge !== '') {
1739
1740             cfg.cn[0].cn=[
1741                 cfg.cn[0].html + ' ',
1742                 {
1743                     tag: 'span',
1744                     cls: 'badge',
1745                     html: this.badge
1746                 }
1747             ];
1748             cfg.cn[0].html=''
1749         }
1750
1751
1752         return cfg;
1753     },
1754     initEvents: function() {
1755        // Roo.log('init events?');
1756        // Roo.log(this.el.dom);
1757         this.el.select('a',true).on('click',
1758                 function(e) {
1759                     this.fireEvent('click', this);
1760                 },
1761                 this
1762         );
1763     }
1764
1765 });
1766
1767
1768  /*
1769  * - LGPL
1770  *
1771  * row
1772  *
1773  */
1774
1775 /**
1776  * @class Roo.bootstrap.Row
1777  * @extends Roo.bootstrap.Component
1778  * Bootstrap Row class (contains columns...)
1779  *
1780  * @constructor
1781  * Create a new Row
1782  * @param {Object} config The config object
1783  */
1784
1785 Roo.bootstrap.Row = function(config){
1786     Roo.bootstrap.Row.superclass.constructor.call(this, config);
1787 };
1788
1789 Roo.extend(Roo.bootstrap.Row, Roo.bootstrap.Component,  {
1790
1791     autoCreate: {
1792         cls: 'row clearfix'
1793     }
1794
1795
1796 });
1797
1798
1799
1800  /*
1801  * - LGPL
1802  *
1803  * element
1804  *
1805  */
1806
1807 /**
1808  * @class Roo.bootstrap.Element
1809  * @extends Roo.bootstrap.Component
1810  * Bootstrap Element class
1811  * @cfg {String} html contents of the element
1812  * @cfg {String} tag tag of the element
1813  * @cfg {String} cls class of the element
1814  *
1815  * @constructor
1816  * Create a new Element
1817  * @param {Object} config The config object
1818  */
1819
1820 Roo.bootstrap.Element = function(config){
1821     Roo.bootstrap.Element.superclass.constructor.call(this, config);
1822 };
1823
1824 Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component,  {
1825
1826     tag: 'div',
1827     cls: '',
1828     html: '',
1829
1830
1831
1832     getAutoCreate : function(){
1833         var cfg = Roo.apply({}, Roo.bootstrap.Element.superclass.getAutoCreate.call(this));
1834
1835         cfg = {
1836             tag: this.tag,
1837             cls: '',
1838             html: this.html
1839         }
1840
1841         return cfg;
1842     }
1843
1844 });
1845
1846
1847
1848  /*
1849  * - LGPL
1850  *
1851  * pagination
1852  *
1853  */
1854
1855 /**
1856  * @class Roo.bootstrap.Pagination
1857  * @extends Roo.bootstrap.Component
1858  * Bootstrap Pagination class
1859  * @cfg {String} size xs | sm | md | lg
1860  * @cfg {Boolean} inverse false | true
1861  * @cfg {Number} from pagination starting number
1862  * @cfg {Number} to pagination ending number
1863  * @cfg {String} align empty or left | right
1864  * @cfg {Number} active active page number
1865  *
1866  * @constructor
1867  * Create a new Pagination
1868  * @param {Object} config The config object
1869  */
1870
1871 Roo.bootstrap.Pagination = function(config){
1872     Roo.bootstrap.Pagination.superclass.constructor.call(this, config);
1873 };
1874
1875 Roo.extend(Roo.bootstrap.Pagination, Roo.bootstrap.Component,  {
1876
1877     cls: false,
1878     size: false,
1879     inverse: false,
1880     from: 1,
1881     to: 4,
1882     align: false,
1883     active: 1,
1884
1885     getAutoCreate : function(){
1886         cfg = {
1887             tag: 'ul',
1888                 cls: 'pagination',
1889                 cn: []
1890         };
1891         if (this.inverse) {
1892             cfg.cls += ' inverse';
1893         }
1894         if (this.html) {
1895             cfg.html=this.html;
1896         }
1897         if (this.cls) {
1898             cfg.cls=this.cls;
1899         }
1900         cfg.cn[0]={
1901             tag: 'li',
1902             cn: [
1903                 {
1904                     tag: 'a',
1905                     href:'#',
1906                     html: '&laquo;'
1907                 }
1908             ]
1909         };
1910         var from=this.from>0?this.from:1;
1911         var to=this.to-from<=10?this.to:from+10;
1912         var active=this.active>=from&&this.active<=to?this.active:null;
1913         for (var i=from;i<=to;i++) {
1914             cfg.cn.push(
1915                 {
1916                     tag: 'li',
1917                     cls: active===i?'active':'',
1918                     cn: [
1919                         {
1920                             tag: 'a',
1921                             href: '#',
1922                             html: i
1923                         }
1924                     ]
1925                 }
1926             );
1927         }
1928
1929         cfg.cn.push(
1930             {
1931                 tag: 'li',
1932                 cn: [
1933                     {
1934                        tag: 'a',
1935                        href: '#',
1936                        html: '&raquo;'
1937                     }
1938                 ]
1939             }
1940         );
1941
1942         return cfg;
1943     }
1944
1945 });
1946
1947
1948
1949  /*
1950  * - LGPL
1951  *
1952  * slider
1953  *
1954  */
1955
1956
1957 /**
1958  * @class Roo.bootstrap.Slider
1959  * @extends Roo.bootstrap.Component
1960  * Bootstrap Slider class
1961  *
1962  * @constructor
1963  * Create a new Slider
1964  * @param {Object} config The config object
1965  */
1966
1967 Roo.bootstrap.Slider = function(config){
1968     Roo.bootstrap.Slider.superclass.constructor.call(this, config);
1969 };
1970
1971 Roo.extend(Roo.bootstrap.Slider, Roo.bootstrap.Component,  {
1972
1973     getAutoCreate : function(){
1974
1975         var cfg = {
1976             tag: 'div',
1977             cls: 'slider slider-sample1 vertical-handler ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all',
1978             cn: [
1979                 {
1980                     tag: 'a',
1981                     cls: 'ui-slider-handle ui-state-default ui-corner-all'
1982                 }
1983             ]
1984         }
1985
1986         return cfg;
1987     }
1988
1989 });
1990
1991  /*
1992  * - LGPL
1993  *
1994  * table
1995  *
1996  */
1997
1998 /**
1999  * @class Roo.bootstrap.Table
2000  * @extends Roo.bootstrap.Component
2001  * Bootstrap Table class
2002  *
2003  * @constructor
2004  * Create a new Table
2005  * @param {Object} config The config object
2006  */
2007
2008 Roo.bootstrap.Table = function(config){
2009     Roo.bootstrap.Table.superclass.constructor.call(this, config);
2010 };
2011
2012 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
2013
2014     html: false,
2015     cls: false,
2016
2017     getAutoCreate : function(){
2018         var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
2019
2020         cfg = {
2021             tag: 'table',
2022             cn: [
2023                 {
2024                     tag: 'tbody'
2025                 }
2026             ]
2027         }
2028         if (this.html) {
2029             cfg.html=this.html
2030         }
2031         if (this.cls) {
2032             cfg.cls=this.cls
2033         }
2034
2035         return cfg;
2036     }
2037
2038 });
2039
2040
2041
2042  /*
2043  * - LGPL
2044  *
2045  * table cell
2046  *
2047  */
2048
2049 /**
2050  * @class Roo.bootstrap.TableCell
2051  * @extends Roo.bootstrap.Component
2052  * Bootstrap TableCell class
2053  *
2054  * @constructor
2055  * Create a new TableCell
2056  * @param {Object} config The config object
2057  */
2058
2059 Roo.bootstrap.TableCell = function(config){
2060     Roo.bootstrap.TableCell.superclass.constructor.call(this, config);
2061 };
2062
2063 Roo.extend(Roo.bootstrap.TableCell, Roo.bootstrap.Component,  {
2064
2065     getAutoCreate : function(){
2066         var cfg = Roo.apply({}, Roo.bootstrap.TableCell.superclass.getAutoCreate.call(this));
2067
2068         cfg = {
2069             tag: 'td'
2070         }
2071         if (this.html) {
2072             cfg.html=this.html
2073         }
2074         if (this.cls) {
2075             cfg.cls=this.cls
2076         }
2077
2078         return cfg;
2079     }
2080
2081 });
2082
2083
2084
2085  /*
2086  * - LGPL
2087  *
2088  * table row
2089  *
2090  */
2091
2092 /**
2093  * @class Roo.bootstrap.TableRow
2094  * @extends Roo.bootstrap.Component
2095  * Bootstrap TableRow class
2096  *
2097  * @constructor
2098  * Create a new TableRow
2099  * @param {Object} config The config object
2100  */
2101
2102 Roo.bootstrap.TableRow = function(config){
2103     Roo.bootstrap.TableRow.superclass.constructor.call(this, config);
2104 };
2105
2106 Roo.extend(Roo.bootstrap.TableRow, Roo.bootstrap.Component,  {
2107
2108     getAutoCreate : function(){
2109         var cfg = Roo.apply({}, Roo.bootstrap.TableRow.superclass.getAutoCreate.call(this));
2110
2111         cfg = {
2112             tag: 'tr'
2113         }
2114
2115         return cfg;
2116     }
2117
2118 });
2119
2120
2121
2122