PDA

View Full Version : [FIXED-995] ColumnHeaderGroup interferes with GridFilters menu



tonedeaf
1 Jan 2010, 3:03 PM
An implementation of ColumnHeaderGroup plugin along with GridFilters interferes with GridFilters menus. Eg. if you specify a filter, the filter checkbox menu cannot be unchecked later. Also, it checks the filter checkboxes of other columns too.

After tracing this behavior, I narrowed it down to the following lines of ColumnHeaderGroup.js


handleHdMenuClick: function(item){
...
item.checked = !item.checked;
if(item.menu){
var updateChildren = function(menu){
menu.items.each(function(childItem){
if(!childItem.disabled){
childItem.setChecked(item.checked, false);
if(childItem.menu){
updateChildren(childItem.menu);
}
}
});
}
updateChildren(item.menu);
}
...

The highlighted line simply checks if the menu item has a submenu - this condition is met by the Filters menu item and then the function proceeds to forcibly check the Filters item!

This behavior would interfere with other plugins too which render themselves as a part of column header menu.

The correct behavior of handleHdMenuClick() function is that it should not touch other menu items except the "Columns" menu item and its nested submenu items.

Condor
2 Jan 2010, 12:10 AM
I would recommend:

Ext.apply(Ext.ux.grid.ColumnHeaderGroup.prototype.viewConfig, {
beforeColMenuShow: function(){
var cm = this.cm, rows = this.cm.rows;
this.colMenu.removeAll();
for(var col = 0, clen = cm.getColumnCount(); col < clen; col++){
var menu = this.colMenu, title = cm.getColumnHeader(col), text = [];
if(cm.config[col].fixed !== true && cm.config[col].hideable !== false){
for(var row = 0, rlen = rows.length; row < rlen; row++){
var r = rows[row], group, gcol = 0;
for(var i = 0, len = r.length; i < len; i++){
group = r[i];
if(col >= gcol && col < gcol + group.colspan){
break;
}
gcol += group.colspan;
}
if(group && group.header){
if(cm.hierarchicalColMenu){
var gid = 'group-' + row + '-' + gcol;
var item = menu.items ? menu.getComponent(gid) : null;
var submenu = item ? item.menu : null;
if(!submenu){
submenu = new Ext.menu.Menu({
itemId: gid
});
submenu.on("itemclick", this.handleHdMenuClick, this);
var checked = false, disabled = true;
for(var c = gcol, lc = gcol + group.colspan; c < lc; c++){
if(!cm.isHidden(c)){
checked = true;
}
if(cm.config[c].hideable !== false){
disabled = false;
}
}
menu.add({
itemId: gid,
text: group.header,
menu: submenu,
hideOnClick: false,
checked: checked,
disabled: disabled
});
}
menu = submenu;
}else{
text.push(group.header);
}
}
}
text.push(title);
menu.add(new Ext.menu.CheckItem({
itemId: "col-" + cm.getColumnId(col),
text: text.join(' '),
checked: !cm.isHidden(col),
hideOnClick: false,
disabled: cm.config[col].hideable === false
}));
}
}
},
handleHdMenuClick: function(item){
var index = this.hdCtxIndex, cm = this.cm, ds = this.ds, id = item.getItemId();
switch(id){
case 'asc':
ds.sort(cm.getDataIndex(index), 'ASC');
break;
case 'desc':
ds.sort(cm.getDataIndex(index), 'DESC');
break;
default:
if(id.substr(0, 6) == 'group-'){
var i = id.split('-'), row = parseInt(i[1], 10), col = parseInt(i[2], 10), r = this.cm.rows[row], group, gcol = 0;
for(var i = 0, len = r.length; i < len; i++){
group = r[i];
if(col >= gcol && col < gcol + group.colspan){
break;
}
gcol += group.colspan;
}
if(item.checked){
var max = cm.getColumnsBy(this.isHideableColumn, this).length;
for(var i = gcol, len = gcol + group.colspan; i < len; i++){
if(!cm.isHidden(i)){
max--;
}
}
if(max < 1){
this.onDenyColumnHide();
return false;
}
}
for(var i = gcol, len = gcol + group.colspan; i < len; i++){
if(cm.config[i].fixed !== true && cm.config[i].hideable !== false){
cm.setHidden(i, item.checked);
}
}
}else if(id.substr(0, 4) == 'col-'){
index = cm.getIndexById(id.substr(4));
if(index != -1){
if(item.checked && cm.getColumnsBy(this.isHideableColumn, this).length <= 1){
this.onDenyColumnHide();
return false;
}
cm.setHidden(index, item.checked);
}
}
if(id.substr(0, 6) == 'group-' || id.substr(0, 4) == 'col-'){
item.checked = !item.checked;
if(item.menu){
var updateChildren = function(menu){
menu.items.each(function(childItem){
if(!childItem.disabled){
childItem.setChecked(item.checked, false);
if(childItem.menu){
updateChildren(childItem.menu);
}
}
});
}
updateChildren(item.menu);
}
var parentMenu = item, parentItem;
while(parentMenu = parentMenu.parentMenu){
if(!parentMenu.parentMenu || !(parentItem = parentMenu.parentMenu.items.get(parentMenu.getItemId())) || !parentItem.setChecked){
break;
}
var checked = parentMenu.items.findIndexBy(function(m){
return m.checked;
}) >= 0;
parentItem.setChecked(checked, true);
}
item.checked = !item.checked;
}
}
return true;
}
});

tonedeaf
2 Jan 2010, 12:54 AM
Thanks Condor! the fixes are much appreciated.

sumit.madan
26 May 2010, 2:37 AM
These fixes have still not made it to the ColumnHeaderGroup ux in ExtJS 3.2.1

evant
20 Sep 2010, 8:30 AM
@Condor Thanks, this fix is now in SVN.