PDA

View Full Version : How to get GroupingView expanding and selecting to work in 3.3?



RickardP
6 Sep 2010, 12:40 AM
I have a problem, the event for GroupingView that was named "interceptMouse" has been removed in ExtJS 3.3, its is there in 3.2 but not in 3.3.

This does that i can not check where the click on the group view was clicked,with "interceptMouse" i could get the html element clicked on but now when i using "processEvent" i can not get this.

What i whant is on the +/- icon its should expand/collapse and when clicking on the name its should select all items in the group.

Someone that has a solution for this?

Condor
6 Sep 2010, 1:07 AM
Why could you not use processEvent instead of interceptMouse?

The only difference is that you need to check if name == 'mousedown' before evaluating the event target.

RickardP
6 Sep 2010, 1:10 AM
With interceptMouse i could do a check like this:

if (element.nodeName === "SPAN") {

Thats i can not do in processEvent, i think, i hase done some console.log and so on to debug processEvent and can not find anything about html element.

Condor
6 Sep 2010, 1:25 AM
So you want something like:

view: new Ext.grid.GroupingView({
processEvent: function(name, e){
if (name == 'mousedown') {
var titleEl = e.getTarget('.x-grid-group-title', this.mainBody);
if (titleEl) {
var hd = titleEl.parentNode,
field = this.getGroupField(),
prefix = this.getPrefix(field),
groupValue = hd.id.substring(prefix.length),
emptyRe = new RegExp('gp-' + Ext.escapeRe(field) + '--hd');
groupValue = groupValue.substr(0, groupValue.length - 3);
// select all records in group 'groupValue'
return;
}
}
this.constructor.prototype.processEvent.call(this, name, e);
}
})

RickardP
6 Sep 2010, 5:03 AM
Thanks for the help but with your code its trigger on the whole row, but with this code i check if it is the span with right class or not:

// Check if it is left mouse button down
if (name == 'mousedown' && e.button == 0) {
var titleEl = e.getTarget('.grouping-header', this.mainBody);
if (titleEl) {
this.triggerSelect = true;
return Ext.emptyFn;
}
else {
this.toggleGroup(hd.parentNode);
}
}

So this works good