Accessing a variable within a store in ExtJs 6 MVC

Question

I wanted to access a variable created within a store but I couldn't access. Below is the part of the code.

    Ext.define('MyApp.store.TreeStore', {
        extend: 'GeoExt.data.store.LayersTree',
        alias: 'store.layer_tree',
        init: function(app) {
            ....

            this.ol_map = new ol.Map({
                layers: [group, layer3, layer4],
                view: new ol.View({
                    center: [0, 0],
                    zoom: 2
                })
            });

        },
        layerGroup: this.ol_map.getLayerGroup()
    });

I want to access ol_map within the store in layerGroup.

Which var you want to access explain it – Tejas May 10 '17 at 07:28 — Tejas, May 10 '17 at 07:28
I want to access ol_map. I have updated my question. – wondim May 10 '17 at 07:31 — wondim, May 10 '17 at 07:31

score 1 · Answer 1 · answered May 10 '17 at 07:28

1

The problem is that your store init function is executed after the layerGroup definition.

To fix:

    init: function(app) {
        ....

        this.ol_map = new ol.Map({
            layers: [group, layer3, layer4],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
        this.layerGroup = this.ol_map.getLayerGroup()

    },

answered May 10 '17 at 07:28

Alexander

19,906
19
75
162

Unfortunately, GeoExt plugin is complaining that `layerGroup` is undefined. – wondim May 10 '17 at 07:43
Sorry, `layerGroup` is not `undefined` but `null`. `Uncaught TypeError: Cannot read property 'getLayers' of null` – wondim May 10 '17 at 07:59

score 0 · Answer 2 · answered May 10 '17 at 10:02

0

I found a solution. I can add a function for the property as shown below.

Ext.define('MyApp.store.TreeStore', {
    extend: 'GeoExt.data.store.LayersTree',
    alias: 'store.layer_tree',
    layerGroup: (function() {
        ....

        this.ol_map = new ol.Map({
            layers: [group, layer3, layer4],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
        return this.ol_map.getLayerGroup()

    }) ()
});

answered May 10 '17 at 10:02

wondim

697
15
29

This is another variation of Alexander's solution. The problem is that the 'this' context in the original problem isn't the object - it's the scope that the Ext.define is being called in (probably the global scope). When you put the population of the ``ol_map`` variable into a function, the ``this`` context is different - normally it's the ExtJS object (unless there are some silly games being played) – Robert Watkins May 10 '17 at 10:12
The problem with Alexander's solution is `layerGroup` is still null. So what is the correct context that should be used to access `layerGroup` property? – wondim May 10 '17 at 10:16
Is the ``init`` method being called? I don't know the GeoExt library, so I can't be sure - but regular ExtJS stores do not have an ``init`` method. – Robert Watkins May 10 '17 at 10:26
It is not called. That could be the reason why Alexander's solution didn't work for me. – wondim May 10 '17 at 10:31
It would certainly be a part of the problem... ;) – Robert Watkins May 10 '17 at 10:32
Well, I didn't know that the OP did not even check the basic "is a function executed" before asking... – Alexander May 10 '17 at 13:47

Accessing a variable within a store in ExtJs 6 MVC

2 Answers2