Question

I have an ExtJS 4 grid with GroupingSummary Feature. ExtJs Default is grid is expanded when user clicks on any cell in grouping row. I want to disable this feature, no expansion should take place except when user clicks on designated ‘expand’ icon. How do I accomplish this?
There is the ‘groupclick’ event, is there a way to override its default behaviour and do nothing / remove it?
Thanks in advance

Answer 1

The method for it appears to be inherited from Grouping rather than GroupingSummary, so I suspect you need to override this method to prevent the current behaviour:

    onGroupClick: function(view, group, idx, foo, e) {
    var me = this,
        toggleCls = me.toggleCls,
        groupBd = Ext.fly(group.nextSibling, '_grouping');

    if (groupBd.hasCls(me.collapsedCls)) {
        me.expand(groupBd);
    } else {
        me.collapse(groupBd);
    }

So you will need another file with something similar to the following:

Ext.require('Ext.grid.Grouping');
Ext.define('your.class.here', {
override: 'Ext.grid.Grouping',

  onGroupClick: function() {
     //do nothing
  });
)};

Then you should be able to write a function that mimicks it was doing on groupclick, but instead on your icon click. Hope that helps.