git.roojs.org Git - roojs1/blob - Roo/bootstrap/Container.js

   1 /*
   2  * - LGPL
   3  *
   4  * page container.
   5  *
   6  */
   7
   8
   9 /**
  10  * @class Roo.bootstrap.Container
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap Container class
  13  * @cfg {Boolean} jumbotron is it a jumbotron element
  14  * @cfg {String} html content of element
  15  * @cfg {String} well (lg|sm|md) a well, large, small or medium.
  16  * @cfg {String} panel (primary|success|info|warning|danger) render as a panel.
  17  * @cfg {String} header content of header (for panel)
  18  * @cfg {String} footer content of footer (for panel)
  19  * @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
  20  * @cfg {String} tag (header|aside|section) type of HTML tag.
  21  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
  22  * @cfg {String} fa (ban|check|...) font awesome icon
  23  * @cfg {String} icon (info-sign|check|...) glyphicon name
  24  * @cfg {Boolean} hidden (true|false) hide the element
  25
  26  *
  27  * @constructor
  28  * Create a new Container
  29  * @param {Object} config The config object
  30  */
  31
  32 Roo.bootstrap.Container = function(config){
  33     Roo.bootstrap.Container.superclass.constructor.call(this, config);
  34 };
  35
  36 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
  37
  38     jumbotron : false,
  39     well: '',
  40     panel : '',
  41     header: '',
  42     footer : '',
  43     sticky: '',
  44     tag : false,
  45     alert : false,
  46     fa: false,
  47     icon : false,
  48
  49
  50     getChildContainer : function() {
  51
  52         if(!this.el){
  53             return false;
  54         }
  55
  56         if (this.panel.length) {
  57             return this.el.select('.panel-body',true).first();
  58         }
  59
  60         return this.el;
  61     },
  62
  63
  64     getAutoCreate : function(){
  65
  66         var cfg = {
  67             tag : this.tag || 'div',
  68             html : '',
  69             cls : ''
  70         };
  71         if (this.jumbotron) {
  72             cfg.cls = 'jumbotron';
  73         }
  74
  75
  76
  77         // - this is applied by the parent..
  78         //if (this.cls) {
  79         //    cfg.cls = this.cls + '';
  80         //}
  81
  82         if (this.sticky.length) {
  83
  84             var bd = Roo.get(document.body);
  85             if (!bd.hasClass('bootstrap-sticky')) {
  86                 bd.addClass('bootstrap-sticky');
  87                 Roo.select('html',true).setStyle('height', '100%');
  88             }
  89
  90             cfg.cls += 'bootstrap-sticky-' + this.sticky;
  91         }
  92
  93
  94         if (this.well.length) {
  95             switch (this.well) {
  96                 case 'lg':
  97                 case 'sm':
  98                     cfg.cls +=' well well-' +this.well;
  99                     break;
 100                 default:
 101                     cfg.cls +=' well';
 102                     break;
 103             }
 104         }
 105
 106         if (this.hidden) {
 107             cfg.cls += ' hidden';
 108         }
 109
 110
 111         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
 112             cfg.cls +=' alert alert-' + this.alert;
 113         }
 114
 115         var body = cfg;
 116
 117         if (this.panel.length) {
 118             cfg.cls += ' panel panel-' + this.panel;
 119             cfg.cn = [];
 120             if (this.header.length) {
 121                 cfg.cn.push({
 122
 123                     cls : 'panel-heading',
 124                     cn : [{
 125                         tag: 'h3',
 126                         cls : 'panel-title',
 127                         html : this.header
 128                     }]
 129
 130                 });
 131             }
 132             body = false;
 133             cfg.cn.push({
 134                 cls : 'panel-body',
 135                 html : this.html
 136             });
 137
 138
 139             if (this.footer.length) {
 140                 cfg.cn.push({
 141                     cls : 'panel-footer',
 142                     html : this.footer
 143
 144                 });
 145             }
 146
 147         }
 148
 149         if (body) {
 150             body.html = this.html || cfg.html;
 151             // prefix with the icons..
 152             if (this.fa) {
 153                 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
 154             }
 155             if (this.icon) {
 156                 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
 157             }
 158
 159
 160         }
 161         if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
 162             cfg.cls =  'container';
 163         }
 164
 165         return cfg;
 166     },
 167
 168     titleEl : function()
 169     {
 170         if(!this.el || !this.panel.length || !this.header.length){
 171             return;
 172         }
 173
 174         return this.el.select('.panel-title',true).first();
 175     },
 176
 177     setTitle : function(v)
 178     {
 179         var titleEl = this.titleEl();
 180
 181         if(!titleEl){
 182             return;
 183         }
 184
 185         titleEl.dom.innerHTML = v;
 186     },
 187
 188     getTitle : function()
 189     {
 190
 191         var titleEl = this.titleEl();
 192
 193         if(!titleEl){
 194             return '';
 195         }
 196
 197         return titleEl.dom.innerHTML;
 198     }
 199
 200
 201
 202 });
 203
 204