docs/source/Column1.html

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