[SOLVED] RowExpander returns errors?

[mwmayer4]

I am trying to use Ext.ux.RowExpander (MVC style). The grid displays initially with the with the rows collapsed and the row expander icon is a '-', however the rowbodytpl is not displayed. When a row is double-clicked or when the icon is clicked I receive the error:
Uncaught TypeError: Cannot call method 'addCls' of null

Click on the row again and receive the error:
Uncaught TypeError: Cannot call method 'removeCls' of null

I must be missing some piece of the puzzle. I basically copied the code form the example docs (4.0.7)

Ext.define('GeneralIndex.view.IndexGrid', {
    extend: 'Ext.grid.Panel',
	alias: 'widget.indexgrid',
	
    requires: 'Ext.ux.RowExpander',

	initComponent: function() {
		var me = this;

		Ext.apply(me, {
			store: 'GeneralIndexs',
			forceFit: true,
			frame: true,
			autoScroll: true,
			stripeRows: true,
			viewConfig: {
				loadingText: 'Searching...',
				deferEmptyText: true,
				emptyText: '<br><br><br><br><center><b>***** No results found *****</b></center>'
			},
			plugins: [{
				ptype: 'rowexpander',
				rowBodyTpl: ['<p>Filed by: {FILEDBY}</p><br>', '<p>Delivered To: {DELIVERTO}</p>']
			}],
			tbar: me.buildTbar(),
			dockedItems: me.buildDockedItems(),
			columns: me.buildColumns()

		});

		me.callParent(arguments);
	},
        //......

[mwmayer4]

found a solution. the plugin config cannot be inside the initComponent.

Now I need to figure out what determines the column width of the "+" and "-" expand/collapse and how to change it.

[ThierryC]

have exactly the same issue

found a solution. the plugin config cannot be inside the initComponent.

Now I need to figure out what determines the column width of the "+" and "-" expand/collapse and how to change it.

did you already solved this.. if yes could you please share the solution... thx in advance

[eweiler]

In ExtJS 4.1.3 there is a private method on Ext.us.RowExpander called getHeaderConfig. It looks to me like this is using a hard coded width of 24. Perhaps overriding this may be worth a try.

    getHeaderConfig: function() {
        var me = this;

        return {
            id: me.getHeaderId(),
            width: 24,
            lockable: false,
            sortable: false,
            resizable: false,
            draggable: false,
            hideable: false,
            menuDisabled: true,
            cls: Ext.baseCSSPrefix + 'grid-header-special',
            renderer: function(value, metadata) {
                metadata.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
                return '<div class="' + Ext.baseCSSPrefix + 'grid-row-expander">&#160;</div>';
            },
            processEvent: function(type, view, cell, rowIndex, cellIndex, e, record) {
                if (type == "mousedown" && e.getTarget('.x-grid-row-expander')) {
                    me.toggleRow(rowIndex, record);
                    return me.selectRowOnExpand;
                }
            }
        };
    }

[ThierryC]

I still have an issue..

when using the the MVC structure coding, (as learned during the Cnx-course) i did the following..
the result is that the rowexpander always have a '-' sign, RowExpander.PNG

when changing the location where the plugin is defined (as was suggested by user mwmayer), i get an error on the rowexpander...

"Uncaught TypeError: Cannot call method 'insert' of undefined ".

Ext.define('cmqu10r.view.QuoteList',{
    extend : 'Ext.grid.Panel',
    alias : 'widget.quotelist',
    initComponent : function(){
        me = this;
        Ext.apply(this,{
            store : 'Quotes',
            trackMouseOver:false,
            stripeRows:true,
            defaults: {align:'right', labelAlign: 'right' },
            plugins: me.buildPlugins(),  
            columns : me.buildColumns(),
            bbar : me.buildDockedItems(),
            tbar : me.buildTbar()
        });
        me.callParent(arguments);
    },
    
    buildColumns : function(){
        return [
        {   
            header: "<b>Quote n�</b>",
            locked: false,	
            dataIndex: 'QHNQUOT',
            width: 50,	
            align:'right',
            sortable: false,
            hidden: true
	},
          {}......
        ];
    },
    
    buildDockedItems : function(){
        return [{
            xtype : 'pagingtoolbar',
            pageSize : 25,
            displayInfo : true,
            store : 'Quotes',
        	plugins: [new Valence.plugin.PagingToolbarSlider()]
        }];
    },
    
    buildTbar : function(){
        return [
            {
                text : 'Save layout',
                iconCls : 'book_add',
                itemId : 'savgrlayoutbutton'
            }, {
                text : 'Get layout',
                iconCls : 'book_go',
                itemId : 'getgrlayoutbutton'
            },'->',{
               text: 'view',
               iconCls : 'control_equalizer_blue',
               itemId : 'gridlayoutbutton'
            }
        ];
    },
    
    buildPlugins : function() {
        return [
            {
                ptype: 'rowexpander',
                rowBodyTpl: [
                        '<p><b>Company:</b> {QHXKLNT}</p>',
                        '<p><b>Summary:</b> {QQUVKPE}</p>']
            }, {
                ptype: "rowediting", 
                clicksToEdit: 2
            }            
        ];
    }
        
});

[eweiler]

Maybe it is a timing issue, from trying to add the row expander before the columns are defined.

Can you get a specific line that the error is triggered from?