Google chrome ExtJS 4-chrome中的滚动条显示问题，谷歌地图实例和边框布局中的网格一起显示

我使用的是ExtJS4，我有一个带有边框布局的视口。中心区域包含面板，而南部区域包含栅格。当面板被渲染时，它的主体上会呈现一个google maps实例。我已使南部区域（网格）可折叠

这一切都很有效，看起来也不错，但当您塌陷南部区域时，网格的滚动条不会隐藏。当栅格为塌陷设置动画时，它们会暂时隐藏，但之后它们会重新出现。这个问题在Chrome中出现，但在Firefox中没有出现

有关示例，请参见my JSFIDLE：

如果取消对第82行的注释，从而阻止渲染贴图，则一切正常。所以肯定有一些与谷歌地图实例相关的东西把事情搞砸了，但我不知道它是什么。任何帮助都将不胜感激

编辑：下面是一个使用GMapPanel扩展的JSFIDLE:。滚动条问题仍然存在

谢谢

Ext.Loader.setConfig({
    enabled: true
});

Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.toolbar.Paging',
    'Ext.ModelManager',
    'Ext.tip.QuickTipManager']);

Ext.onReady(function () {
    Ext.tip.QuickTipManager.init();

    Ext.define('ForumThread', {
        extend: 'Ext.data.Model',
        fields: [
            'title', 'forumtitle', 'forumid', 'username', {
            name: 'replycount',
            type: 'int'
        }, {
            name: 'lastpost',
            mapping: 'lastpost',
            type: 'date',
            dateFormat: 'timestamp'
        },
            'lastposter', 'excerpt', 'threadid'],
        idProperty: 'threadid'
    });

    var store = Ext.create('Ext.data.Store', {
        pageSize: 50,
        model: 'ForumThread',
        proxy: {
            type: 'jsonp',
            url: 'http://www.sencha.com/forum/topics-browse-remote.php',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        height: 300,
        title: 'Grid in south panel - ' + Ext.getVersion().version,
        store: store,
        loadMask: true,
        columns: [{
            text: "Topic",
            dataIndex: 'title',
            width: 200
        }, {
            text: "Author",
            dataIndex: 'username',
            width: 300
        }, {
            text: "Replies",
            dataIndex: 'replycount',
            width: 370
        }, {
            text: "Last Post",
            dataIndex: 'lastpost',
            width: 650
        }],
        bbar: Ext.create('Ext.PagingToolbar', {
            store: store
        }),
        region: 'south',
        collapsible: true
    });

    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'center',
            title: 'Center panel',
            listeners: {
                boxready: function (t) {
                    //return; //uncomment this to prevent map from being added.  grid will then collapse correctly
                    var myOptions = {
                        zoom: 2,
                        center: new google.maps.LatLng(0, 0),
                        mapTypeId: google.maps.MapTypeId.TERRAIN
                    };
                    t.gmap = new google.maps.Map(t.body.dom, myOptions);
                },
                resize: function (t) {
                    if (Ext.isDefined(t.gmap)) {
                        google.maps.event.trigger(t.gmap, 'resize');
                    }
                }
            }
        },
        grid]
    });

    store.loadPage(1);
});

---

既然ExtJS已经有了一个javascript，为什么还要直接使用GoogleMapJavaScript呢？如果使用

Ext.ux.GMapPanel

，则无需侦听resize和boxready事件。GMAP类已经有

mapredy

和调整事件大小；如果需要使用google地图的本机事件，您可以通过以下方式使用它们： 让map的实例名为

myMap

，然后

myMap.gmap

是触发事件的原始映射

试用

items: [{
        region: 'center',
        title: 'Center panel',
        items : { xtype : 'gmappanel',
          center : {
          lat : 38.410558,
          lng : -98.525391
          }
         }
        }]

---

这里也有同样的问题，但我使用的不是GMap，而是一个显示网页的iframe。。。