src/widgets/list/Column.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.list.Column
   9  * <p>This class encapsulates column configuration data to be used in the initialization of a
  10  * {@link Ext.list.ListView ListView}.</p>
  11  * <p>While subclasses are provided to render data in different ways, this class renders a passed
  12  * data field unchanged and is usually used for textual columns.</p>
  13  */
  14 Ext.list.Column = Ext.extend(Object, {
  15     /**
  16      * @private
  17      * @cfg {Boolean} isColumn
  18      * Used by ListView constructor method to avoid reprocessing a Column
  19      * if <code>isColumn</code> is not set ListView will recreate a new Ext.list.Column
  20      * Defaults to true.
  21      */
  22     isColumn: true,
  23
  24     /**
  25      * @cfg {String} align
  26      * Set the CSS text-align property of the column. Defaults to <tt>'left'</tt>.
  27      */
  28     align: 'left',
  29     /**
  30      * @cfg {String} header Optional. The header text to be used as innerHTML
  31      * (html tags are accepted) to display in the ListView.  <b>Note</b>: to
  32      * have a clickable header with no text displayed use <tt>'&#160;'</tt>.
  33      */
  34     header: '',
  35
  36     /**
  37      * @cfg {Number} width Optional. Percentage of the container width
  38      * this column should be allocated.  Columns that have no width specified will be
  39      * allocated with an equal percentage to fill 100% of the container width.  To easily take
  40      * advantage of the full container width, leave the width of at least one column undefined.
  41      * Note that if you do not want to take up the full width of the container, the width of
  42      * every column needs to be explicitly defined.
  43      */
  44     width: null,
  45
  46     /**
  47      * @cfg {String} cls Optional. This option can be used to add a CSS class to the cell of each
  48      * row for this column.
  49      */
  50     cls: '',
  51
  52     /**
  53      * @cfg {String} tpl Optional. Specify a string to pass as the
  54      * configuration string for {@link Ext.XTemplate}.  By default an {@link Ext.XTemplate}
  55      * will be implicitly created using the <tt>dataIndex</tt>.
  56      */
  57
  58     /**
  59      * @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the
  60      * ListViews's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
  61      * which to draw the column's value.</p>
  62      */
  63
  64     constructor : function(c){
  65         if(!c.tpl){
  66             c.tpl = new Ext.XTemplate('{' + c.dataIndex + '}');
  67         }
  68         else if(Ext.isString(c.tpl)){
  69             c.tpl = new Ext.XTemplate(c.tpl);
  70         }
  71
  72         Ext.apply(this, c);
  73     }
  74 });
  75
  76 Ext.reg('lvcolumn', Ext.list.Column);
  77
  78 /**
  79  * @class Ext.list.NumberColumn
  80  * @extends Ext.list.Column
  81  * <p>A Column definition class which renders a numeric data field according to a {@link #format} string.  See the
  82  * {@link Ext.list.Column#xtype xtype} config option of {@link Ext.list.Column} for more details.</p>
  83  */
  84 Ext.list.NumberColumn = Ext.extend(Ext.list.Column, {
  85     /**
  86      * @cfg {String} format
  87      * A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
  88      * (defaults to <tt>'0,000.00'</tt>).
  89      */
  90     format: '0,000.00',
  91
  92     constructor : function(c) {
  93         c.tpl = c.tpl || new Ext.XTemplate('{' + c.dataIndex + ':number("' + (c.format || this.format) + '")}');
  94         Ext.list.NumberColumn.superclass.constructor.call(this, c);
  95     }
  96 });
  97
  98 Ext.reg('lvnumbercolumn', Ext.list.NumberColumn);
  99
 100 /**
 101  * @class Ext.list.DateColumn
 102  * @extends Ext.list.Column
 103  * <p>A Column definition class which renders a passed date according to the default locale, or a configured
 104  * {@link #format}. See the {@link Ext.list.Column#xtype xtype} config option of {@link Ext.list.Column}
 105  * for more details.</p>
 106  */
 107 Ext.list.DateColumn = Ext.extend(Ext.list.Column, {
 108     format: 'm/d/Y',
 109     constructor : function(c) {
 110         c.tpl = c.tpl || new Ext.XTemplate('{' + c.dataIndex + ':date("' + (c.format || this.format) + '")}');
 111         Ext.list.DateColumn.superclass.constructor.call(this, c);
 112     }
 113 });
 114 Ext.reg('lvdatecolumn', Ext.list.DateColumn);
 115
 116 /**
 117  * @class Ext.list.BooleanColumn
 118  * @extends Ext.list.Column
 119  * <p>A Column definition class which renders boolean data fields.  See the {@link Ext.list.Column#xtype xtype}
 120  * config option of {@link Ext.list.Column} for more details.</p>
 121  */
 122 Ext.list.BooleanColumn = Ext.extend(Ext.list.Column, {
 123     /**
 124      * @cfg {String} trueText
 125      * The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>).
 126      */
 127     trueText: 'true',
 128     /**
 129      * @cfg {String} falseText
 130      * The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
 131      * <tt>'false'</tt>).
 132      */
 133     falseText: 'false',
 134     /**
 135      * @cfg {String} undefinedText
 136      * The string returned by the renderer when the column value is undefined (defaults to <tt>'&#160;'</tt>).
 137      */
 138     undefinedText: '&#160;',
 139
 140     constructor : function(c) {
 141         c.tpl = c.tpl || new Ext.XTemplate('{' + c.dataIndex + ':this.format}');
 142
 143         var t = this.trueText, f = this.falseText, u = this.undefinedText;
 144         c.tpl.format = function(v){
 145             if(v === undefined){
 146                 return u;
 147             }
 148             if(!v || v === 'false'){
 149                 return f;
 150             }
 151             return t;
 152         };
 153
 154         Ext.list.DateColumn.superclass.constructor.call(this, c);
 155     }
 156 });
 157
 158 Ext.reg('lvbooleancolumn', Ext.list.BooleanColumn);