ExtJs5 How to add a floating window to a panel as an item?

Question

I am writing my application in MVVM structure. I have buttons as items in GeoPortal.geox.components.MapToolbar. in my view(GeoPortal.view.map.Map) i use this toolbar and toolbar's buttons have actions in my viewController (GeoPortal.view.map.MapController). Now this toolbar has to be floating, so i put it in a floating window. But to access button actions this window has to be an item of the panel.

I tried to add item like in the code below, but i got this error:

TypeError: me.floatingItems is undefined

GeoPortal.view.map.Map:

Ext.define("GeoPortal.view.map.Map",{
    "extend": "GeoPortal.geox.components.Panel",
    "controller": "map",
    "viewModel": {
        "type": "map"
    },
    "uses": ['GeoPortal.geox.components.MapToolbar',
        'GeoPortal.geox.components.MapInfobar',
        'GeoPortal.geox.components.Window'
    ],
    initComponent: function () {

        var win = Ext.create({
            xtype: 'gxWindow',
            id: 'mapToolbarWindow',
            items: [{
                xtype: 'gxMapToolbar'
            }]
        });

        // FIX this
        this.add(win);
        this.callParent();
    },

    listeners : {
        afterrender: {
            fn: function () {
                Ext.getCmp('mapToolbarWindow').show();
            }
        }
    },
    "region": 'center',
    "collapsible": false,
    "collapsed": false,
    "xtype": "mapPanel",
    items: [{
        xtype: 'gxMapInfobar'
    }, {
        html: '<div id="map" class="map"></div>'
    }]
});

Thanks in advance.

Answer 1

You can just store reference to window this.win = Ext.create({ xtype: 'gxWindow' }) . You can then use every time you need. If you need also to have reference to panel in window, pass it in window config: this.win = Ext.create({ xtype: 'gxWindow', panel: this }) .

Also you should mind that, you should destroy window when panel is destroyed, otherwise you will have potential memleak.