如何禁用在ExtJS的一个分组网格崩溃？

Question

Everything's in the subject. I have a grouped grid, like this Sencha example . I would like to remove the [+][-] signs in order to disable collapsing.

I thought there would be some config for the grouping feature, something like 'collapsible: false', but there is not any.

Any ideas please ?

Answer 1

Use configuration to disable collapse config property. From Sencha:

collapsible : Boolean

Set to false to disable collapsing groups from the UI.

This is set to false when the associated store is buffered.

Defaults to: true

Source: Sencha Documentation of the collapsible configuration .

Answer 2

You can inherit Ext.grid.feature.Grouping and redefine onGroupClick method. It's not good but the simplest way for now:

Ext.define( 'My.grid.feature.RightsGrouping', {
extend: 'Ext.grid.feature.Grouping',

   onGroupClick: function(view, group, idx, foo, e) {
   }
});

Also you'll have to edit CSS to remove collapse sign and change cursor pointer:

  .x-grid-group-hd .x-grid-cell-inner { cursor: default; }
  .x-grid-group-title { background-image: none; }

Answer 3

Very nice Serg, thanks.

even easier for the override is:

... 
features: [
    Ext.create('Ext.grid.feature.Grouping',{ 
        onGroupClick: function() {} /* do nothing! */ 
    })
]
...

Answer 4

This was not working in 4.2.1.

Figured out a solution seemed very funny to me

...
groupcollapse: 
{
         fn: me.onGroupingGroupcollapse,
         scope: me
}
...
...

onGroupingGroupcollapse: function(view, node, group, eOpts) 
{
        Ext.getCmp('gridCenters').view.features[0].expand(node.name,true);
}
...