1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
|
<html>
<head>
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.0.3
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
<div id="cls-Ext.grid.Column"></div>/**
* @class Ext.grid.Column
* <p>This class encapsulates column configuration data to be used in the initialization of a
* {@link Ext.grid.ColumnModel ColumnModel}.</p>
* <p>While subclasses are provided to render data in different ways, this class renders a passed
* data field unchanged and is usually used for textual columns.</p>
*/
Ext.grid.Column = function(config){
Ext.apply(this, config);
if(Ext.isString(this.renderer)){
this.renderer = Ext.util.Format[this.renderer];
} else if(Ext.isObject(this.renderer)){
this.scope = this.renderer.scope;
this.renderer = this.renderer.fn;
}
this.renderer = this.renderer.createDelegate(this.scope || config);
if(this.editor){
this.editor = Ext.create(this.editor, 'textfield');
}
};
Ext.grid.Column.prototype = {
<div id="cfg-Ext.grid.Column-editable"></div>/**
* @cfg {Boolean} editable Optional. Defaults to <tt>true</tt>, enabling the configured
* <tt>{@link #editor}</tt>. Set to <tt>false</tt> to initially disable editing on this column.
* The initial configuration may be dynamically altered using
* {@link Ext.grid.ColumnModel}.{@link Ext.grid.ColumnModel#setEditable setEditable()}.
*/
<div id="cfg-Ext.grid.Column-id"></div>/**
* @cfg {String} id Optional. A name which identifies this column (defaults to the column's initial
* ordinal position.) The <tt>id</tt> is used to create a CSS <b>class</b> name which is applied to all
* table cells (including headers) in that column (in this context the <tt>id</tt> does not need to be
* unique). The class name takes the form of <pre>x-grid3-td-<b>id</b></pre>
* Header cells will also receive this class name, but will also have the class <pre>x-grid3-hd</pre>
* So, to target header cells, use CSS selectors such as:<pre>.x-grid3-hd-row .x-grid3-td-<b>id</b></pre>
* The {@link Ext.grid.GridPanel#autoExpandColumn} grid config option references the column via this
* unique identifier.
*/
<div id="cfg-Ext.grid.Column-header"></div>/**
* @cfg {String} header Optional. The header text to be used as innerHTML
* (html tags are accepted) to display in the Grid view. <b>Note</b>: to
* have a clickable header with no text displayed use <tt>' '</tt>.
*/
<div id="cfg-Ext.grid.Column-groupable"></div>/**
* @cfg {Boolean} groupable Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
* may be used to disable the header menu item to group by the column selected. Defaults to <tt>true</tt>,
* which enables the header menu group option. Set to <tt>false</tt> to disable (but still show) the
* group option in the header menu for the column. See also <code>{@link #groupName}</code>.
*/
<div id="cfg-Ext.grid.Column-groupName"></div>/**
* @cfg {String} groupName Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
* may be used to specify the text with which to prefix the group field value in the group header line.
* See also {@link #groupRenderer} and
* {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#showGroupName showGroupName}.
*/
<div id="cfg-Ext.grid.Column-groupRenderer"></div>/**
* @cfg {Function} groupRenderer <p>Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
* may be used to specify the function used to format the grouping field value for display in the group
* {@link #groupName header}. If a <tt><b>groupRenderer</b></tt> is not specified, the configured
* <tt><b>{@link #renderer}</b></tt> will be called; if a <tt><b>{@link #renderer}</b></tt> is also not specified
* the new value of the group field will be used.</p>
* <p>The called function (either the <tt><b>groupRenderer</b></tt> or <tt><b>{@link #renderer}</b></tt>) will be
* passed the following parameters:
* <div class="mdetail-params"><ul>
* <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li>
* <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li>
* <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data
* for the row which caused group change.</p></li>
* <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>
* <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li>
* <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
* </ul></div></p>
* <p>The function should return a string value.</p>
*/
<div id="cfg-Ext.grid.Column-emptyGroupText"></div>/**
* @cfg {String} emptyGroupText Optional. If the grid is being rendered by an {@link Ext.grid.GroupingView}, this option
* may be used to specify the text to display when there is an empty group value. Defaults to the
* {@link Ext.grid.GroupingView}.{@link Ext.grid.GroupingView#emptyGroupText emptyGroupText}.
*/
<div id="cfg-Ext.grid.Column-dataIndex"></div>/**
* @cfg {String} dataIndex <p><b>Required</b>. The name of the field in the
* grid's {@link Ext.data.Store}'s {@link Ext.data.Record} definition from
* which to draw the column's value.</p>
*/
<div id="cfg-Ext.grid.Column-width"></div>/**
* @cfg {Number} width
* Optional. The initial width in pixels of the column.
* The width of each column can also be affected if any of the following are configured:
* <div class="mdetail-params"><ul>
* <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#autoExpandColumn autoExpandColumn}</tt></li>
* <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#forceFit forceFit}</tt>
* <div class="sub-desc">
* <p>By specifying <tt>forceFit:true</tt>, {@link #fixed non-fixed width} columns will be
* re-proportioned (based on the relative initial widths) to fill the width of the grid so
* that no horizontal scrollbar is shown.</p>
* </div></li>
* <li>{@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#autoFill autoFill}</tt></li>
* <li>{@link Ext.grid.GridPanel}.<tt>{@link Ext.grid.GridPanel#minColumnWidth minColumnWidth}</tt></li>
* <br><p><b>Note</b>: when the width of each column is determined, a space on the right side
* is reserved for the vertical scrollbar. The
* {@link Ext.grid.GridView}.<tt>{@link Ext.grid.GridView#scrollOffset scrollOffset}</tt>
* can be modified to reduce or eliminate the reserved offset.</p>
*/
<div id="cfg-Ext.grid.Column-sortable"></div>/**
* @cfg {Boolean} sortable Optional. <tt>true</tt> if sorting is to be allowed on this column.
* Defaults to the value of the <code>{@link Ext.grid.ColumnModel#defaultSortable}</code> property.
* Whether local/remote sorting is used is specified in <code>{@link Ext.data.Store#remoteSort}</code>.
*/
<div id="cfg-Ext.grid.Column-fixed"></div>/**
* @cfg {Boolean} fixed Optional. <tt>true</tt> if the column width cannot be changed. Defaults to <tt>false</tt>.
*/
<div id="cfg-Ext.grid.Column-resizable"></div>/**
* @cfg {Boolean} resizable Optional. <tt>false</tt> to disable column resizing. Defaults to <tt>true</tt>.
*/
<div id="cfg-Ext.grid.Column-menuDisabled"></div>/**
* @cfg {Boolean} menuDisabled Optional. <tt>true</tt> to disable the column menu. Defaults to <tt>false</tt>.
*/
<div id="cfg-Ext.grid.Column-hidden"></div>/**
* @cfg {Boolean} hidden
* Optional. <tt>true</tt> to initially hide this column. Defaults to <tt>false</tt>.
* A hidden column {@link Ext.grid.GridPanel#enableColumnHide may be shown via the header row menu}.
* If a column is never to be shown, simply do not include this column in the Column Model at all.
*/
<div id="cfg-Ext.grid.Column-tooltip"></div>/**
* @cfg {String} tooltip Optional. A text string to use as the column header's tooltip. If Quicktips
* are enabled, this value will be used as the text of the quick tip, otherwise it will be set as the
* header's HTML title attribute. Defaults to ''.
*/
<div id="cfg-Ext.grid.Column-renderer"></div>/**
* @cfg {Mixed} renderer
* <p>For an alternative to specifying a renderer see <code>{@link #xtype}</code></p>
* <p>Optional. A renderer is an 'interceptor' method which can be used transform data (value,
* appearance, etc.) before it is rendered). This may be specified in either of three ways:
* <div class="mdetail-params"><ul>
* <li>A renderer function used to return HTML markup for a cell given the cell's data value.</li>
* <li>A string which references a property name of the {@link Ext.util.Format} class which
* provides a renderer function.</li>
* <li>An object specifying both the renderer function, and its execution scope (<tt><b>this</b></tt>
* reference) e.g.:<pre style="margin-left:1.2em"><code>
{
fn: this.gridRenderer,
scope: this
}
</code></pre></li></ul></div>
* If not specified, the default renderer uses the raw data value.</p>
* <p>For information about the renderer function (passed parameters, etc.), see
* {@link Ext.grid.ColumnModel#setRenderer}. An example of specifying renderer function inline:</p><pre><code>
var companyColumn = {
header: 'Company Name',
dataIndex: 'company',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
// provide the logic depending on business rules
// name of your own choosing to manipulate the cell depending upon
// the data in the underlying Record object.
if (value == 'whatever') {
//metaData.css : String : A CSS class name to add to the TD element of the cell.
//metaData.attr : String : An html attribute definition string to apply to
// the data container element within the table
// cell (e.g. 'style="color:red;"').
metaData.css = 'name-of-css-class-you-will-define';
}
return value;
}
}
* </code></pre>
* See also {@link #scope}.
*/
<div id="cfg-Ext.grid.Column-xtype"></div>/**
* @cfg {String} xtype Optional. A String which references a predefined {@link Ext.grid.Column} subclass
* type which is preconfigured with an appropriate <code>{@link #renderer}</code> to be easily
* configured into a ColumnModel. The predefined {@link Ext.grid.Column} subclass types are:
* <div class="mdetail-params"><ul>
* <li><b><tt>gridcolumn</tt></b> : {@link Ext.grid.Column} (<b>Default</b>)<p class="sub-desc"></p></li>
* <li><b><tt>booleancolumn</tt></b> : {@link Ext.grid.BooleanColumn}<p class="sub-desc"></p></li>
* <li><b><tt>numbercolumn</tt></b> : {@link Ext.grid.NumberColumn}<p class="sub-desc"></p></li>
* <li><b><tt>datecolumn</tt></b> : {@link Ext.grid.DateColumn}<p class="sub-desc"></p></li>
* <li><b><tt>templatecolumn</tt></b> : {@link Ext.grid.TemplateColumn}<p class="sub-desc"></p></li>
* </ul></div>
* <p>Configuration properties for the specified <code>xtype</code> may be specified with
* the Column configuration properties, for example:</p>
* <pre><code>
var grid = new Ext.grid.GridPanel({
...
columns: [{
header: 'Last Updated',
dataIndex: 'lastChange',
width: 85,
sortable: true,
//renderer: Ext.util.Format.dateRenderer('m/d/Y'),
xtype: 'datecolumn', // use xtype instead of renderer
format: 'M/d/Y' // configuration property for {@link Ext.grid.DateColumn}
}, {
...
}]
});
* </code></pre>
*/
<div id="cfg-Ext.grid.Column-scope"></div>/**
* @cfg {Object} scope Optional. The scope (<tt><b>this</b></tt> reference) in which to execute the
* renderer. Defaults to the Column configuration object.
*/
<div id="cfg-Ext.grid.Column-align"></div>/**
* @cfg {String} align Optional. Set the CSS text-align property of the column. Defaults to undefined.
*/
<div id="cfg-Ext.grid.Column-css"></div>/**
* @cfg {String} css Optional. An inline style definition string which is applied to all table cells in the column
* (excluding headers). Defaults to undefined.
*/
<div id="cfg-Ext.grid.Column-hideable"></div>/**
* @cfg {Boolean} hideable Optional. Specify as <tt>false</tt> to prevent the user from hiding this column
* (defaults to true). To disallow column hiding globally for all columns in the grid, use
* {@link Ext.grid.GridPanel#enableColumnHide} instead.
*/
<div id="cfg-Ext.grid.Column-editor"></div>/**
* @cfg {Ext.form.Field} editor Optional. The {@link Ext.form.Field} to use when editing values in this column
* if editing is supported by the grid. See <tt>{@link #editable}</tt> also.
*/
/**
* @private
* @cfg {Boolean} isColumn
* Used by ColumnModel setConfig method to avoid reprocessing a Column
* if <code>isColumn</code> is not set ColumnModel will recreate a new Ext.grid.Column
* Defaults to true.
*/
isColumn : true,
<div id="prop-Ext.grid.Column-renderer"></div>/**
* Optional. A function which returns displayable data when passed the following parameters:
* <div class="mdetail-params"><ul>
* <li><b>value</b> : Object<p class="sub-desc">The data value for the cell.</p></li>
* <li><b>metadata</b> : Object<p class="sub-desc">An object in which you may set the following attributes:<ul>
* <li><b>css</b> : String<p class="sub-desc">A CSS class name to add to the cell's TD element.</p></li>
* <li><b>attr</b> : String<p class="sub-desc">An HTML attribute definition string to apply to the data container
* element <i>within</i> the table cell (e.g. 'style="color:red;"').</p></li></ul></p></li>
* <li><b>record</b> : Ext.data.record<p class="sub-desc">The {@link Ext.data.Record} from which the data was
* extracted.</p></li>
* <li><b>rowIndex</b> : Number<p class="sub-desc">Row index</p></li>
* <li><b>colIndex</b> : Number<p class="sub-desc">Column index</p></li>
* <li><b>store</b> : Ext.data.Store<p class="sub-desc">The {@link Ext.data.Store} object from which the Record
* was extracted.</p></li>
* </ul></div>
* @property renderer
* @type Function
*/
renderer : function(value){
if(Ext.isString(value) && value.length < 1){
return ' ';
}
return value;
},
// private
getEditor: function(rowIndex){
return this.editable !== false ? this.editor : null;
},
<div id="method-Ext.grid.Column-getCellEditor"></div>/**
* Returns the {@link Ext.Editor editor} defined for this column that was created to wrap the {@link Ext.form.Field Field}
* used to edit the cell.
* @param {Number} rowIndex The row index
* @return {Ext.Editor}
*/
getCellEditor: function(rowIndex){
var editor = this.getEditor(rowIndex);
if(editor){
if(!editor.startEdit){
if(!editor.gridEditor){
editor.gridEditor = new Ext.grid.GridEditor(editor);
}
return editor.gridEditor;
}else if(editor.startEdit){
return editor;
}
}
return null;
}
};
<div id="cls-Ext.grid.BooleanColumn"></div>/**
* @class Ext.grid.BooleanColumn
* @extends Ext.grid.Column
* <p>A Column definition class which renders boolean data fields. See the {@link Ext.grid.Column#xtype xtype}
* config option of {@link Ext.grid.Column} for more details.</p>
*/
Ext.grid.BooleanColumn = Ext.extend(Ext.grid.Column, {
<div id="cfg-Ext.grid.BooleanColumn-trueText"></div>/**
* @cfg {String} trueText
* The string returned by the renderer when the column value is not falsey (defaults to <tt>'true'</tt>).
*/
trueText: 'true',
<div id="cfg-Ext.grid.BooleanColumn-falseText"></div>/**
* @cfg {String} falseText
* The string returned by the renderer when the column value is falsey (but not undefined) (defaults to
* <tt>'false'</tt>).
*/
falseText: 'false',
<div id="cfg-Ext.grid.BooleanColumn-undefinedText"></div>/**
* @cfg {String} undefinedText
* The string returned by the renderer when the column value is undefined (defaults to <tt>' '</tt>).
*/
undefinedText: ' ',
constructor: function(cfg){
Ext.grid.BooleanColumn.superclass.constructor.call(this, cfg);
var t = this.trueText, f = this.falseText, u = this.undefinedText;
this.renderer = function(v){
if(v === undefined){
return u;
}
if(!v || v === 'false'){
return f;
}
return t;
};
}
});
<div id="cls-Ext.grid.NumberColumn"></div>/**
* @class Ext.grid.NumberColumn
* @extends Ext.grid.Column
* <p>A Column definition class which renders a numeric data field according to a {@link #format} string. See the
* {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more details.</p>
*/
Ext.grid.NumberColumn = Ext.extend(Ext.grid.Column, {
<div id="cfg-Ext.grid.NumberColumn-format"></div>/**
* @cfg {String} format
* A formatting string as used by {@link Ext.util.Format#number} to format a numeric value for this Column
* (defaults to <tt>'0,000.00'</tt>).
*/
format : '0,000.00',
constructor: function(cfg){
Ext.grid.NumberColumn.superclass.constructor.call(this, cfg);
this.renderer = Ext.util.Format.numberRenderer(this.format);
}
});
<div id="cls-Ext.grid.DateColumn"></div>/**
* @class Ext.grid.DateColumn
* @extends Ext.grid.Column
* <p>A Column definition class which renders a passed date according to the default locale, or a configured
* {@link #format}. See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column}
* for more details.</p>
*/
Ext.grid.DateColumn = Ext.extend(Ext.grid.Column, {
<div id="cfg-Ext.grid.DateColumn-format"></div>/**
* @cfg {String} format
* A formatting string as used by {@link Date#format} to format a Date for this Column
* (defaults to <tt>'m/d/Y'</tt>).
*/
format : 'm/d/Y',
constructor: function(cfg){
Ext.grid.DateColumn.superclass.constructor.call(this, cfg);
this.renderer = Ext.util.Format.dateRenderer(this.format);
}
});
<div id="cls-Ext.grid.TemplateColumn"></div>/**
* @class Ext.grid.TemplateColumn
* @extends Ext.grid.Column
* <p>A Column definition class which renders a value by processing a {@link Ext.data.Record Record}'s
* {@link Ext.data.Record#data data} using a {@link #tpl configured} {@link Ext.XTemplate XTemplate}.
* See the {@link Ext.grid.Column#xtype xtype} config option of {@link Ext.grid.Column} for more
* details.</p>
*/
Ext.grid.TemplateColumn = Ext.extend(Ext.grid.Column, {
<div id="cfg-Ext.grid.TemplateColumn-tpl"></div>/**
* @cfg {String/XTemplate} tpl
* An {@link Ext.XTemplate XTemplate}, or an XTemplate <i>definition string</i> to use to process a
* {@link Ext.data.Record Record}'s {@link Ext.data.Record#data data} to produce a column's rendered value.
*/
constructor: function(cfg){
Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
var tpl = Ext.isObject(this.tpl) ? this.tpl : new Ext.XTemplate(this.tpl);
this.renderer = function(value, p, r){
return tpl.apply(r.data);
};
this.tpl = tpl;
}
});
/*
* @property types
* @type Object
* @member Ext.grid.Column
* @static
* <p>An object containing predefined Column classes keyed by a mnemonic code which may be referenced
* by the {@link Ext.grid.ColumnModel#xtype xtype} config option of ColumnModel.</p>
* <p>This contains the following properties</p><div class="mdesc-details"><ul>
* <li>gridcolumn : <b>{@link Ext.grid.Column Column constructor}</b></li>
* <li>booleancolumn : <b>{@link Ext.grid.BooleanColumn BooleanColumn constructor}</b></li>
* <li>numbercolumn : <b>{@link Ext.grid.NumberColumn NumberColumn constructor}</b></li>
* <li>datecolumn : <b>{@link Ext.grid.DateColumn DateColumn constructor}</b></li>
* <li>templatecolumn : <b>{@link Ext.grid.TemplateColumn TemplateColumn constructor}</b></li>
* </ul></div>
*/
Ext.grid.Column.types = {
gridcolumn : Ext.grid.Column,
booleancolumn: Ext.grid.BooleanColumn,
numbercolumn: Ext.grid.NumberColumn,
datecolumn: Ext.grid.DateColumn,
templatecolumn: Ext.grid.TemplateColumn
};</pre>
</body>
</html>
|
