ExtJS display RowExpander on condition only

Question

I currently have a rather big Grid and am successfully using the RowExpander plugin to display complementary informations on certain rows. My problem is that it's not all rows that contain the aforementioned complementary informations and I do not wish the RowExpander to be active nor to show it's "+" icon if a particular data store's entry is empty. I tried using the conventional "renderer" property on the RowExpander object, but it did not work.

So basically, how can you have the RowExpander's icon and double click shown and activated only if a certain data store's field != ""?

Thanks in advance! =)

EDIT: I found a solution

As e-zinc stated it, part of the solution (for me at least) was to provide a custom renderer that would check my conditional field. Here is my RowExpander:

this.rowExpander = new Ext.ux.grid.RowExpander({
    tpl: ...
    renderer: function(v, p, record) {
                if (record.get('listeRetourChaqueJour') != "") {
                    p.cellAttr = 'rowspan="2"';
                    return '<div class="x-grid3-row-expander"></div>';
                } else {
                    p.id = '';
                    return '&#160;';
                }
    },
    expandOnEnter: false,
    expandOnDblClick: false
});

Now, the trick here is that for this particular Grid, I chose not to allow the expandOnEnter and expanOnDblClick since the RowExpander will sometimes not be rendered. Also, the CSS class of the grid cell that will hold the "+" icon is 'x-grid3-td-expander'. This is caused by the fact that the CSS class is automatically set to x-grid3-td-[id-of-column]. So, by setting the id to '' only when I'm not rendering the rowExpander, I'm also removing the gray background of the un-rendered cells. So, no double click, no enter, no icon, no gray-background. It really becomes as if there is strictly no RowExpander involved for the columns where my data store field is empty (when I want no RowExpander).

That did the trick for me. For someone that wishes to preserve the ID of the cell, or that wishes to keep the double click and enter events working, there is nothing else to do other than extending the class I guess. Hope this can help other people stuck in the position I was!

Answer 1

As e-zinc stated it, part of the solution (for me at least) was to provide a custom renderer that would check my conditional field. Here is my RowExpander:

this.rowExpander = new Ext.ux.grid.RowExpander({
    tpl: ...
    renderer: function(v, p, record) {
                if (record.get('listeRetourChaqueJour') != "") {
                    p.cellAttr = 'rowspan="2"';
                    return '<div class="x-grid3-row-expander"></div>';
                } else {
                    p.id = '';
                    return '&#160;';
                }
    },
    expandOnEnter: false,
    expandOnDblClick: false
});

Now, the trick here is that for this particular Grid, I chose not to allow the expandOnEnter and expandOnDblClick specifically since the RowExpander will sometimes not be rendered. Also, the CSS class of the grid cell that will hold the "+" icon is 'x-grid3-td-expander'. This is caused by the fact that the CSS class is automatically set to x-grid3-td-[id-of-column]. So, by setting the id to an empty string only when I'm not rendering the rowExpander, I'm also removing the gray background of the cells that won't offer any expanding. So, no double click, no enter, no icon, no gray-background. It really becomes as if there is strictly no RowExpander involved for the columns where my data store field is empty (when I want no RowExpander).

That did the trick for me. For someone that wishes to preserve the ID of the cell, or that wishes to keep the double click and enter events working, there is nothing else to do other than extending the RowExpander class in my opinion. Of course, one could also use Ext.override(), but then all instances of RowExpander would be hit by the override.