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  * @cfg {Boolean} expandable (true|false) default false
  26  * @cfg {String} rheader contet on the right of header
  27
  28  *
  29  * @constructor
  30  * Create a new Container
  31  * @param {Object} config The config object
  32  */
  33
  34 Roo.bootstrap.Container = function(config){
  35     Roo.bootstrap.Container.superclass.constructor.call(this, config);
  36 };
  37
  38 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
  39
  40     jumbotron : false,
  41     well: '',
  42     panel : '',
  43     header: '',
  44     footer : '',
  45     sticky: '',
  46     tag : false,
  47     alert : false,
  48     fa: false,
  49     icon : false,
  50     expandable : false,
  51
  52
  53     getChildContainer : function() {
  54
  55         if(!this.el){
  56             return false;
  57         }
  58
  59         if (this.panel.length) {
  60             return this.el.select('.panel-body',true).first();
  61         }
  62
  63         return this.el;
  64     },
  65
  66
  67     getAutoCreate : function(){
  68
  69         var cfg = {
  70             tag : this.tag || 'div',
  71             html : '',
  72             cls : ''
  73         };
  74         if (this.jumbotron) {
  75             cfg.cls = 'jumbotron';
  76         }
  77
  78
  79
  80         // - this is applied by the parent..
  81         //if (this.cls) {
  82         //    cfg.cls = this.cls + '';
  83         //}
  84
  85         if (this.sticky.length) {
  86
  87             var bd = Roo.get(document.body);
  88             if (!bd.hasClass('bootstrap-sticky')) {
  89                 bd.addClass('bootstrap-sticky');
  90                 Roo.select('html',true).setStyle('height', '100%');
  91             }
  92
  93             cfg.cls += 'bootstrap-sticky-' + this.sticky;
  94         }
  95
  96
  97         if (this.well.length) {
  98             switch (this.well) {
  99                 case 'lg':
 100                 case 'sm':
 101                     cfg.cls +=' well well-' +this.well;
 102                     break;
 103                 default:
 104                     cfg.cls +=' well';
 105                     break;
 106             }
 107         }
 108
 109         if (this.hidden) {
 110             cfg.cls += ' hidden';
 111         }
 112
 113
 114         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
 115             cfg.cls +=' alert alert-' + this.alert;
 116         }
 117
 118         var body = cfg;
 119
 120         if (this.panel.length) {
 121             cfg.cls += ' panel panel-' + this.panel;
 122             cfg.cn = [];
 123             if (this.header.length) {
 124                 cfg.cn.push({
 125
 126                     cls : 'panel-heading',
 127                     cn : []
 128                 });
 129
 130                 if(this.expandable){
 131                     cfg.cn.cn.push({
 132                         tag: 'i',
 133                         cls: 'fa fa-minus'
 134                     });
 135                 }
 136
 137                 cfg.cn.cn.push({
 138                     tag: 'h3',
 139                     cls : 'panel-title',
 140                     html : this.header
 141                 });
 142
 143             }
 144
 145             body = false;
 146             cfg.cn.push({
 147                 cls : 'panel-body',
 148                 html : this.html
 149             });
 150
 151
 152             if (this.footer.length) {
 153                 cfg.cn.push({
 154                     cls : 'panel-footer',
 155                     html : this.footer
 156
 157                 });
 158             }
 159
 160         }
 161
 162         if (body) {
 163             body.html = this.html || cfg.html;
 164             // prefix with the icons..
 165             if (this.fa) {
 166                 body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
 167             }
 168             if (this.icon) {
 169                 body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
 170             }
 171
 172
 173         }
 174         if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
 175             cfg.cls =  'container';
 176         }
 177
 178         return cfg;
 179     },
 180
 181     titleEl : function()
 182     {
 183         if(!this.el || !this.panel.length || !this.header.length){
 184             return;
 185         }
 186
 187         return this.el.select('.panel-title',true).first();
 188     },
 189
 190     setTitle : function(v)
 191     {
 192         var titleEl = this.titleEl();
 193
 194         if(!titleEl){
 195             return;
 196         }
 197
 198         titleEl.dom.innerHTML = v;
 199     },
 200
 201     getTitle : function()
 202     {
 203
 204         var titleEl = this.titleEl();
 205
 206         if(!titleEl){
 207             return '';
 208         }
 209
 210         return titleEl.dom.innerHTML;
 211     }
 212
 213
 214
 215 });
 216
 217