1. #1
    Sencha User
    Join Date
    Mar 2011
    Location
    Munich, Germany
    Posts
    37
    Vote Rating
    1
    baboen is on a distinguished road

      0  

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

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


    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:
    PHP Code:
    Ext.define('Sfx.widgets.TicketHistoryDetail',{
        
    extend'Ext.grid.Panel',
        
    title'Ticket',
        
    height150,
        
    scroll:'vertical',
        
    autoScrolltrue,
        
    collapsibletrue,
        
    plugins: [{
                
    ptype'rowexpander',
                
    rowBodyTpl : [
                    
    '<p><b>Comments:</b></p>',
                    
    '<p>{comments}</p>'
                
    ],
                
    selectRowOnExpandtrue
        
    }],
        
    constructor: function()
        {
            
    this.columns = [
                {
    text'Specialists'dataIndex'specialist'},
                {
    text'Actions'dataIndex'action'width50},
                {
    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

  2. #2
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    840
    Vote Rating
    39
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Just hit this issue myself. You find a solution to it?
    Product Architect
    Altus Ltd.

  3. #3
    Sencha Premium Member Carlos.D's Avatar
    Join Date
    Nov 2011
    Location
    Luxembourg
    Posts
    38
    Vote Rating
    1
    Carlos.D is on a distinguished road

      0  

    Default


    +1

Thread Participants: 2