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

   1 /*
   2  * - LGPL
   3  *
   4  * column
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.Column
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap Column class
  12  * @cfg {Number} xs colspan out of 12 for mobile-sized screens or 0 for hidden
  13  * @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
  14  * @cfg {Number} md colspan out of 12 for computer-sized screens or 0 for hidden
  15  * @cfg {Number} lg colspan out of 12 for large computer-sized screens or 0 for hidden
  16  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
  17  * @cfg {String} fa (ban|check|...) font awesome icon
  18  * @cfg {String} icon (info-sign|check|...) glyphicon name
  19
  20  * @cfg {String} html content of column.
  21  *
  22  * @constructor
  23  * Create a new Column
  24  * @param {Object} config The config object
  25  */
  26
  27 Roo.bootstrap.Column = function(config){
  28     Roo.bootstrap.Column.superclass.constructor.call(this, config);
  29 };
  30
  31 Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
  32
  33     xs: false,
  34     sm: false,
  35     md: false,
  36     lg: false,
  37     html: '',
  38     offset: 0,
  39     alert: false,
  40     fa: false,
  41     icon : false,
  42
  43     getAutoCreate : function(){
  44         var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
  45
  46         cfg = {
  47             tag: 'div',
  48             cls: 'column'
  49         };
  50
  51         var settings=this;
  52         ['xs','sm','md','lg'].map(function(size){
  53             Roo.log( size + ':' + settings[size]);
  54             if (settings[size] === false) {
  55                 return;
  56             }
  57             Roo.log(settings[size]);
  58             if (!settings[size]) { // 0 = hidden
  59                 cfg.cls += ' hidden-' + size;
  60                 return;
  61             }
  62             cfg.cls += ' col-' + size + '-' + settings[size];
  63
  64         });
  65
  66         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
  67             cfg.cls +=' alert alert-' + this.alert;
  68         }
  69
  70
  71         if (this.html.length) {
  72             cfg.html = this.html;
  73         }
  74         if (this.fa) {
  75             cfg.html = '<i class="fa fa-'+this.fa + '"></i>' + (cfg.html || '');
  76         }
  77         if (this.icon) {
  78             cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + + (cfg.html || '')
  79         }
  80
  81         return cfg;
  82     }
  83
  84 });
  85
  86
  87
  88