Scroll don't want to be displayed on grid.Panel automatically by clicking RowExpander

[baboen]

Hi,

I've this rendering problem since Ext 4.0.0. The problem is that, when I used the RowExpander plugin in the grids/panels. It do render an expander, which I can click the expander [+] and get the expanded elements opened. The opened expanded elements is usually very big and long, that it exceed the container's height (Ext.grid.Panel). If, I set autoScroll to true (in this grid panel config), logically it should add a scroll vertical scroll automatically. Unfortunately, it doesn't add vertical scroll.

But, on forcing the grid to "re-render" by clicking the collapse and after that the expand trigger button, also after a row has been expanded by clicking the expander [+]. It'll then add the vertical scroll and the whole things will just go very well.

I've tried to fire this function from firebug console: grid.showVerticalScroller(), just after expanding a row item, where there is no verticall scroll yet. But, it does nothing. I've also tried to hide grid.hideVerticalScroller() and re-show grid.showVerticalScroller(), still not working. But, after I do the "re-render" things which I've mentioned just now, and try to fire grid.hideVerticalScroller(), it's working and hiding the scroller. Then if I do grid.showVerticalScroller(), it'll open the scroller again.

This is my code:

Ext.define('Sfx.widgets.TicketHistoryDetail',{
    extend: 'Ext.grid.Panel',
    title: 'Ticket',
    height: 150,
    scroll:'vertical',
    autoScroll: true,
    collapsible: true,
    plugins: [{
            ptype: 'rowexpander',
            rowBodyTpl : [
                '<p><b>Comments:</b></p>',
                '<p>{comments}</p>'
            ],
            selectRowOnExpand: true
    }],
    constructor: function()
    {
        this.columns = [
            {text: 'Specialists', dataIndex: 'specialist'},
            {text: 'Actions', dataIndex: 'action', width: 50},
            {text: 'Timestamps', dataIndex: 'timestamp', width:190}
        ];
        
        this.callParent(arguments);
    },
    initComponent: function()
    {
        this.store = new Ext.data.Store({
            model: 'Sfx.models.Ticket',
            data:[
                {
                  specialist:'Dummy specialist1', 
                  action:'Create', timestamp:"10/21/2008 12:12:16",
                  suppressEmail:"checked"
                },
                { 
                  specialist:'Dummy specialist2', 
                  action:'Update', 
                  timestamp:"11/03/2011 05:02:52",
                  suppressEmail:'unchecked',
                  comments:"testtesttesttesttesttesttesttest\ntesttesttesttest"
                },
                {
                  specialist:'Dummy specialist1', 
                  action:'Update', 
                  timestamp:"15/03/2011 21:54:42"
                },
                { 
                  specialist:'Dummy specialist2', 
                  action:'Update', 
                  timestamp:"11/04/2011 05:02:52",
                  comments:"testtesttesttesttesttesttesttest\ntesttesttesttest"
                }
            ]
        });
        Sfx.widgets.TicketHistoryDetail.superclass.initComponent.call(this);
    }
}); 

I've tried to set the scroll to true,
scroll to both,
autoScroll to false,
and the whole things with the scrolling, I've also tried to put this.showVerticalScroller() in initComponent:function(), but the whole things just keep failing

[westy]

Just hit this issue myself. You find a solution to it?

[Carlos.D]

+1