Question

我有'border'类型的布局，在'center'面板中我有一个MapPanel。我想用下面的代码显示一个无模式弹出窗口。它工作正常，我可以拖动和调整大小。

但是在调整大小时，如果我在弹出区域外（以及MapPanel区域内）拖动鼠标，那么我将失去对此动作的控制（表示弹出边框的虚线消失）。但是如果我坚持拖动MapPanel区域外的“西”或“南”面板，那么我将再次控制这个动作（出现虚线）。我认为MapPanel在鼠标悬停时会得到鼠标控制权。这种行为让弹出窗口仍然可以调整，但有点乏味。

如果我在显示弹出窗口时禁用MapPanel，则调整大小效果很好，但这不是我想要的。我想显示一个无模式弹出窗口。

任何解决方法的任何想法？...

var mapPanel = Ext.ComponentQuery.query('viewMapPanel')[0];
Ext.create('GeoExt.window.Popup', {
    map: mapPanel.map,
    title: 'test',

    frame: true,
    border: false,
    resizable: true,        
    draggable: true,
    closable: true,

  height: 400,
  width: 200,

  shadow: true,
  shadowOffset: 20,

  //modal:true


}).show();

Answer 1

从未使用过GeoExt。但是我使用了http://code.betancourt.us/ext-map/和xtype：＆＃39; gmappanel＆＃39;成功。您可以使用常规的Ext.window进行布局：＆＃39; fit＆＃39;，items：{map}并且它没有这些问题。我认为你可以做同样的事情而不是使用GeoExt只需使用Ext.create（＆＃39; Ext.window.Window＆＃39;，{并让它弹出一个常规窗口你可以选择一个布局然后把它放你的mapPanel在项目中。

 var map = Ext.create('Ext.window.Window', {
        title: 'I love Maps',
        collapsible: true,
        animCollapse: true,
        maximizable: true,
        width: 950,
        height: 600,
        minWidth: 200,
        minHeight: 200,
        layout: 'fit',
        items: [{mapPanel}],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            ui: 'footer',
            layout: {
                pack: 'center'
            },
            items: [{
                minWidth: 80,
                text: 'Close',
                xtype: 'button'

            }]
        }]
    });
    map.show();

Answer 2

我假设您将自定义OpenLayers地图移交给GeoExt地图面板而不是使用默认地图。将property "fallThrough" of that map设置为true，以允许冒泡事件。

var map = new OpenLayers.Map({
    fallThrough: true
});

MapPanel上的弹出窗口很难手动调整大小

2 个答案: