Javascript “我怎样才能适应？”；ol.Map“；至；Ext.panel.panel"；？

我正在用MVVM架构中的

extjs6.0

和

OpenLayers 3.6.0

开发一个web gis。我想把

ol.map

放到

Ext.panel.panel

上。本项目主要视图如下：

Ext.define('MyApp2.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'MyApp2.view.main.MainController',
        'MyApp2.view.main.MainModel'
    ],
    xtype: 'app-main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
    layout: {
        type: 'border'
    },
    items: [{
            xtype: 'panel',
            bind: {
                title: '{name}'
            },
            region: 'west',
            html: 'its me! - West Panel',
            width: 125,
            minWidth: 100,
            maxWidth: 250,

        }, {
            xtype: 'panel',
            region: 'center',
            collapsible: false,
            html: '<div id="map" class="map"></div>',
            listeners: {
                beforerender: 'beforerender',
                afterrender: 'afterrender'
            }
        }]
});

代码没有给出任何错误，但当我运行它时，一切都很好，除了当我想放大地图时，它会放大另一个地方。见下图： 这个bug一直保持稳定，直到我在

index.html

文件中定义follow

css

：

<style>
.map {
    height: 600px;
    width: 600px;
}
</style>

.地图{
高度：600px；
宽度：600px；
}

此

css

将

ol.map

放入

600x600

框中，但我希望

ol.map

适合

Ext.panel

---

我该怎么办？

ol.map类必须位于特定的高度和宽度组件中。唯一需要的是带有

afterlayout

事件的初始

ol.map

您可以在版本4.2上使用

Ext.Container

的

boxready

事件，如中所建议，其中建议使用以下代码：

th.items = [
    Ext.create('Ext.Component', {
        initComponent: function () {
            var me = this;
            th.mapContainerId = me.id;
            me.on("boxready", function () {
                th.initMap();
            });
            me.on("resize", function () {
                if (th.mapInst) {
                    th.mapInst.updateSize();
                }
            });
            me.callParent(arguments);
        }
    })
];

---

提供一些文档链接！你会做小提琴吗？在后渲染处理程序中，在声明贴图变量后，是否可以根据面板尺寸设置贴图高度和宽度？该面板通常作为第一个参数最终传入afterrender。我在使用GoogleMaps时也做过类似的事情，GoogleMapsAPI还允许您触发一个调整大小事件，告诉它根据其包含的元素调整大小，例如示例中的面板。你能在这里用OL api做类似的事情吗？谢谢你的回复，

OL.map

必须用

afterlayout

事件初始化。我有类似的问题，但我不理解你的解决方案。在

afterlayout

事件中执行什么操作？在

afterlayout

处理程序中创建

ol.map

。必须首先配置

面板

，然后将地图实例放在面板上。请看@trincot，谢谢你的建议，我对在这里写asnwers还不熟悉，我有纯英语

th.items = [
    Ext.create('Ext.Component', {
        initComponent: function () {
            var me = this;
            th.mapContainerId = me.id;
            me.on("boxready", function () {
                th.initMap();
            });
            me.on("resize", function () {
                if (th.mapInst) {
                    th.mapInst.updateSize();
                }
            });
            me.callParent(arguments);
        }
    })
];