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

How to access one class from another using ExtJs 4 and MVC?

本文关键字：另一个 访问 MVC 何使用 ExtJs      更新时间：2023-09-26

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

提前感谢任何人可以给我的任何帮助

ClassA 

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
                })
            });
        },
    }
});

ClassB 

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');
    }
}

您可以在classB初始化时将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()
   }
   ...

您可以使用Ext提供的Create实例化ClassB。

var classB = Ext.create('App.view.ClassB');
classB.someMethod();

方法1:您的类B可以扩展类A，以便在类B实例中拥有类A的所有方法。

方法2:您可以将类A中的方法定义为静态方法，以便从外部访问这些方法而不必创建类A的任何实例。

方法3:你可以编写一个包含方法的mixin，并在类a和类b中使用。

相关文章：