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

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