X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..2e847cf21b8ab9d15fa167b315ca5b2fa92638fc:/pkgs/pkg-grid-grouping-debug.js?ds=sidebyside
diff --git a/pkgs/pkg-grid-grouping-debug.js b/pkgs/pkg-grid-grouping-debug.js
index b42863d7..8aa8103b 100644
--- a/pkgs/pkg-grid-grouping-debug.js
+++ b/pkgs/pkg-grid-grouping-debug.js
@@ -1,6 +1,6 @@
/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.1.1
+ * Copyright(c) 2006-2010 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
@@ -139,6 +139,13 @@ var grid = new Ext.grid.GridPanel({
*
*/
groupTextTpl : '{text}',
+
+ /**
+ * @cfg {String} groupMode Indicates how to construct the group identifier. 'value' constructs the id using
+ * raw value, 'display' constructs the id using the rendered value. Defaults to 'value'.
+ */
+ groupMode: 'value',
+
/**
* @cfg {Function} groupRenderer This property must be configured in the {@link Ext.grid.Column} for
* each column.
@@ -164,6 +171,10 @@ var grid = new Ext.grid.GridPanel({
);
}
this.startGroup.compile();
+ if(!this.endGroup){
+ this.endGroup = '';
+ }
+
this.endGroup = '';
},
@@ -179,11 +190,11 @@ var grid = new Ext.grid.GridPanel({
// private
onAdd : function(){
- if(this.enableGrouping && !this.ignoreAdd){
+ if(this.canGroup() && !this.ignoreAdd){
var ss = this.getScrollState();
this.refresh();
this.restoreScroll(ss);
- }else if(!this.enableGrouping){
+ }else if(!this.canGroup()){
Ext.grid.GroupingView.superclass.onAdd.apply(this, arguments);
}
},
@@ -217,7 +228,7 @@ var grid = new Ext.grid.GridPanel({
}
if((item = items.get('showGroups'))){
item.setDisabled(disabled);
- item.setChecked(!!this.getGroupField(), true);
+ item.setChecked(this.enableGrouping, true);
}
},
@@ -247,18 +258,55 @@ var grid = new Ext.grid.GridPanel({
}
},
+ processEvent: function(name, e){
+ var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
+ if(hd){
+ // group value is at the end of the string
+ var field = this.getGroupField(),
+ prefix = this.getPrefix(field),
+ groupValue = hd.id.substring(prefix.length);
+
+ // remove trailing '-hd'
+ groupValue = groupValue.substr(0, groupValue.length - 3);
+ if(groupValue){
+ this.grid.fireEvent('group' + name, this.grid, field, groupValue, e);
+ }
+ }
+
+ },
+
// private
onGroupByClick : function(){
+ this.enableGrouping = true;
this.grid.store.groupBy(this.cm.getDataIndex(this.hdCtxIndex));
+ this.grid.fireEvent('groupchange', this, this.grid.store.getGroupState());
this.beforeMenuShow(); // Make sure the checkboxes get properly set when changing groups
+ this.refresh();
},
// private
onShowGroupsClick : function(mi, checked){
+ this.enableGrouping = checked;
if(checked){
this.onGroupByClick();
}else{
this.grid.store.clearGrouping();
+ this.grid.fireEvent('groupchange', this, null);
+ }
+ },
+
+ /**
+ * Toggle the group that contains the specific row.
+ * @param {Number} rowIndex The row inside the group
+ * @param {Boolean} expanded (optional)
+ */
+ toggleRowIndex : function(rowIndex, expanded){
+ if(!this.canGroup()){
+ return;
+ }
+ var row = this.getRow(rowIndex);
+ if(row){
+ this.toggleGroup(this.findGroup(row), expanded);
}
},
@@ -268,14 +316,13 @@ var grid = new Ext.grid.GridPanel({
* @param {Boolean} expanded (optional)
*/
toggleGroup : function(group, expanded){
- this.grid.stopEditing(true);
- group = Ext.getDom(group);
- var gel = Ext.fly(group);
- expanded = expanded !== undefined ?
- expanded : gel.hasClass('x-grid-group-collapsed');
-
- this.state[gel.dom.id] = expanded;
- gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed');
+ 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);
+ this.state[gel.id] = expanded;
+ gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed');
+ }
},
/**
@@ -315,7 +362,7 @@ var grid = new Ext.grid.GridPanel({
// private
getGroup : function(v, r, groupRenderer, rowIndex, colIndex, ds){
var g = groupRenderer ? groupRenderer(v, {}, r, rowIndex, colIndex, ds) : String(v);
- if(g === ''){
+ if(g === '' || g === ' '){
g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText;
}
return g;
@@ -325,9 +372,12 @@ var grid = new Ext.grid.GridPanel({
getGroupField : function(){
return this.grid.store.getGroupState();
},
-
+
// private
afterRender : function(){
+ if(!this.ds || !this.cm){
+ return;
+ }
Ext.grid.GroupingView.superclass.afterRender.call(this);
if(this.grid.deferRowRender){
this.updateGroupWidths();
@@ -340,15 +390,16 @@ var grid = new Ext.grid.GridPanel({
var eg = !!groupField;
// if they turned off grouping and the last grouped field is hidden
if(this.hideGroupedColumn) {
- var colIndex = this.cm.findColumnIndex(groupField);
- if(!eg && this.lastGroupField !== undefined) {
+ var colIndex = this.cm.findColumnIndex(groupField),
+ hasLastGroupField = Ext.isDefined(this.lastGroupField);
+ if(!eg && hasLastGroupField){
this.mainBody.update('');
this.cm.setHidden(this.cm.findColumnIndex(this.lastGroupField), false);
delete this.lastGroupField;
- }else if (eg && this.lastGroupField === undefined) {
+ }else if (eg && !hasLastGroupField){
this.lastGroupField = groupField;
this.cm.setHidden(colIndex, true);
- }else if (eg && this.lastGroupField !== undefined && groupField !== this.lastGroupField) {
+ }else if (eg && hasLastGroupField && groupField !== this.lastGroupField) {
this.mainBody.update('');
var oldIndex = this.cm.findColumnIndex(this.lastGroupField);
this.cm.setHidden(oldIndex, false);
@@ -365,37 +416,33 @@ var grid = new Ext.grid.GridPanel({
if(rs.length < 1){
return '';
}
- var groupField = this.getGroupField(),
- colIndex = this.cm.findColumnIndex(groupField),
- g;
-
- this.enableGrouping = !!groupField;
- if(!this.enableGrouping || this.isUpdating){
+ if(!this.canGroup() || this.isUpdating){
return Ext.grid.GroupingView.superclass.doRender.apply(
this, arguments);
}
- var gstyle = 'width:'+this.getTotalWidth()+';';
- var gidPrefix = this.grid.getGridEl().id;
- var cfg = this.cm.config[colIndex];
- var groupRenderer = cfg.groupRenderer || cfg.renderer;
- var prefix = this.showGroupName ?
- (cfg.groupName || cfg.header)+': ' : '';
+ var groupField = this.getGroupField(),
+ colIndex = this.cm.findColumnIndex(groupField),
+ g,
+ gstyle = 'width:' + this.getTotalWidth() + ';',
+ cfg = this.cm.config[colIndex],
+ groupRenderer = cfg.groupRenderer || cfg.renderer,
+ prefix = this.showGroupName ? (cfg.groupName || cfg.header)+': ' : '',
+ groups = [],
+ curGroup, i, len, gid;
- var groups = [], curGroup, i, len, gid;
for(i = 0, len = rs.length; i < len; i++){
var rowIndex = startRow + i,
r = rs[i],
gvalue = r.data[groupField];
-
+
g = this.getGroup(gvalue, r, groupRenderer, rowIndex, colIndex, ds);
if(!curGroup || curGroup.group != g){
- gid = gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(g);
- // if state is defined use it, however state is in terms of expanded
- // so negate it, otherwise use the default.
- var isCollapsed = typeof this.state[gid] !== 'undefined' ? !this.state[gid] : this.startCollapsed;
- var gcls = isCollapsed ? 'x-grid-group-collapsed' : '';
+ gid = this.constructId(gvalue, groupField, colIndex);
+ // if state is defined use it, however state is in terms of expanded
+ // so negate it, otherwise use the default.
+ this.state[gid] = !(Ext.isDefined(this.state[gid]) ? !this.state[gid] : this.startCollapsed);
curGroup = {
group: g,
gvalue: gvalue,
@@ -403,7 +450,7 @@ var grid = new Ext.grid.GridPanel({
groupId: gid,
startRow: rowIndex,
rs: [r],
- cls: gcls,
+ cls: this.state[gid] ? '' : 'x-grid-group-collapsed',
style: gstyle
};
groups.push(curGroup);
@@ -431,13 +478,27 @@ var grid = new Ext.grid.GridPanel({
* @return {String} The group id
*/
getGroupId : function(value){
- var gidPrefix = this.grid.getGridEl().id;
- var groupField = this.getGroupField();
- var colIndex = this.cm.findColumnIndex(groupField);
- var cfg = this.cm.config[colIndex];
- var groupRenderer = cfg.groupRenderer || cfg.renderer;
- var gtext = this.getGroup(value, {data:{}}, groupRenderer, 0, colIndex, this.ds);
- return gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(value);
+ var field = this.getGroupField();
+ return this.constructId(value, field, this.cm.findColumnIndex(field));
+ },
+
+ // private
+ constructId : function(value, field, idx){
+ var cfg = this.cm.config[idx],
+ groupRenderer = cfg.groupRenderer || cfg.renderer,
+ val = (this.groupMode == 'value') ? value : this.getGroup(value, {data:{}}, groupRenderer, 0, idx, this.ds);
+
+ return this.getPrefix(field) + Ext.util.Format.htmlEncode(val);
+ },
+
+ // private
+ canGroup : function(){
+ return this.enableGrouping && !!this.getGroupField();
+ },
+
+ // private
+ getPrefix: function(field){
+ return this.grid.getGridEl().id + '-gp-' + field + '-';
},
// private
@@ -452,7 +513,7 @@ var grid = new Ext.grid.GridPanel({
// private
getRows : function(){
- if(!this.enableGrouping){
+ if(!this.canGroup()){
return Ext.grid.GroupingView.superclass.getRows.call(this);
}
var r = [];
@@ -468,10 +529,10 @@ var grid = new Ext.grid.GridPanel({
// private
updateGroupWidths : function(){
- if(!this.enableGrouping || !this.hasRows()){
+ if(!this.canGroup() || !this.hasRows()){
return;
}
- var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth-this.scrollOffset) +'px';
+ var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth-this.getScrollOffset()) +'px';
var gs = this.getGroups();
for(var i = 0, len = gs.length; i < len; i++){
gs[i].firstChild.style.width = tw;
@@ -503,14 +564,7 @@ var grid = new Ext.grid.GridPanel({
// private
onBeforeRowSelect : function(sm, rowIndex){
- if(!this.enableGrouping){
- return;
- }
- var row = this.getRow(rowIndex);
- if(row && !row.offsetParent){
- var g = this.findGroup(row);
- this.toggleGroup(g, true);
- }
+ this.toggleRowIndex(rowIndex, true);
}
});
// private