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  *
  21  * @constructor
  22  * Create a new Container
  23  * @param {Object} config The config object
  24  */
  25
  26 Roo.bootstrap.Container = function(config){
  27     Roo.bootstrap.Container.superclass.constructor.call(this, config);
  28 };
  29
  30 Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
  31
  32     jumbotron : false,
  33     well: '',
  34     panel : '',
  35     header: '',
  36     footer : '',
  37     sticky: '',
  38
  39
  40     getChildContainer : function() {
  41         if (this.panel.length) {
  42             return this.el.select('.panel-body',true).first();
  43         }
  44
  45         return this.el;
  46     },
  47
  48
  49     getAutoCreate : function(){
  50
  51         var cfg = {
  52             html : '',
  53             cls : ''
  54         };
  55         if (this.jumbotron) {
  56             cfg.cls = 'jumbotron';
  57         }
  58         if (this.cls) {
  59             cfg.cls = this.cls + '';
  60         }
  61
  62         if (this.sticky.length) {
  63             var bd = Roo.get(document.body)
  64             if (!bd.hasClass('bootstrap-sticky')) {
  65                 bd.addClass('bootstrap-sticky');
  66                 Roo.select('html',true).setStyle('height', '100%');
  67             }
  68
  69             cfg.cls += 'bootstrap-sticky-' + this.sticky;
  70         }
  71
  72
  73         if (this.well.length) {
  74             switch (this.well) {
  75                 case 'lg':
  76                 case 'sm':
  77                     cfg.cls +=' well well-' +this.well;
  78                     break;
  79                 default:
  80                     cfg.cls +=' well';
  81                     break;
  82             }
  83         }
  84
  85         var body = cfg;
  86
  87         if (this.panel.length) {
  88             cfg.cls += 'panel panel-' + this.panel;
  89             cfg.cn = [];
  90             if (this.header.length) {
  91                 cfg.cn.push({
  92
  93                     cls : 'panel-heading',
  94                     cn : [{
  95                         tag: 'h3',
  96                         cls : 'panel-title',
  97                         html : this.header
  98                     }]
  99
 100                 });
 101             }
 102             body = false;
 103             cfg.cn.push({
 104                 cls : 'panel-body',
 105                 html : this.html
 106             });
 107
 108
 109             if (this.footer.length) {
 110                 cfg.cn.push({
 111                     cls : 'panel-footer',
 112                     html : this.footer
 113
 114                 });
 115             }
 116
 117         }
 118         if (body) {
 119             body.html = this.html || cfg.html;
 120         }
 121         if (!cfg.cls.length) {
 122             cfg.cls =  'container';
 123         }
 124
 125         return cfg;
 126     }
 127
 128 });
 129
 130