Question

我有一个简单的窗口，弹出mouseover图标，并在mouseover完成后关闭。图标代表openlayers地图上的车辆位置。

我在mouseover（速度，位置，状态）上显示当前在地图上当前位置的车辆的某些详细信息。

this.dialog = new Ext.Window({
    title: 'Vehicle Info',
    layout: 'fit',
    closeAction: 'hide',
    height: 180,
    width: 120,
    plain: true,
    items: [{
        border: false,
        bodyStyle: {
            padding: 5,
            fontSize: 13
        },
        html: ''
    }]
});

然后我在listeners

上设置了mouseover

this.map.on('pointermove', function(e) {
    var i, features = this.map.getFeaturesAtPixel(e.pixel, {
        layerFilter: function(layer) {
            return !layer.get('name');
        }
    });
    if (features) {
        for (i = 0; i < features.length; i++) {
            this.fireEvent('showPopUp', features[i]);
        }
    } else {
        this.fireEvent('closePopUp');
    }
}, this);

关闭和显示窗口的两种方法在控制器类中如下。

showPopUp: function(feature) {
    var html, record = feature.get('record');
    if (record) {
        if (record instanceof Example.Device) {
            html = '<p> Reg: ' + record.get('id') + '</p><p>Status:' + record.get('status') + '</p> <p>Last Update:' + record.get('lastUpdate') + '</p>';
            this.getView().getDialog().update(html);
            this.getView().getDialog().show();
        }
    }
},

和

closePopUp: function() {
    this.getView().getDialog().close();
},

窗口确实显示但它完全是空的。只是一个白色的背景。我正在使用基本的海王星主题，所以我怀疑它是否是字体颜色问题。

这是它的出现方式。 Screenshot

我可能忘记了什么？

我试过了两次

this.getView().getDialog().update(html);
this.getView().getDialog().html = (html);

Answer 1

我可能忘记了什么？

您需要更新html中的panel而不是window。

//This is your item of window as you taken inside window.
this.dialog.down('panel').update(html)

您可以签入此 FIDDLE 。希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.panel.Panel', {

            title: 'Map Example',

            layout: 'fit',

            height: window.innerHeight,

            html: '<div style="height: 100%;" id="map"></div>',

            renderTo: Ext.getBody(),

            listeners: {
                afterrender: function (panel) {
                    /**
                     * Create the map.
                     */
                    panel.map = new ol.Map({
                        layers: [
                            new ol.layer.Tile({
                                source: new ol.source.TileJSON({
                                    url: '//api.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy.json?secure',
                                    crossOrigin: 'anonymous'
                                })
                            })
                        ],

                        target: 'map',

                        view: new ol.View({
                            center: [0, 0],
                            zoom: 2
                        })
                    });
                    /**
                     * Add a click handler to the map to render the popup.
                     */
                    panel.map.on('singleclick', panel.onMapClick, this);
                }
            },

            onMapClick: function (evt) {
                var coordinate = evt.coordinate,
                    hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
                        coordinate, 'EPSG:3857', 'EPSG:4326'));

                this.createWindow(`<p>You clicked here:</p><code>${hdms}</code>`, evt);
            },

            createWindow: function (html, evt) {
                if (!this.dialog) {
                    this.dialog = Ext.create('Ext.window.Window', {
                        title: 'Vehicle Info',
                        layout: 'fit',
                        closeAction: 'hide',
                        height: 180,
                        width: 200,
                        plain: true,
                        items: [{
                            border: false,
                            bodyStyle: {
                                padding: 5,
                                fontSize: 13
                            },
                            html: ''
                        }]
                    });
                }
                this.dialog.showAt(evt.pixel[0], evt.pixel[1], true)
                this.dialog.down('panel').update(html)
            }
        });

    }
});

使用html更新Ext.Window不会显示html

1 个答案: