Ext.js 4 Scroll bars on panel

Question

I know this has been asked before, but I am hoping that the workarounds I saw in earlier posts are before version 4. I am using version 4 with MVC architecture.

I have a servlet which returns a chunk of text which I want to display on a panel.

That panel is defined as follows:

Ext.define('MyApp.view.log.View' ,{
    extend: 'Ext.panel.Panel',
    alias : 'widget.logview',
    title : 'Log',

    id: 'log.View',

    layout: 'fit',
    autoscroll: true,

}); // end Ext.define

The returned text is added to the panel defined above as follows:

{
    xtype: 'button',
    text: 'Import',
    handler:  function()
    {
        Ext.Ajax.request({
            url: '/MyApp/Import',
            success: function(response)
            {
                var theText = response.responseText;
                var logPanel = Ext.getCmp('log.View');
                logPanel.insert(0, [ { xtype: 'box', autoEl: { cn: theText } } ] );
            }
        });  // end Ajax.request
    }  // end handler
}

I can't seem to get vertical scroll bars to work. I see that grid.Panel has a determineScrollbars method, but panel.Panel does not.

Any help is appreciated. Thanks in advance.

Solution 1

you can add config to the main panel scroll:true and autoScroll:true that is for alias : 'widget.logview'

Solution 2

The fit layout on the panel basically means that whatever you are going to add to the panel as it's child is going to take up all available space inside that panel. It also means that only one child component should be added to the panel with a fit layout. If the child element is going to 'fit' inside the parent panel then there is no need for scrollbars :)

You can try giving your panel some dimensions (height and width), remove the layout fit and see if that gives you what you want.