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