0

我正在使用 Ext JS 4 开始使用 Ext，并且在 Google Chrome 上运行时出现了奇怪的行为。我有一个布局合适的视口。在其中，我有一个带有边框布局的面板。它有南部地区、西部地区和中部地区。西部地区有一个标签面板，在第一个标签内我有一个手风琴面板。

问题是当我折叠面板或减小西部区域的大小时，在 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 回答