An accordion layout inside a tab, inside a border layout gives me slider bars when the region is resized. Only happens in Chrome.

0
votes

I'm getting started on Ext using Ext JS 4 and I'm running with a strange behavior on Google Chrome. I have a viewport with a fit layout. Inside it, I have a panel with a border layout. It has a southern region, a western region, and a central region. The western region has a tabpanel, and inside the first tab I have an accordion panel.

The problem is that when I collapse a panel, or reduce the size of the western region, in Chrome I get evil slider bars. On firefox it works just fine, it only happens in Chrome. It doesn't happen when I'm on the tab 2 (the one that doesn't have the accordion panel). Any idea of what could be the problem?

These are pictures depicting the problem: http://imgur.com/a/vgbcE
Here is the source code: 

Ext.application({
    name: 'HelloExt',
    launch: function() 
    {
        var viewPort = Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            renderTo: 'layout'
        });

        var mainLayout = Ext.create('Ext.panel.Panel', {
            width: 'auto',
            layout: 'border',
            title : 'Gis Web',
            collapasible: true,
            defaults: {
                split: true,
                border: false,
                collapsible: true,
                manageOverflow: 2
            },
            items: [
                {
                    region: 'center',
                    collapsible: false,
                    id: 'center-panel',
                    border: true
                },
                {
                    id: 'south-panel',
                    region: 'south',
                    height: 100
                },
                {
                    id: 'west-panel',
                    region: 'west',
                    width: 200,
                    layout: 'fit'
                }
            ]
        });

        var accordionPanel = Ext.create('Ext.panel.Panel', {
            id: 'accordion-panel',
            layout: 'accordion',
            tabBar: {
                plain: true
            },
            border: false,
            items: [
                {
                    id: 'accordion-1',
                    title: '1'
                },
                {
                    title: '2'
                }
            ]
        });

        var tabPanel = Ext.createWidget('tabpanel', {
            activeTab: 0,
            defaults: {
                autoScroll: true,
                border: false
            },
            layout: 'fit',
            items: [
                {
                    id: 'tab-1',
                    title: 'Tab 1',
                    layout: 'fit'
                },
                {
                    layout: 'fit',
                    title: 'Tab 2'
                }
            ]
        });

        Ext.getCmp('tab-1').add(accordionPanel);

        var panel = Ext.getCmp('west-panel');
        panel.add(tabPanel);
        viewPort.add(mainLayout);
    }
});
1
extjs

1 Answers

2
votes

Try this for west panel :

                 {
                    id: 'west-panel',
                    region: 'west',
                    width: 200,
                    title: 'west panel',
                    xtype: 'tabpanel',
                    activeTab: 0,
                    defaults: {
                        //autoscroll removed !!! 
                        //autoScroll: true,
                        border: false
                    },
                    items: [
                        {
                            id: 'tab-1',
                            title: 'Tab 1',
                            layout: 'fit'
                        },
                        {
                            layout: 'fit',
                            title: 'Tab 2'
                        }
                    ]

                }