Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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>