CODEWITHSUNDEEP
javascriptextjs
user1268573
user1268573

Reputation:

How to disable collapsing in a grouped grid in ExtJS?

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 ?

Upvotes: 0

Views: 4514

Answers (4)

user2917540
user2917540

Reputation: 41

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.

Upvotes: 3

Abhi
Abhi

Reputation: 65

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);
}
...

Upvotes: 0

Rob Boerman
Rob Boerman

Reputation: 2168

Very nice Serg, thanks.

even easier for the override is:

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

Upvotes: 2

Serg
Serg

Reputation: 21

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; }

Upvotes: 2

Related Questions