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             inputblock.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         Roo.log(align);
 765         Roo.log(this.fieldLabel.length);
 766         switch(true) {
 767             case align==='left' && this.fieldLabel.length:
 768
 769                 cfg.cn = [
 770
 771                     {
 772                         tag: 'label',
 773                         'for' :  id,
 774                         cls : 'col-sm-2 control-label',
 775                         html : this.fieldLabel
 776
 777                     },
 778                     {
 779                         cls : "col-sm-10",
 780                         cn: [
 781                             inputblock
 782                         ]
 783                     }
 784
 785                 ];
 786                 break;
 787             case  this.fieldLabel.length:
 788
 789                  cfg.cn = [
 790
 791                     {
 792                         tag: 'label',
 793                         //cls : 'input-group-addon',
 794                         html : this.fieldLabel
 795
 796                     },
 797
 798                     inputblock
 799
 800                 ];
 801                 break;
 802
 803             default:
 804                 cfg.cn = [
 805
 806                         inputblock
 807
 808                 ];
 809
 810
 811         }
 812
 813
 814
 815
 816         if (this.disabled) {
 817             input.disabled=true;
 818         }
 819         return cfg;
 820
 821     },
 822     setDisabled : function(v)
 823     {
 824         var i  = this.el.select('input',true).dom;
 825         if (v) {
 826             i.removeAttribute('disabled');
 827             return;
 828
 829         }
 830         i.setAttribute('disabled','true');
 831     }
 832 });
 833
 834
 835 /*
 836  * - LGPL
 837  *
 838  * row
 839  *
 840  */
 841 /**
 842  * @class Roo.bootstrap.Header
 843  * @extends Roo.bootstrap.Component
 844  * Bootstrap Header class
 845   * @cfg {String} html content of header
 846   * @cfg {Number} level (1|2|3|4|5|6|7) default 1
 847
 848   }
 849  * @constructor
 850  * Create a new Header
 851  * @param {Object} config The config object
 852  */
 853
 854
 855 Roo.bootstrap.Header  = function(config){
 856     Roo.bootstrap.Header.superclass.constructor.call(this, config);
 857 };
 858
 859 Roo.extend(Roo.bootstrap.Header, Roo.bootstrap.Component,  {
 860
 861     //href : false,
 862     html : false,
 863     level : 1,
 864
 865
 866
 867     getAutoCreate : function(){
 868
 869         var cfg = {
 870             tag: 'h' + (1 *this.level),
 871             html: this.html || 'fill in html'
 872         } ;
 873
 874         return cfg;
 875     }
 876
 877 });
 878
 879
 880
 881  /*
 882  * - LGPL
 883  *
 884  * row
 885  *
 886  */
 887
 888 /**
 889  * @class Roo.bootstrap.Menu
 890  * @extends Roo.bootstrap.Component
 891  * Bootstrap Menu class - container for MenuItems
 892  *
 893  * @constructor
 894  * Create a new Menu
 895  * @param {Object} config The config object
 896  */
 897
 898
 899 Roo.bootstrap.Menu = function(config){
 900     Roo.bootstrap.Menu.superclass.constructor.call(this, config);
 901 };
 902
 903 Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
 904
 905    /// html : false,
 906     //align : '',
 907     triggerEl : false,
 908
 909
 910     getChildContainer : function() {
 911         return this.el;
 912     },
 913
 914     getAutoCreate : function(){
 915
 916         //if (['right'].indexOf(this.align)!==-1) {
 917         //    cfg.cn[1].cls += ' pull-right'
 918         //}
 919         var cfg = {
 920             tag : 'ul',
 921             cls : 'dropdown-menu'
 922
 923         }
 924
 925         if (this.type==='submenu') {
 926             cfg.cls='submenu active'
 927         }
 928
 929         return cfg;
 930     },
 931     initEvents : function() {
 932        // Roo.log("ADD event");
 933        // Roo.log(this.triggerEl.dom);
 934         this.triggerEl.on('click', this.toggle, this);
 935         this.triggerEl.addClass('dropdown-toggle');
 936
 937     },
 938     toggle  : function(e)
 939     {
 940         //Roo.log(e.getTarget());
 941        // Roo.log(this.triggerEl.dom);
 942         if (Roo.get(e.getTarget()).findParent('.dropdown-menu')) {
 943             return;
 944         }
 945         var isActive = this.triggerEl.hasClass('open');
 946         // if disabled.. ingore
 947         this.clearMenus(e);
 948         //if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
 949          // if mobile we use a backdrop because click events don't delegate
 950         // $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
 951         // }
 952
 953        //var relatedTarget = { relatedTarget: this }
 954        //$parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
 955
 956        //if (e.isDefaultPrevented()) return;
 957
 958        this.triggerEl[isActive ? 'removeClass' : 'addClass']('open');
 959
 960        //  .trigger('shown.bs.dropdown', relatedTarget)
 961
 962        this.triggerEl.focus();
 963        Roo.log(e);
 964        e.preventDefault();
 965
 966
 967     },
 968     clearMenus : function()
 969     {
 970         //$(backdrop).remove()
 971         Roo.select('.dropdown-toggle',true).each(function(aa) {
 972             if (!aa.hasClass('open')) {
 973                 return;
 974             }
 975             // triger close...
 976             aa.removeClass('open');
 977           //var parent = getParent($(this))
 978           //var relatedTarget = { relatedTarget: this }
 979
 980            //$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
 981           //if (e.isDefaultPrevented()) return
 982            //$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
 983         })
 984     }
 985
 986
 987 });
 988
 989
 990
 991  /*
 992  * - LGPL
 993  *
 994  * row
 995  *
 996  */
 997
 998
 999 /**
1000  * @class Roo.bootstrap.MenuItem
1001  * @extends Roo.bootstrap.Component
1002  * Bootstrap MenuItem class
1003  * @cfg {String} html the menu label
1004  * @cfg {String} href the link
1005  *
1006  *
1007  * @constructor
1008  * Create a new MenuItem
1009  * @param {Object} config The config object
1010  */
1011
1012
1013 Roo.bootstrap.MenuItem = function(config){
1014     Roo.bootstrap.MenuItem.superclass.constructor.call(this, config);
1015 };
1016
1017 Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
1018
1019     href : false,
1020     html : false,
1021
1022
1023
1024     getAutoCreate : function(){
1025         var cfg= {
1026             // cls: '',
1027              tag : 'li',
1028              cn : [
1029              {
1030                  tag : 'a',
1031                  href : '#',
1032                  html : 'Link'
1033              }
1034              ]
1035          };
1036
1037         cfg.cn[0].href = this.href || cfg.cn[0].href ;
1038         cfg.cn[0].html = this.html || cfg.cn[0].html ;
1039         return cfg;
1040     }
1041
1042 });
1043
1044
1045
1046  /*
1047  * - LGPL
1048  *
1049  * row
1050  *
1051  */
1052
1053
1054 /**
1055  * @class Roo.bootstrap.MenuItem
1056  * @extends Roo.bootstrap.Component
1057  * Bootstrap MenuItem class
1058  * @cfg {String} html the menu label
1059  * @cfg {String} href the link
1060  *
1061  *
1062  * @constructor
1063  * Create a new MenuItem
1064  * @param {Object} config The config object
1065  */
1066
1067
1068 Roo.bootstrap.MenuSeparator = function(config){
1069     Roo.bootstrap.MenuSeparator.superclass.constructor.call(this, config);
1070 };
1071
1072 Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component,  {
1073
1074     getAutoCreate : function(){
1075         var cfg = {
1076             cls: 'divider',
1077             tag : 'li'
1078         };
1079
1080         return cfg;
1081     }
1082
1083 });
1084
1085
1086
1087
1088 /*
1089 <div class="modal fade">
1090   <div class="modal-dialog">
1091     <div class="modal-content">
1092       <div class="modal-header">
1093         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
1094         <h4 class="modal-title">Modal title</h4>
1095       </div>
1096       <div class="modal-body">
1097         <p>One fine body&hellip;</p>
1098       </div>
1099       <div class="modal-footer">
1100         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
1101         <button type="button" class="btn btn-primary">Save changes</button>
1102       </div>
1103     </div><!-- /.modal-content -->
1104   </div><!-- /.modal-dialog -->
1105 </div><!-- /.modal -->
1106 */
1107 /*
1108  * - LGPL
1109  *
1110  * page contgainer.
1111  *
1112  */
1113
1114 /**
1115  * @class Roo.bootstrap.Modal
1116  * @extends Roo.bootstrap.Component
1117  * Bootstrap Modal class
1118  * @cfg {String} title Title of dialog
1119  * @cfg {Array} buttons Array of buttons
1120
1121  * @constructor
1122  * Create a new Modal Dialog
1123  * @param {Object} config The config object
1124  */
1125
1126 Roo.bootstrap.Modal = function(config){
1127     Roo.bootstrap.Modal.superclass.constructor.call(this, config);
1128 };
1129
1130 Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
1131
1132     title : 'test dialog',
1133
1134         buttons : false,
1135     onRender : function(ct, position){
1136         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
1137         if(!this.el){
1138             var cfg = Roo.apply({},  this.getAutoCreate());
1139             cfg.id = Roo.id();
1140             //if(!cfg.name){
1141             //    cfg.name = typeof(this.name) == 'undefined' ? this.id : this.name;
1142             //}
1143             //if (!cfg.name.length) {
1144             //    delete cfg.name;
1145            // }
1146             if (this.cls) {
1147                 cfg.cls += ' ' + this.cls;
1148             }
1149             if (this.style) {
1150                 cfg.style = this.style;
1151             }
1152             this.el = Roo.get(document.body).createChild(cfg, position);
1153         }
1154         //var type = this.el.dom.type;
1155
1156         if(this.tabIndex !== undefined){
1157             this.el.dom.setAttribute('tabIndex', this.tabIndex);
1158         }
1159         this.initEvents();
1160         //this.el.addClass([this.fieldClass, this.cls]);
1161
1162     },
1163     getAutoCreate : function(){
1164
1165         return {
1166             cls: "modal fade",
1167             cn : [
1168                 {
1169                     cls: "modal-dialog",
1170                     cn : [
1171                         {
1172                             cls : "modal-content",
1173                             cn : [
1174                                 {
1175                                     cls : 'modal-header',
1176                                     cn : [
1177                                         {
1178                                             tag: 'button',
1179                                             cls : 'close',
1180                                             html : '&times'
1181                                         },
1182                                         {
1183                                             tag: 'h4',
1184                                             cls : 'modal-title',
1185                                             html : this.title
1186                                         }
1187
1188                                     ]
1189                                 },
1190                                 {
1191                                     cls : 'modal-body'
1192
1193                                 },
1194                                  {
1195                                     cls : 'modal-footer'
1196                                     /*
1197                                     cn : [
1198                                         {
1199                                             tag: 'button',
1200                                             cls : 'btn btn-default',
1201                                             html : 'Close'
1202                                         },
1203                                         {
1204                                             tag: 'button',
1205                                             cls : 'btn btn-primary',
1206                                             html : 'Save'
1207                                         }
1208
1209                                     ]
1210                                     */
1211                                 }
1212
1213
1214                             ]
1215
1216                         }
1217                     ]
1218
1219                 }
1220             ]
1221
1222
1223         };
1224
1225     },
1226     getChildContainer : function() {
1227
1228          return this.el.select('.modal-body',true).first();
1229
1230     },
1231     getButtonContainer : function() {
1232          return this.el.select('.modal-footer',true).first();
1233
1234     },
1235     initEvents : function()
1236     {
1237         this.el.select('.modal-header .close').on('click', this.hide, this);
1238     },
1239     show : function() {
1240         this.el.addClass('on');
1241         this.el.removeClass('fade');
1242         this.el.setStyle('display', 'block');
1243     },
1244     hide : function() {
1245         this.el.removeClass('on');
1246         this.el.addClass('fade');
1247         this.el.setStyle('display', 'none');
1248     }
1249 });
1250
1251  /*
1252  * - LGPL
1253  *
1254  * row
1255  *
1256  */
1257
1258 /**
1259  * @class Roo.bootstrap.Navbar
1260  * @extends Roo.bootstrap.Component
1261  * Bootstrap Navbar class
1262  * @cfg {Boolean} sidebar has side bar
1263  * @cfg {Boolean} bar is a bar?
1264  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
1265  * @cfg {String} brand what is brand
1266  * @cfg {Boolean} inverse is inverted color
1267  * @cfg {String} type (nav|pills|tabs)
1268  * @cfg {Boolean} arrangement stacked|justified
1269  * @cfg {String} align (left|right) alignment
1270
1271
1272  * @constructor
1273  * Create a new Navbar
1274  * @param {Object} config The config object
1275  */
1276
1277
1278 Roo.bootstrap.Navbar = function(config){
1279     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
1280 };
1281
1282 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
1283
1284     sidebar: false,
1285
1286     bar: false,
1287     brand: '',
1288     inverse: false,
1289     position: '',
1290     align : false,
1291     type: 'nav',
1292     arrangement: '',
1293
1294     getAutoCreate : function(){
1295         var cfg = {
1296             cls : 'navbar'
1297         };
1298
1299         if (this.sidebar === true) {
1300             cfg = {
1301                 tag: 'div',
1302                 cls: 'sidebar-nav'
1303             };
1304             return cfg;
1305         }
1306
1307         if (this.bar === true) {
1308             cfg = {
1309                 tag: 'nav',
1310                 cls: 'navbar',
1311                 role: 'navigation',
1312                 cn: [
1313                     {
1314                         tag: 'div',
1315                         cls: 'navbar-header',
1316                         cn: [
1317                             {
1318                             tag: 'button',
1319                             type: 'button',
1320                             cls: 'navbar-toggle',
1321                             'data-toggle': 'collapse',
1322                             cn: [
1323                                 {
1324                                     tag: 'span',
1325                                     cls: 'sr-only',
1326                                     html: 'Toggle navigation'
1327                                 },
1328                                 {
1329                                     tag: 'span',
1330                                     cls: 'icon-bar'
1331                                 },
1332                                 {
1333                                     tag: 'span',
1334                                     cls: 'icon-bar'
1335                                 },
1336                                 {
1337                                     tag: 'span',
1338                                     cls: 'icon-bar'
1339                                 }
1340                             ]
1341                             }
1342                         ]
1343                     },
1344                     {
1345                     tag: 'div',
1346                     cls: 'collapse navbar-collapse'
1347                     }
1348                 ]
1349             };
1350
1351             cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
1352
1353             if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
1354             cfg.cls += ' navbar-' + this.position;
1355             cfg.tag = this.position  == 'fixed-bottom' ? 'footer' : 'header';
1356             }
1357
1358             if (this.brand !== '') {
1359                 cfg.cn[0].cn.push({
1360                     tag: 'a',
1361                     href: '#',
1362                     cls: 'navbar-brand',
1363                     cn: [
1364                     this.brand
1365                     ]
1366                 });
1367             }
1368
1369             return cfg;
1370
1371         } else if (this.bar === false) {
1372
1373         } else {
1374             Roo.log('Property \'bar\' in of Navbar must be either true or false')
1375         }
1376
1377         cfg.cn = [
1378             {
1379                 cls: 'nav',
1380                 tag : 'ul'
1381             }
1382         ];
1383
1384         if (['tabs','pills'].indexOf(this.type)!==-1) {
1385             cfg.cn[0].cls += ' nav-' + this.type
1386         } else {
1387             if (this.type!=='nav') {
1388             Roo.log('nav type must be nav/tabs/pills')
1389             }
1390             cfg.cn[0].cls += ' navbar-nav'
1391         }
1392
1393         if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
1394             cfg.cn[0].cls += ' nav-' + this.arrangement;
1395         }
1396
1397         if (this.align === 'right') {
1398             cfg.cn[0].cls += ' navbar-right';
1399         }
1400         if (this.inverse) {
1401             cfg.cls += ' navbar-inverse';
1402
1403         }
1404         /* type: nav | tabs | pills
1405          * arrangement: stacked | justified
1406          * position: fixed/static etc
1407          * inverse: true/false
1408          */
1409
1410
1411         return cfg;
1412     },
1413
1414     getChildContainer : function() {
1415         if (this.bar === true) {
1416             return this.el.select('.collapse',true).first();
1417         }
1418         console.log(this);
1419         return this.el;
1420     }
1421
1422 });
1423
1424
1425
1426  /*
1427  * - LGPL
1428  *
1429  * row
1430  *
1431  */
1432 Roo.bootstrap.NavGroup = function(config){
1433     Roo.bootstrap.NavGroup.superclass.constructor.call(this, config);
1434 };
1435
1436 Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component,  {
1437
1438     align: '',
1439
1440     getAutoCreate : function(){
1441         var cfg = Roo.apply({}, Roo.bootstrap.NavGroup.superclass.getAutoCreate.call(this));
1442
1443         cfg = {
1444             tag : 'ul',
1445             cls: 'nav navbar-nav'
1446         }
1447
1448         if (this.parent().sidebar === true) {
1449             cfg = {
1450                 tag: 'ul',
1451                 cls: 'dashboard-menu'
1452             }
1453
1454             return cfg;
1455         }
1456
1457
1458         if (this.align === 'right') {
1459             cfg.cls += ' navbar-right';
1460         }
1461
1462         if (this.inverse) {
1463             cfg.cls += ' navbar-inverse';
1464
1465         }
1466         /* type: nav | tabs | pills
1467          * arrangement: stacked | justified
1468          * position: fixed/static etc
1469          * inverse: true/false
1470          */
1471
1472
1473         return cfg;
1474     }
1475
1476 });
1477
1478
1479
1480  /*
1481  * - LGPL
1482  *
1483  * row
1484  *
1485  */
1486 /**
1487  * @class Roo.bootstrap.Navbar.Button
1488  * @extends Roo.bootstrap.Component
1489  * Bootstrap Navbar.Button class
1490  * @cfg {String} href  link to
1491  * @cfg {String} html content of button
1492
1493  * @constructor
1494  * Create a new Navbar Button
1495  * @param {Object} config The config object
1496  */
1497
1498
1499 Roo.bootstrap.Navbar.Button = function(config){
1500     Roo.bootstrap.Navbar.Button.superclass.constructor.call(this, config);
1501 };
1502
1503 Roo.extend(Roo.bootstrap.Navbar.Button, Roo.bootstrap.Component,  {
1504
1505     href : false,
1506     html : false,
1507
1508     autoCreate : {
1509         cls: 'btn',
1510         tag : 'button',
1511         html: 'hello'
1512     },
1513
1514     getAutoCreate : function(){
1515
1516         var cfg = {
1517             cls: 'btn',
1518             tag : 'button',
1519             html: 'hello',
1520             cn : []
1521
1522         } ;
1523         cfg.cn.push({
1524             html : this.html || ''
1525             //href : this.
1526              //       )
1527         });
1528         cfg.cn.push({
1529             tag: 'span',
1530             cls : 'carat'
1531         });
1532
1533         return cfg;
1534     }
1535
1536 });
1537
1538
1539
1540  /*
1541  * - LGPL
1542  *
1543  * row
1544  *
1545  */
1546
1547 /**
1548  * @class Roo.bootstrap.Navbar.Item
1549  * @extends Roo.bootstrap.Component
1550  * Bootstrap Navbar.Button class
1551  * @cfg {String} href  link to
1552  * @cfg {String} html content of button
1553  * @cfg {String} badge text inside badge
1554  * @cfg {String} glyphicon name of glyphicon
1555
1556  * @constructor
1557  * Create a new Navbar Button
1558  * @param {Object} config The config object
1559  */
1560 Roo.bootstrap.Navbar.Item = function(config){
1561     Roo.bootstrap.Navbar.Item.superclass.constructor.call(this, config);
1562 };
1563
1564 Roo.extend(Roo.bootstrap.Navbar.Item, Roo.bootstrap.Component,  {
1565
1566     href: false,
1567     html: '',
1568     badge: '',
1569     icon: false,
1570     glyphicon: false,
1571
1572     getAutoCreate : function(){
1573
1574         var cfg = Roo.apply({}, Roo.bootstrap.Navbar.Item.superclass.getAutoCreate.call(this));
1575
1576         if (this.parent().parent().sidebar === true) {
1577             cfg = {
1578                 tag: 'li',
1579                 cls: '',
1580                 cn: [
1581                     {
1582                         tag: 'p',
1583                         cls: ''
1584                     }
1585                 ]
1586             }
1587
1588             if (this.html) {
1589                 cfg.cn[0].html = this.html;
1590             }
1591
1592             if (this.active) {
1593                 this.cls += ' active';
1594             }
1595
1596             if (this.menu) {
1597                 cfg.cn[0].cls += ' dropdown-toggle';
1598                 cfg.cn[0].html = (cfg.cn[0].html || this.html) + '<span class="glyphicon glyphicon-chevron-down"></span>';
1599             }
1600
1601             if (this.href) {
1602                 cfg.cn[0].tag = 'a',
1603                 cfg.cn[0].href = this.href;
1604             }
1605
1606             if (this.glyphicon) {
1607                 cfg.cn[0].html = '<i class="glyphicon glyphicon-'+this.glyphicon+'"></i><span>' + cfg.cn[0].html || this.html + '</span>'
1608             }
1609
1610             return cfg;
1611         }
1612
1613         cfg = {
1614             tag: 'li'
1615         }
1616         cfg.cn = [
1617             {
1618                 tag: 'p',
1619                 html: 'Text'
1620             }
1621         ];
1622
1623         if (this.glyphicon) {
1624             if(cfg.html){cfg.html = ' ' + this.html};
1625             cfg.cn=[
1626                 {
1627                     tag: 'span',
1628                     cls: 'glyphicon glyphicon-' + this.glyphicon
1629                 }
1630             ];
1631         }
1632
1633         cfg.cn[0].html = this.html || cfg.cn[0].html ;
1634         if (this.menu) {
1635             cfg.cn[0].tag='a';
1636             cfg.cn[0].href='#';
1637             cfg.cn[0].html += " <span class='caret'></span>";
1638         //}else if (!this.href) {
1639         //    cfg.cn[0].tag='p';
1640         //    cfg.cn[0].cls='navbar-text';
1641         } else {
1642             cfg.cn[0].tag='a';
1643             cfg.cn[0].href=this.href||'#';
1644             cfg.cn[0].html=this.html;
1645         }
1646
1647         if (this.badge !== '') {
1648
1649             cfg.cn[0].cn=[
1650                 cfg.cn[0].html + ' ',
1651                 {
1652                     tag: 'span',
1653                     cls: 'badge',
1654                     html: this.badge
1655                 }
1656             ];
1657             cfg.cn[0].html=''
1658         }
1659
1660
1661         return cfg;
1662     },
1663     initEvents: function() {
1664        // Roo.log('init events?');
1665        // Roo.log(this.el.dom);
1666         this.el.select('a',true).on('click',
1667                 function(e) {
1668                     this.fireEvent('click', this);
1669                 },
1670                 this
1671         );
1672     }
1673
1674 });
1675
1676
1677  /*
1678  * - LGPL
1679  *
1680  * row
1681  *
1682  */
1683
1684 /**
1685  * @class Roo.bootstrap.Row
1686  * @extends Roo.bootstrap.Component
1687  * Bootstrap Row class (contains columns...)
1688  *
1689  * @constructor
1690  * Create a new Row
1691  * @param {Object} config The config object
1692  */
1693
1694 Roo.bootstrap.Row = function(config){
1695     Roo.bootstrap.Row.superclass.constructor.call(this, config);
1696 };
1697
1698 Roo.extend(Roo.bootstrap.Row, Roo.bootstrap.Component,  {
1699
1700         autoCreate : {
1701         cls: 'row clearfix'
1702     }
1703
1704
1705 });
1706
1707
1708
1709  /*
1710  * - LGPL
1711  *
1712  * column
1713  *
1714  */
1715
1716 /**
1717  * @class Roo.bootstrap.Column
1718  * @extends Roo.bootstrap.Component
1719  * Bootstrap Column class
1720  * @cfg {number} colspan  Number of columsn to span
1721  *
1722  * @constructor
1723  * Create a new Column
1724  * @param {Object} config The config object
1725  */
1726
1727 Roo.bootstrap.Element = function(config){
1728     Roo.bootstrap.Element.superclass.constructor.call(this, config);
1729 };
1730
1731 Roo.extend(Roo.bootstrap.Element, Roo.bootstrap.Component,  {
1732
1733     tag: 'div',
1734     cls: '',
1735     html: '',
1736
1737
1738
1739     getAutoCreate : function(){
1740         var cfg = Roo.apply({}, Roo.bootstrap.Element.superclass.getAutoCreate.call(this));
1741
1742         cfg = {
1743             tag: this.tag,
1744             cls: '',
1745             html: this.html
1746         }
1747
1748         return cfg;
1749     }
1750
1751 });
1752
1753
1754
1755  /*
1756  * - LGPL
1757  *
1758  * column
1759  *
1760  */
1761
1762 /**
1763  * @class Roo.bootstrap.Column
1764  * @extends Roo.bootstrap.Component
1765  * Bootstrap Column class
1766  * @cfg {number} colspan  Number of columsn to span
1767  *
1768  * @constructor
1769  * Create a new Column
1770  * @param {Object} config The config object
1771  */
1772
1773 Roo.bootstrap.Pagination = function(config){
1774     Roo.bootstrap.Pagination.superclass.constructor.call(this, config);
1775 };
1776
1777 Roo.extend(Roo.bootstrap.Pagination, Roo.bootstrap.Component,  {
1778
1779     html: false,
1780     cls: false,
1781     size: false,
1782     inverse: false,
1783     from: 1,
1784     to: 4,
1785     align: false,
1786     active: 1,
1787
1788     getAutoCreate : function(){
1789         cfg = {
1790             tag: 'ul',
1791                 cls: 'pagination',
1792                 cn: []
1793         };
1794         if (this.inverse) {
1795             cfg.cls += ' inverse';
1796         }
1797         if (this.html) {
1798             cfg.html=this.html;
1799         }
1800         if (this.cls) {
1801             cfg.cls=this.cls;
1802         }
1803         cfg.cn[0]={
1804             tag: 'li',
1805             cn: [
1806                 {
1807                     tag: 'a',
1808                     href:'#',
1809                     html: '&laquo;'
1810                 }
1811             ]
1812         };
1813         var from=this.from>0?this.from:1;
1814         var to=this.to-from<=10?this.to:from+10;
1815         var active=this.active>=from&&this.active<=to?this.active:null;
1816         for (var i=from;i<=to;i++) {
1817             cfg.cn.push(
1818                 {
1819                     tag: 'li',
1820                     cls: active===i?'active':'',
1821                     cn: [
1822                         {
1823                             tag: 'a',
1824                             href: '#',
1825                             html: i
1826                         }
1827                     ]
1828                 }
1829             );
1830         }
1831
1832         cfg.cn.push(
1833             {
1834                 tag: 'li',
1835                 cn: [
1836                     {
1837                        tag: 'a',
1838                        href: '#',
1839                        html: '&raquo;'
1840                     }
1841                 ]
1842             }
1843         );
1844
1845         return cfg;
1846     }
1847
1848 });
1849
1850
1851
1852  /*
1853  * - LGPL
1854  *
1855  * page container.
1856  *
1857  */
1858
1859
1860 /**
1861  * @class Roo.bootstrap.Container
1862  * @extends Roo.bootstrap.Component
1863  * Bootstrap Container class
1864  * @cfg {Boolean} jumbotron is it a jubmotron element
1865  * @cfg {String} html content of element
1866  *
1867  * @constructor
1868  * Create a new Container
1869  * @param {Object} config The config object
1870  */
1871
1872 Roo.bootstrap.Slider = function(config){
1873     Roo.bootstrap.Slider.superclass.constructor.call(this, config);
1874 };
1875
1876 Roo.extend(Roo.bootstrap.Slider, Roo.bootstrap.Component,  {
1877
1878     getAutoCreate : function(){
1879
1880         var cfg = {
1881             tag: 'div',
1882             cls: 'slider slider-sample1 vertical-handler ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all',
1883             cn: [
1884                 {
1885                     tag: 'a',
1886                     cls: 'ui-slider-handle ui-state-default ui-corner-all'
1887                 }
1888             ]
1889         }
1890
1891         return cfg;
1892     }
1893
1894 });
1895
1896  /*
1897  * - LGPL
1898  *
1899  * column
1900  *
1901  */
1902
1903 /**
1904  * @class Roo.bootstrap.Column
1905  * @extends Roo.bootstrap.Component
1906  * Bootstrap Column class
1907  * @cfg {number} colspan  Number of columsn to span
1908  *
1909  * @constructor
1910  * Create a new Column
1911  * @param {Object} config The config object
1912  */
1913
1914 Roo.bootstrap.Table = function(config){
1915     Roo.bootstrap.Table.superclass.constructor.call(this, config);
1916 };
1917
1918 Roo.extend(Roo.bootstrap.Table, Roo.bootstrap.Component,  {
1919
1920     html: false,
1921     cls: false,
1922
1923     getAutoCreate : function(){
1924         var cfg = Roo.apply({}, Roo.bootstrap.Table.superclass.getAutoCreate.call(this));
1925
1926         cfg = {
1927             tag: 'table',
1928             cn: [
1929                 {
1930                     tag: 'tbody'
1931                 }
1932             ]
1933         }
1934         if (this.html) {
1935             cfg.html=this.html
1936         }
1937         if (this.cls) {
1938             cfg.cls=this.cls
1939         }
1940
1941         return cfg;
1942     }
1943
1944 });
1945
1946
1947
1948  /*
1949  * - LGPL
1950  *
1951  * column
1952  *
1953  */
1954
1955 /**
1956  * @class Roo.bootstrap.Column
1957  * @extends Roo.bootstrap.Component
1958  * Bootstrap Column class
1959  * @cfg {number} colspan  Number of columsn to span
1960  *
1961  * @constructor
1962  * Create a new Column
1963  * @param {Object} config The config object
1964  */
1965
1966 Roo.bootstrap.TableCell = function(config){
1967     Roo.bootstrap.TableCell.superclass.constructor.call(this, config);
1968 };
1969
1970 Roo.extend(Roo.bootstrap.TableCell, Roo.bootstrap.Component,  {
1971
1972     getAutoCreate : function(){
1973         var cfg = Roo.apply({}, Roo.bootstrap.TableCell.superclass.getAutoCreate.call(this));
1974
1975         cfg = {
1976             tag: 'td'
1977         }
1978         if (this.html) {
1979             cfg.html=this.html
1980         }
1981         if (this.cls) {
1982             cfg.cls=this.cls
1983         }
1984
1985         return cfg;
1986     }
1987
1988 });
1989
1990
1991
1992  /*
1993  * - LGPL
1994  *
1995  * column
1996  *
1997  */
1998
1999 /**
2000  * @class Roo.bootstrap.Column
2001  * @extends Roo.bootstrap.Component
2002  * Bootstrap Column class
2003  * @cfg {number} colspan  Number of columsn to span
2004  *
2005  * @constructor
2006  * Create a new Column
2007  * @param {Object} config The config object
2008  */
2009
2010 Roo.bootstrap.TableRow = function(config){
2011     Roo.bootstrap.TableRow.superclass.constructor.call(this, config);
2012 };
2013
2014 Roo.extend(Roo.bootstrap.TableRow, Roo.bootstrap.Component,  {
2015
2016     getAutoCreate : function(){
2017         var cfg = Roo.apply({}, Roo.bootstrap.TableRow.superclass.getAutoCreate.call(this));
2018
2019         cfg = {
2020             tag: 'tr'
2021         }
2022
2023         return cfg;
2024     }
2025
2026 });
2027
2028
2029
2030