javascriptextjsextjs4extjs4.2

How can I get the ExtJs RowExpander to only show the icon ([+]) on certain rows?


I am using the RowExpander to display additional information about each row in a grid. Some of the rows do not have any additional information. For those rows, How can I get the expand icon (plus sign) to not be rendered? Is there a function that can be used like a filter?

I have seen a similar question on here that says there is a function called renderer(), but I tried that and it does not get called.


Solution

  • I came up with a solution to the problem. I extended the RowExpander pluging and copy and pasted the getHeaderConfig function into my new plugin. This allowed me to make the necessary changes to the renderer function to check if each record has anything to display in the rowBody/rowExpander

    Ext.define('MyApp.plugins.RowExpander', {
        extend: 'Ext.grid.plugin.RowExpander',
        alias: 'plugin.rowexpanderplus',
        getHeaderConfig: function () {
            var me = this;
    
            return {
                width: 24,
                lockable: false,
                sortable: false,
                resizable: false,
                draggable: false,
                hideable: false,
                menuDisabled: true,
                tdCls: Ext.baseCSSPrefix + 'grid-cell-special',
                innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-row-expander',
                renderer: function (value, metadata, record, a, b, store, grid) {
                    if (record.data.notes.length === 0) {
                        return '<div></div>';
                    }
    
                    // Only has to span 2 rows if it is not in a lockable grid.
                    if (!me.grid.ownerLockable) {
                        metadata.tdAttr += ' rowspan="2"';
                    }
                    return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander" role="presentation"></div>';
                },
                processEvent: function (type, view, cell, rowIndex, cellIndex, e, record) {
                    if (type == "mousedown" && e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-expander')) {
                        me.toggleRow(rowIndex, record);
                        return me.selectRowOnExpand;
                    }
                }
            };
        }
    });
    

    This is not what I wanted to do, but I looked at the source code for the plugin and I see no way to hook the renderer.