PDA

View Full Version : Extend GroupingView problems after updated to ExtJS 3.3



RickardP
31 Aug 2010, 1:43 AM
I have extended GroupingView for a Gridpanel that using grouping.

Before i changed to ExtJS 3.3 i got my extendend groupingview to select the whole group of items but now after update i only get it to close or open the group when clicking on the group name.

This code is what i using to extend the grouping view:


Ext.ux.ExtendedGroupingView = Ext.extend(Ext.grid.GroupingView, {
'initComponent': function(config) {
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ext.ux.ExtendedGroupingView.superclass.initComponent.apply(this, arguments);
}

});

Ext.override(Ext.ux.ExtendedGroupingView, {
interceptMouse: function(e, element) {
if (element.nodeName === "SPAN") {
this.triggerSelect = true;
return Ext.emptyFn;
}

this.triggerSelect = false;

var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
if (hd) {
this.toggleGroup(hd.id.replace(/-hd/, ''));
}

return true;
}
});

Someone that get some idea of whats can be differents from older ExtJS to ExtJS 3.3 ?

laurentParis
31 Aug 2010, 1:56 AM
first,

initcomponent don't have any arguments, you would certainly used contructor.
but in the same time, I'm seeing any interest to do :


Ext.ux.ExtendedGroupingView = Ext.extend(Ext.grid.GroupingView, {
'initComponent': function(config) {
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ext.ux.ExtendedGroupingView.superclass.initComponent.apply(this, arguments);
}
});

I miss somthing certainly )

If you override "interceptMouse" method, are you verify that this method doesn't change ?
Actualy, when I'm looking src files for Ext3.2.1



// private
interceptMouse : function(e){
var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
if(hd){
e.stopEvent();
this.toggleGroup(hd.parentNode);
}
},


Check

RickardP
31 Aug 2010, 3:04 AM
After searching in the code for ExtJS 3.3 i has changed the interceptMouse ovveriding to this:


Ext.override(Ext.ux.ExtendedGroupingView, {
processEvent: function(name, e){
console.log('processEvent');
Ext.grid.GroupingView.superclass.processEvent.call(this, name, e);
var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
if(hd){

var 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);


if(groupValue || emptyRe.test(hd.id)){
this.grid.fireEvent('group' + name, this.grid, field, groupValue, e);
}
if(name == 'mousedown' && e.button == 0){
this.triggerSelect = true;
return Ext.emptyFn;
//this.toggleGroup(hd.parentNode);
}
}

}
});

Its works to select the whole group but know i dont can click on the +/- to toggle the group so more modifications needed here.

christian130
31 Aug 2010, 6:14 AM
richardP have u hint with the solution?

RickardP
31 Aug 2010, 6:19 AM
I did not have any good solution, i have for now done so right click is toggle colapse functionality to later on fix this if i find any solution.