View Full Version : remove + and - icon in row expander

24 Jan 2014, 1:38 AM

In extjs4.2 Is there any way I can remove + and - icon in certain rows based on some condition.Basically there will be no option to expand/collapse that row.


//hide icons(+ and -) in this rows
// continue with default behavior

Any ExtJS expert help on this.

24 Jan 2014, 2:46 AM
I suspect the easiest way is to add a CSS class to the row using getRowClass. Then just use CSS to hide the +/-.

Alternatively, you could try tweaking the renderer in the getHeaderConfig of RowExpander.

24 Jan 2014, 3:06 AM
Can you please paste the css code? I tried returning the below class in getRowClass but it did not work. .my-grid { .grid-row-expander & { background-image: none !important; } .x-grid-row-collapsed & { background-image: none !important; } }

24 Jan 2014, 3:20 AM
It'd be something like this:

getRowClass: function() {
// Add logic here to return the class only when required
return 'blah';

.blah .x-grid-row-expander {
visibility: hidden;

The +/- will be gone but you'd still need to disable expanding on enter key or double click. If you don't want to turn those off for all rows you might want to consider an override of toggleRow.

24 Jan 2014, 4:02 AM
hi skirtle....thanks for the code.Still it did not work.

24 Jan 2014, 4:10 AM
Which bit doesn't work? Is the CSS class being added to the row? Are you putting getRowClass in the right place (i.e. on the view)?

24 Jan 2014, 4:23 AM
hey I am so sorry!!!!!! It worked actually.I had to compile the scss file.Thanks for the help.

26 Feb 2014, 4:18 PM
I have overriden row expander plugin with below code.
From below code, I see issue at <evalExpander method>, not able to get Cell object from Store record.

Please check this fiddle- working for EXTJS4.1.0 docs.
Make this fiddle works using EXTJS4.2.

Code :
init: function (grid) {
var me = this;
me.grid = grid;
grid.on('viewready', me.evalExpander, me);
grid.getStore().on('datachanged', me.evalExpander, me);

* @method
* evaluate row expander style based on valid column value
evalExpander: function () {
var me = this;
var grid = me.grid;
var cell, ex;

//TODO - Please check this logic not working with EXTJS4.2 docs
grid.getStore().each(function (rec) {
cell = grid.view.getCell(rec, grid.down('headercontainer').items.getAt(0));
ex = Ext.get(cell).down('.' + Ext.baseCSSPrefix + 'grid-row-expander');
if (true) {
ex.removeCls(Ext.baseCSSPrefix + 'grid-row-expander');

11 Nov 2015, 4:30 AM
wellsfargouser (https://www.sencha.com/forum/member.php?658161-wellsfargouser) Good example, but there is no need for

As mentioned by skirtle (https://www.sencha.com/forum/member.php?197255-skirtle) it is better to use rowClass:

In grid viewConfig:

getRowClass: function (record, rowIndex, rowParams, store) { var htmlFormatedData= record.get('htmlFormatedData');
if (htmlFormatedData== null) {
return 'hide-row-expander';

In app.css:

.hide-row-expander .x-grid-row-expander {visibility: hidden;

in app.util folder:

Ext.define('app.util.RowExpander', {
extend: 'Ext.grid.plugin.RowExpander',
alias: 'plugin.myexpander',

init: function (grid) {
var me = this;
me.grid = grid;

requiredFields: ['htmlFormatedData'],

hasRequiredFields: function (rec) {
var valid = false;
Ext.each(this.requiredFields, function (field) {
if (!Ext.isEmpty(rec.get(field))) {
valid = true;
return valid;

toggleRow: function (rowIdx, record) {
var me = this, rec;
rec = Ext.isNumeric(rowIdx)? me.view.getStore().getAt(rowIdx) : me.view.getRecord(rowIdx);
if (me.hasRequiredFields(rec)) {

works for EXTJS 5! here is the fiddle: https://fiddle.sencha.com/#fiddle/10ta