PDA

View Full Version : Link in grouping header doesn't work



Baidaly
24 Feb 2015, 9:09 AM
Hello,

I have a requirement to show a link in GroupTpl. However, it seems that for some reason grouping swallows all mouse click events. I think if a developer puts a link in the group header template, it shall work as a link.

Here's example: https://fiddle.sencha.com/#fiddle/io0

glopes
24 Feb 2015, 2:58 PM
Override the vetoEvent method of your grouping feature



features: [{
ftype:'grouping',
groupHeaderTpl: ['<a href="http://sencha.com">Link</a>'],
vetoEvent: function(record, row, rowIndex, e) {
// Do not veto mouseover/mouseout or mousedown if clicks on a Link
if ((e.type == 'mousedown' && !~e.target.indexOf('Link')) && e.type !== 'mouseover' && e.type !== 'mouseout' && e.type !== 'mouseenter' && e.type !== 'mouseleave' && e.getTarget(this.eventSelector)) {
return false;
}
}
}]

Baidaly
25 Feb 2015, 6:40 AM
Thank you @glopes!

I wrote the following overriding based on your answer:


Ext.define('Override.grid.feature.Grouping', {
override: 'Ext.grid.feature.Grouping',

vetoEvent: function (record, row, rowIndex, e) {
// Do not veto mouseover/mouseout or mousedown if clicks on a Link
if ((e.type === 'mousedown' && !e.getTarget('a')) && e.type !== 'mouseover' && e.type !== 'mouseout' && e.type !== 'mouseenter' && e.type !== 'mouseleave' && e.getTarget(this.eventSelector)) {
return false;
}
}
});

Baidaly
4 Mar 2015, 12:17 PM
One thing is strange. For some reason this approach doesn't work for GroupingSummary. It just doesn't do anything. Am I missing something?


Ext.define('Override.grid.feature.GroupingSummary', {

override: 'Ext.grid.feature.GroupingSummary',

vetoEvent: function(record, row, rowIndex, e){
var result = this.callParent(arguments);

if (e.type === 'mousedown' && e.getTarget('a')) {
return true;
}

if (result !== false && e.getTarget(this.summaryRowSelector)) {
result = false;
}
return result;
}
});

glopes
4 Mar 2015, 4:23 PM
Change your override to:



Ext.define('Override.grid.feature.GroupingSummary', {

override: 'Ext.grid.feature.GroupingSummary',

vetoEvent: function(record, row, rowIndex, e){
var result = this.callParent(arguments);

if (e.getTarget('a')) {
result = true;
}


if (result !== false && e.getTarget(this.summaryRowSelector)) {
result = false;
}
return result;

}
});

Baidaly
5 Mar 2015, 11:25 AM
Thank you but it doesn't work. I tried to debug and it seems that event should be fired but were stopped somewhere else.

glopes
5 Mar 2015, 8:17 PM
Seems to be working here, the only difference is that the collapse event is still fired.

j83