📄 groupingview.js
字号:
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');
},
/**
* Toggles all groups if no value is passed, otherwise sets the expanded state of all groups to the value passed.
* @param {Boolean} expanded (optional)
*/
toggleAllGroups : function(expanded){
var groups = this.getGroups();
for(var i = 0, len = groups.length; i < len; i++){
this.toggleGroup(groups[i], expanded);
}
},
/**
* Expands all grouped rows.
*/
expandAllGroups : function(){
this.toggleAllGroups(true);
},
/**
* Collapses all grouped rows.
*/
collapseAllGroups : function(){
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);
if(g === ''){
g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText;
}
return g;
},
// private
getGroupField : function(){
return this.grid.store.getGroupState();
},
// private
renderRows : function(){
var groupField = this.getGroupField();
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) {
this.mainBody.update('');
this.cm.setHidden(this.cm.findColumnIndex(this.lastGroupField), false);
delete this.lastGroupField;
}else if (eg && this.lastGroupField === undefined) {
this.lastGroupField = groupField;
this.cm.setHidden(colIndex, true);
}else if (eg && this.lastGroupField !== undefined && groupField !== this.lastGroupField) {
this.mainBody.update('');
var oldIndex = this.cm.findColumnIndex(this.lastGroupField);
this.cm.setHidden(oldIndex, false);
this.lastGroupField = groupField;
this.cm.setHidden(colIndex, true);
}
}
return Ext.grid.GroupingView.superclass.renderRows.apply(
this, arguments);
},
// private
doRender : function(cs, rs, ds, startRow, colCount, stripe){
if(rs.length < 1){
return '';
}
var groupField = this.getGroupField();
var colIndex = this.cm.findColumnIndex(groupField);
this.enableGrouping = !!groupField;
if(!this.enableGrouping || 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 groups = [], curGroup, i, len, gid;
for(i = 0, len = rs.length; i < len; i++){
var rowIndex = startRow + i;
var 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' : '';
curGroup = {
group: g,
gvalue: gvalue,
text: prefix + g,
groupId: gid,
startRow: rowIndex,
rs: [r],
cls: gcls,
style: gstyle
};
groups.push(curGroup);
}else{
curGroup.rs.push(r);
}
r._groupId = gid;
}
var buf = [];
for(i = 0, len = groups.length; i < len; i++){
var g = groups[i];
this.doGroupStart(buf, g, cs, ds, colCount);
buf[buf.length] = Ext.grid.GroupingView.superclass.doRender.call(
this, cs, g.rs, ds, g.startRow, colCount, stripe);
this.doGroupEnd(buf, g, cs, ds, colCount);
}
return buf.join('');
},
/**
* Dynamically tries to determine the groupId of a specific value
* @param {String} value
* @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);
},
// private
doGroupStart : function(buf, g, cs, ds, colCount){
buf[buf.length] = this.startGroup.apply(g);
},
// private
doGroupEnd : function(buf, g, cs, ds, colCount){
buf[buf.length] = this.endGroup;
},
// private
getRows : function(){
if(!this.enableGrouping){
return Ext.grid.GroupingView.superclass.getRows.call(this);
}
var r = [];
var g, gs = this.getGroups();
for(var i = 0, len = gs.length; i < len; i++){
g = gs[i].childNodes[1].childNodes;
for(var j = 0, jlen = g.length; j < jlen; j++){
r[r.length] = g[j];
}
}
return r;
},
// private
updateGroupWidths : function(){
if(!this.enableGrouping || !this.hasRows()){
return;
}
var tw = Math.max(this.cm.getTotalWidth(), this.el.dom.offsetWidth-this.scrollOffset) +'px';
var gs = this.getGroups();
for(var i = 0, len = gs.length; i < len; i++){
gs[i].firstChild.style.width = tw;
}
},
// private
onColumnWidthUpdated : function(col, w, tw){
Ext.grid.GroupingView.superclass.onColumnWidthUpdated.call(this, col, w, tw);
this.updateGroupWidths();
},
// private
onAllColumnWidthsUpdated : function(ws, tw){
Ext.grid.GroupingView.superclass.onAllColumnWidthsUpdated.call(this, ws, tw);
this.updateGroupWidths();
},
// private
onColumnHiddenUpdated : function(col, hidden, tw){
Ext.grid.GroupingView.superclass.onColumnHiddenUpdated.call(this, col, hidden, tw);
this.updateGroupWidths();
},
// private
onLayout : function(){
this.updateGroupWidths();
},
// 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);
}
},
/**
* @cfg {String} groupByText Text displayed in the grid header menu for grouping by a column
* (defaults to 'Group By This Field').
*/
groupByText: 'Group By This Field',
/**
* @cfg {String} showGroupsText Text displayed in the grid header for enabling/disabling grouping
* (defaults to 'Show in Groups').
*/
showGroupsText: 'Show in Groups'
});
// private
Ext.grid.GroupingView.GROUP_ID = 1000;
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -