javascript - 如何使用 ExtJs 4 和 MVC 从另一个类访问一个类？

Question

我是 ExtJS 4 和 MVC 的新手。我有两个类，ClassA 和 ClassB。我需要从 ClassB 访问 ClassA 及其属性。我使用 Ext.require 来在 ClassB 上加载 ClassA 但我不知道我是否正确以及如何使用它。

在此先感谢有人能给我的任何帮助

A级

Ext.define('App.view.ClassA', {
    extend: 'Ext.panel.Panel',
    layout: 'fit',
    alias: 'widget.mappanel',
    html: "<div id='test-map'></div>",
    listeners: {

        afterrender: function () {
           var osm_source = new ol.source.OSM({
                url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
            });
            var osmLayer = new ol.layer.Tile({
                source: osm_source
            });

            window.app = {};
            var app = window.app;
            app.Drag = function () {

                ol.interaction.Pointer.call(this, {
                    handleDownEvent: app.Drag.prototype.handleDownEvent
                });

                this.coordinate_ = null;
                this.cursor_ = 'pointer';
                this.feature_ = null;
                this.previousCursor_ = undefined;
            };
            ol.inherits(app.Drag, ol.interaction.Pointer);

            app.Drag.prototype.handleDownEvent = function (evt) {
                var map = evt.map;

                var feature = map.forEachFeatureAtPixel(evt.pixel,
                        function (feature, layer) {
                            return feature;
                        });

                if (feature) {
                    this.coordinate_ = evt.coordinate;
                    this.feature_ = feature;
                }
                console.log("handleDownEvent" + evt.coordinate);
                return !!feature;
            };

            this.map = new ol.Map({
                target: 'test-map',
                renderer: 'canvas',
                interactions: ol.interaction.defaults().extend([new app.Drag()]),
                layers: [osmLayer,
                    new ol.layer.Vector({
                        source: new ol.source.Vector({
                            features: [new ol.Feature(new ol.geom.Point([0, 0]))]
                        }),
                        style: new ol.style.Style({
                            image: new ol.style.Icon( ({
                                anchor: [0.5, 46],
                                anchorXUnits: 'fraction',
                                anchorYUnits: 'pixels',
                                opacity: 0.95,
                                src: 'resources/images/location_marker.png'
                            })),
                            stroke: new ol.style.Stroke({
                                width: 3,
                                color: [255, 0, 0, 1]
                            }),
                            fill: new ol.style.Fill({
                                color: [0, 0, 255, 0.6]
                            })
                        })
                    })
                ],              
                view: new ol.View({
                    center:ol.proj.transform([-74.085491, 4.676015], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 6
                })
            });
        },
    }
});

B级

Ext.require([
    'App.view.ClassB'
]);

Ext.define('App.view.menu.ClassA', {
    extend: 'Ext.form.Panel',
    alias: 'widget.classA',
    width: 400,
    bodyPadding: 10,
    frame: true,
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'panel',
            layout: 'column',
            frame: false,
            border: false,
            items: [
                {
                    html: '<b><i>Click on map</i></b><b>',
                    frame: false,
                    border: false
                },
                {
                    xtype: 'image',
                    id: 'locatedDepotByClick',
                    src: 'resources/images/locate_point.png',
                    height: 26,
                    width: 26,
                    mode: 'image',
                    listeners: {el: {click: function () {
                                // I want to use ClassB here
                                setDepotFromMapMode();
                            }
                        }
                    },
                    margin: "0 10 2 2"
                }]
        }]
});
var clickMapActive = false;

function setDepotFromMapMode() {
    if (clickMapActive) {
        clickMapActive = false;
        Ext.getCmp('locatedDepotByClick').setSrc('resources/images/locate_point_active.png');
    } else {
        clickMapActive = true;
        Ext.getCmp('locatedDepotByClick').setSrc('resources/images/locate_point_deactive.png');
    }
}

Answer 1

您可以在初始化时将 classA 附加到 classB 的 requires 配置上。
所以当你在类 B 中做任何事情时，类 A 已经存在。

// dont use require here, because require is async

Ext.define('App.view.ClassB', {
   ...
   requires: [
       // requires goes here 
       'App.view.ClassA'
   ],
   ...
   someMethod: function(){
       var a = Ext.create('App.view.ClassA');
       a.invokeSomeMethod();
       //or if you have static method
       App.view.ClassA.anotherMethod()
   }
   ...