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 {Number} xsoff colspan offset out of 12 for mobile-sized screens or 0 for hidden
  17  * @cfg {Number} smoff colspan offset out of 12 for tablet-sized screens or 0 for hidden
  18  * @cfg {Number} mdoff colspan offset out of 12 for computer-sized screens or 0 for hidden
  19  * @cfg {Number} lgoff colspan offset out of 12 for large computer-sized screens or 0 for hidden
  20  *
  21  *
  22  * @cfg {Boolean} hidden (true|false) hide the element
  23  * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
  24  * @cfg {String} fa (ban|check|...) font awesome icon
  25  * @cfg {Number} fasize (1|2|....) font awsome size
  26
  27  * @cfg {String} icon (info-sign|check|...) glyphicon name
  28
  29  * @cfg {String} html content of column.
  30  *
  31  * @constructor
  32  * Create a new Column
  33  * @param {Object} config The config object
  34  */
  35
  36 Roo.bootstrap.Column = function(config){
  37     Roo.bootstrap.Column.superclass.constructor.call(this, config);
  38 };
  39
  40 Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
  41
  42     xs: false,
  43     sm: false,
  44     md: false,
  45     lg: false,
  46     xsoff: false,
  47     smoff: false,
  48     mdoff: false,
  49     lgoff: false,
  50     html: '',
  51     offset: 0,
  52     alert: false,
  53     fa: false,
  54     icon : false,
  55     hidden : false,
  56     fasize : 1,
  57
  58     getAutoCreate : function(){
  59         var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
  60         Roo.log('column html');
  61
  62         Roo.log(this.html);
  63         cfg = {
  64             tag: 'div',
  65             cls: 'column'
  66             html : this.html || ''
  67         };
  68
  69         var settings=this;
  70         ['xs','sm','md','lg'].map(function(size){
  71             //Roo.log( size + ':' + settings[size]);
  72
  73             if (settings[size+'off'] !== false) {
  74                 cfg.cls += ' col-' + size + '-offset-' + settings[size+'off'] ;
  75             }
  76
  77             if (settings[size] === false) {
  78                 return;
  79             }
  80             Roo.log(settings[size]);
  81             if (!settings[size]) { // 0 = hidden
  82                 cfg.cls += ' hidden-' + size;
  83                 return;
  84             }
  85             cfg.cls += ' col-' + size + '-' + settings[size];
  86
  87         });
  88
  89         if (this.hidden) {
  90             cfg.cls += ' hidden';
  91         }
  92
  93         if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
  94             cfg.cls +=' alert alert-' + this.alert;
  95         }
  96
  97
  98 //        if (this.html.length) {
  99 //            cfg.html = this.html;
 100 //        }
 101
 102         if (this.fa) {
 103             var fasize = '';
 104             if (this.fasize > 1) {
 105                 fasize = ' fa-' + this.fasize + 'x';
 106             }
 107             cfg.html = '<i class="fa fa-'+this.fa + fasize + '"></i>' + (cfg.html || '');
 108
 109
 110         }
 111         if (this.icon) {
 112             cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' +  (cfg.html || '');
 113         }
 114
 115         return cfg;
 116     }
 117
 118 });
 119
 120
 121
 122