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

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