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