0

Ext JS 4を使用してExtを使い始めましたが、GoogleChromeで奇妙な動作をしています。フィットレイアウトのビューポートがあります。その中に、ボーダーレイアウトのパネルがあります。南部地域、西部地域、中央地域があります。西部にはタブパネルがあり、最初のタブの中にはアコーディオンパネルがあります。

問題は、パネルを折りたたんだり、西部地域のサイズを縮小したりすると、Chromeで邪悪なスライダーバーが表示されることです。Firefoxでは問題なく動作します。Chromeでのみ発生します。私がタブ2（アコーディオンパネルがないタブ）にいるときは起こりません。何が問題になるのかについて何か考えはありますか？

これらは問題を描いた写真です：http：//imgur.com/a/vgbcE
ソースコードは次のとおりです。

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);
    }
});
4

1 に答える 1

2

西のパネルにこれを試してください：

                 {
                    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'
                        }
                    ]

                }
于 2012-10-19T12:56:21.300 に答える