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

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