</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.2.1
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
+ * Ext JS Library 3.3.1
+ * Copyright(c) 2006-2010 Sencha Inc.
+ * licensing@sencha.com
+ * http://www.sencha.com/license
*/
<div id="cls-Ext.grid.GroupingView"></div>/**
* @class Ext.grid.GroupingView
* @cfg {Function} groupRenderer This property must be configured in the {@link Ext.grid.Column} for
* each column.
*/
+
+ <div id="cfg-Ext.grid.GroupingView-cancelEditOnToggle"></div>/**
+ * @cfg {Boolean} cancelEditOnToggle True to cancel any editing when the group header is toggled. Defaults to <tt>true</tt>.
+ */
+ cancelEditOnToggle: true,
// private
initTemplates : function(){
}
if((item = items.get('showGroups'))){
item.setDisabled(disabled);
- item.setChecked(this.enableGrouping, true);
+ item.setChecked(this.canGroup(), true);
}
},
// private
renderUI : function(){
- Ext.grid.GroupingView.superclass.renderUI.call(this);
- this.mainBody.on('mousedown', this.interceptMouse, this);
+ var markup = Ext.grid.GroupingView.superclass.renderUI.call(this);
if(this.enableGroupingMenu && this.hmenu){
this.hmenu.add('-',{
}
this.hmenu.on('beforeshow', this.beforeMenuShow, this);
}
+ return markup;
},
processEvent: function(name, e){
// group value is at the end of the string
var field = this.getGroupField(),
prefix = this.getPrefix(field),
- groupValue = hd.id.substring(prefix.length);
+ groupValue = hd.id.substring(prefix.length),
+ emptyRe = new RegExp('gp-' + Ext.escapeRe(field) + '--hd');
// remove trailing '-hd'
groupValue = groupValue.substr(0, groupValue.length - 3);
- if(groupValue){
+
+ // also need to check for empty groups
+ if(groupValue || emptyRe.test(hd.id)){
this.grid.fireEvent('group' + name, this.grid, field, groupValue, e);
}
+ if(name == 'mousedown' && e.button == 0){
+ this.toggleGroup(hd.parentNode);
+ }
}
},
// private
onGroupByClick : function(){
+ var grid = this.grid;
this.enableGrouping = true;
- this.grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex));
- this.grid.fireEvent('groupchange', this, this.grid.store.getGroupState());
+ grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex));
+ grid.fireEvent('groupchange', grid, grid.store.getGroupState());
this.beforeMenuShow(); // Make sure the checkboxes get properly set when changing groups
this.refresh();
},
var gel = Ext.get(group);
expanded = Ext.isDefined(expanded) ? expanded : gel.hasClass('x-grid-group-collapsed');
if(this.state[gel.id] !== expanded){
- this.grid.stopEditing(true);
+ if (this.cancelEditOnToggle !== false) {
+ this.grid.stopEditing(true);
+ }
this.state[gel.id] = expanded;
gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed');
}
this.toggleAllGroups(false);
},
- // private
- interceptMouse : function(e){
- var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
- if(hd){
- e.stopEvent();
- this.toggleGroup(hd.parentNode);
- }
- },
-
// private
getGroup : function(v, r, groupRenderer, rowIndex, colIndex, ds){
- var g = groupRenderer ? groupRenderer(v, {}, r, rowIndex, colIndex, ds) : String(v);
+ var column = this.cm.config[colIndex],
+ g = groupRenderer ? groupRenderer.call(column.scope, v, {}, r, rowIndex, colIndex, ds) : String(v);
if(g === '' || g === ' '){
- g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText;
+ g = column.emptyGroupText || this.emptyGroupText;
}
return g;
},
this.updateGroupWidths();
}
},
+
+ afterRenderUI: function () {
+ Ext.grid.GroupingView.superclass.afterRenderUI.call(this);
+
+ if (this.enableGroupingMenu && this.hmenu) {
+ this.hmenu.add('-',{
+ itemId:'groupBy',
+ text: this.groupByText,
+ handler: this.onGroupByClick,
+ scope: this,
+ iconCls:'x-group-by-icon'
+ });
+
+ if (this.enableNoGroups) {
+ this.hmenu.add({
+ itemId:'showGroups',
+ text: this.showGroupsText,
+ checked: true,
+ checkHandler: this.onShowGroupsClick,
+ scope: this
+ });
+ }
+
+ this.hmenu.on('beforeshow', this.beforeMenuShow, this);
+ }
+ },
// private
renderRows : function(){