3
* Copyright(c) 2006-2009, Ext JS, LLC.
6
* http://extjs.com/license
10
* @class Ext.grid.GroupingView
11
* @extends Ext.grid.GridView
12
* Adds the ability for single level grouping to the grid.
13
*<pre><code>var grid = new Ext.grid.GridPanel({
14
// A groupingStore is required for a GroupingView
15
store: new Ext.data.GroupingStore({
18
sortInfo:{field: 'company', direction: "ASC"},
23
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
24
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
25
{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
26
{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
27
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
30
view: new Ext.grid.GroupingView({
32
// custom grouping text template to display the number of items per group
33
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
41
title: 'Grouping Example',
43
renderTo: document.body
46
* @param {Object} config
48
Ext.grid.GroupingView = Ext.extend(Ext.grid.GridView, {
50
* @cfg {Boolean} hideGroupedColumn True to hide the column that is currently grouped
52
hideGroupedColumn:false,
54
* @cfg {Boolean} showGroupName True to display the name for each set of grouped rows (defaults to true)
58
* @cfg {Boolean} startCollapsed True to start all groups collapsed
62
* @cfg {Boolean} enableGrouping False to disable grouping functionality (defaults to true)
66
* @cfg {Boolean} enableGroupingMenu True to enable the grouping control in the column menu
68
enableGroupingMenu:true,
70
* @cfg {Boolean} enableNoGroups True to allow the user to turn off grouping
74
* @cfg {String} emptyGroupText The text to display when there is an empty group value
76
emptyGroupText : '(None)',
78
* @cfg {Boolean} ignoreAdd True to skip refreshing the view when new rows are added (defaults to false)
82
* @cfg {String} groupTextTpl The template used to render the group header. This is used to
83
* format an object which contains the following properties:
84
* <div class="mdetail-params"><ul>
85
* <li><b>group</b> : String<p class="sub-desc">The <i>rendered</i> value of the group field.
86
* By default this is the unchanged value of the group field. If a {@link #groupRenderer}
87
* is specified, it is the result of a call to that.</p></li>
88
* <li><b>gvalue</b> : Object<p class="sub-desc">The <i>raw</i> value of the group field.</p></li>
89
* <li><b>text</b> : String<p class="sub-desc">The configured {@link #header} (If
90
* {@link #showGroupName} is true) plus the <i>rendered</i>group field value.</p></li>
91
* <li><b>groupId</b> : String<p class="sub-desc">A unique, generated ID which is applied to the
92
* View Element which contains the group.</p></li>
93
* <li><b>startRow</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>
94
* <li><b>rs</b> : Array<p class="sub-desc">.Contains a single element: The Record providing the data
95
* for the row which caused group change.</p></li>
96
* <li><b>cls</b> : String<p class="sub-desc">The generated class name string to apply to the group header Element.</p></li>
97
* <li><b>style</b> : String<p class="sub-desc">The inline style rules to apply to the group header Element.</p></li>
99
* See {@link Ext.XTemplate} for information on how to format data using a template.
101
groupTextTpl : '{text}',
103
* @cfg {Function} groupRenderer The function used to format the grouping field value for
104
* display in the group header. Should return a string value. This takes the following parameters:
105
* <div class="mdetail-params"><ul>
106
* <li><b>v</b> : Object<p class="sub-desc">The new value of the group field.</p></li>
107
* <li><b>unused</b> : undefined<p class="sub-desc">Unused parameter.</p></li>
108
* <li><b>r</b> : Ext.data.Record<p class="sub-desc">The Record providing the data
109
* for the row which caused group change.</p></li>
110
* <li><b>rowIndex</b> : Number<p class="sub-desc">The row index of the Record which caused group change.</p></li>
111
* <li><b>colIndex</b> : Number<p class="sub-desc">The column index of the group field.</p></li>
112
* <li><b>ds</b> : Ext.data.Store<p class="sub-desc">The Store which is providing the data Model.</p></li>
116
* @cfg {String} header The text with which to prefix the group field value in the group header line.
123
initTemplates : function(){
124
Ext.grid.GroupingView.superclass.initTemplates.call(this);
127
var sm = this.grid.getSelectionModel();
128
sm.on(sm.selectRow ? 'beforerowselect' : 'beforecellselect',
129
this.onBeforeRowSelect, this);
131
if(!this.startGroup){
132
this.startGroup = new Ext.XTemplate(
133
'<div id="{groupId}" class="x-grid-group {cls}">',
134
'<div id="{groupId}-hd" class="x-grid-group-hd" style="{style}"><div>', this.groupTextTpl ,'</div></div>',
135
'<div id="{groupId}-bd" class="x-grid-group-body">'
138
this.startGroup.compile();
139
this.endGroup = '</div></div>';
143
findGroup : function(el){
144
return Ext.fly(el).up('.x-grid-group', this.mainBody.dom);
148
getGroups : function(){
149
return this.hasRows() ? this.mainBody.dom.childNodes : [];
154
if(this.enableGrouping && !this.ignoreAdd){
155
var ss = this.getScrollState();
157
this.restoreScroll(ss);
158
}else if(!this.enableGrouping){
159
Ext.grid.GroupingView.superclass.onAdd.apply(this, arguments);
164
onRemove : function(ds, record, index, isUpdate){
165
Ext.grid.GroupingView.superclass.onRemove.apply(this, arguments);
166
var g = document.getElementById(record._groupId);
167
if(g && g.childNodes[1].childNodes.length < 1){
170
this.applyEmptyText();
174
refreshRow : function(record){
175
if(this.ds.getCount()==1){
178
this.isUpdating = true;
179
Ext.grid.GroupingView.superclass.refreshRow.apply(this, arguments);
180
this.isUpdating = false;
185
beforeMenuShow : function(){
186
var field = this.getGroupField();
187
var g = this.hmenu.items.get('groupBy');
189
g.setDisabled(this.cm.config[this.hdCtxIndex].groupable === false);
191
var s = this.hmenu.items.get('showGroups');
193
s.setDisabled(!field && this.cm.config[this.hdCtxIndex].groupable === false);
194
s.setChecked(!!field, true);
199
renderUI : function(){
200
Ext.grid.GroupingView.superclass.renderUI.call(this);
201
this.mainBody.on('mousedown', this.interceptMouse, this);
203
if(this.enableGroupingMenu && this.hmenu){
206
text: this.groupByText,
207
handler: this.onGroupByClick,
209
iconCls:'x-group-by-icon'
211
if(this.enableNoGroups){
214
text: this.showGroupsText,
216
checkHandler: this.onShowGroupsClick,
220
this.hmenu.on('beforeshow', this.beforeMenuShow, this);
225
onGroupByClick : function(){
226
this.grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex));
227
this.beforeMenuShow(); // Make sure the checkboxes get properly set when changing groups
231
onShowGroupsClick : function(mi, checked){
233
this.onGroupByClick();
235
this.grid.store.clearGrouping();
240
* Toggles the specified group if no value is passed, otherwise sets the expanded state of the group to the value passed.
241
* @param {String} groupId The groupId assigned to the group (see getGroupId)
242
* @param {Boolean} expanded (optional)
244
toggleGroup : function(group, expanded){
245
this.grid.stopEditing(true);
246
group = Ext.getDom(group);
247
var gel = Ext.fly(group);
248
expanded = expanded !== undefined ?
249
expanded : gel.hasClass('x-grid-group-collapsed');
251
this.state[gel.dom.id] = expanded;
252
gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed');
256
* Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed.
257
* @param {Boolean} expanded (optional)
259
toggleAllGroups : function(expanded){
260
var groups = this.getGroups();
261
for(var i = 0, len = groups.length; i < len; i++){
262
this.toggleGroup(groups[i], expanded);
267
* Expands all grouped rows.
269
expandAllGroups : function(){
270
this.toggleAllGroups(true);
274
* Collapses all grouped rows.
276
collapseAllGroups : function(){
277
this.toggleAllGroups(false);
281
interceptMouse : function(e){
282
var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
285
this.toggleGroup(hd.parentNode);
290
getGroup : function(v, r, groupRenderer, rowIndex, colIndex, ds){
291
var g = groupRenderer ? groupRenderer(v, {}, r, rowIndex, colIndex, ds) : String(v);
293
g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText;
299
getGroupField : function(){
300
return this.grid.store.getGroupState();
304
renderRows : function(){
305
var groupField = this.getGroupField();
306
var eg = !!groupField;
307
// if they turned off grouping and the last grouped field is hidden
308
if(this.hideGroupedColumn) {
309
var colIndex = this.cm.findColumnIndex(groupField);
310
if(!eg && this.lastGroupField !== undefined) {
311
this.mainBody.update('');
312
this.cm.setHidden(this.cm.findColumnIndex(this.lastGroupField), false);
313
delete this.lastGroupField;
314
}else if (eg && this.lastGroupField === undefined) {
315
this.lastGroupField = groupField;
316
this.cm.setHidden(colIndex, true);
317
}else if (eg && this.lastGroupField !== undefined && groupField !== this.lastGroupField) {
318
this.mainBody.update('');
319
var oldIndex = this.cm.findColumnIndex(this.lastGroupField);
320
this.cm.setHidden(oldIndex, false);
321
this.lastGroupField = groupField;
322
this.cm.setHidden(colIndex, true);
325
return Ext.grid.GroupingView.superclass.renderRows.apply(
330
doRender : function(cs, rs, ds, startRow, colCount, stripe){
334
var groupField = this.getGroupField();
335
var colIndex = this.cm.findColumnIndex(groupField);
337
this.enableGrouping = !!groupField;
339
if(!this.enableGrouping || this.isUpdating){
340
return Ext.grid.GroupingView.superclass.doRender.apply(
343
var gstyle = 'width:'+this.getTotalWidth()+';';
345
var gidPrefix = this.grid.getGridEl().id;
346
var cfg = this.cm.config[colIndex];
347
var groupRenderer = cfg.groupRenderer || cfg.renderer;
348
var prefix = this.showGroupName ?
349
(cfg.groupName || cfg.header)+': ' : '';
351
var groups = [], curGroup, i, len, gid;
352
for(i = 0, len = rs.length; i < len; i++){
353
var rowIndex = startRow + i;
355
gvalue = r.data[groupField],
356
g = this.getGroup(gvalue, r, groupRenderer, rowIndex, colIndex, ds);
357
if(!curGroup || curGroup.group != g){
358
gid = gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(g);
359
// if state is defined use it, however state is in terms of expanded
360
// so negate it, otherwise use the default.
361
var isCollapsed = typeof this.state[gid] !== 'undefined' ? !this.state[gid] : this.startCollapsed;
362
var gcls = isCollapsed ? 'x-grid-group-collapsed' : '';
373
groups.push(curGroup);
381
for(i = 0, len = groups.length; i < len; i++){
383
this.doGroupStart(buf, g, cs, ds, colCount);
384
buf[buf.length] = Ext.grid.GroupingView.superclass.doRender.call(
385
this, cs, g.rs, ds, g.startRow, colCount, stripe);
387
this.doGroupEnd(buf, g, cs, ds, colCount);
393
* Dynamically tries to determine the groupId of a specific value
394
* @param {String} value
395
* @return {String} The group id
397
getGroupId : function(value){
398
var gidPrefix = this.grid.getGridEl().id;
399
var groupField = this.getGroupField();
400
var colIndex = this.cm.findColumnIndex(groupField);
401
var cfg = this.cm.config[colIndex];
402
var groupRenderer = cfg.groupRenderer || cfg.renderer;
403
var gtext = this.getGroup(value, {data:{}}, groupRenderer, 0, colIndex, this.ds);
404
return gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(value);
408
doGroupStart : function(buf, g, cs, ds, colCount){
409
buf[buf.length] = this.startGroup.apply(g);
413
doGroupEnd : function(buf, g, cs, ds, colCount){
414
buf[buf.length] = this.endGroup;
418
getRows : function(){
419
if(!this.enableGrouping){
420
return Ext.grid.GroupingView.superclass.getRows.call(this);
423
var g, gs = this.getGroups();
424
for(var i = 0, len = gs.length; i < len; i++){
425
g = gs[i].childNodes[1].childNodes;
426
for(var j = 0, jlen = g.length; j < jlen; j++){
434
updateGroupWidths : function(){
435
if(!this.enableGrouping || !this.hasRows()){
438
var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth-this.scrollOffset) +'px';
439
var gs = this.getGroups();
440
for(var i = 0, len = gs.length; i < len; i++){
441
gs[i].firstChild.style.width = tw;
446
onColumnWidthUpdated : function(col, w, tw){
447
Ext.grid.GroupingView.superclass.onColumnWidthUpdated.call(this, col, w, tw);
448
this.updateGroupWidths();
452
onAllColumnWidthsUpdated : function(ws, tw){
453
Ext.grid.GroupingView.superclass.onAllColumnWidthsUpdated.call(this, ws, tw);
454
this.updateGroupWidths();
458
onColumnHiddenUpdated : function(col, hidden, tw){
459
Ext.grid.GroupingView.superclass.onColumnHiddenUpdated.call(this, col, hidden, tw);
460
this.updateGroupWidths();
464
onLayout : function(){
465
this.updateGroupWidths();
469
onBeforeRowSelect : function(sm, rowIndex){
470
if(!this.enableGrouping){
473
var row = this.getRow(rowIndex);
474
if(row && !row.offsetParent){
475
var g = this.findGroup(row);
476
this.toggleGroup(g, true);
481
* @cfg {String} groupByText Text displayed in the grid header menu for grouping by a column
482
* (defaults to 'Group By This Field').
484
groupByText: 'Group By This Field',
486
* @cfg {String} showGroupsText Text displayed in the grid header for enabling/disabling grouping
487
* (defaults to 'Show in Groups').
489
showGroupsText: 'Show in Groups'
492
Ext.grid.GroupingView.GROUP_ID = 1000;
b'\\ No newline at end of file'