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

【问题标题】：How to access one class from another using ExtJs 4 and MVC?如何使用 ExtJs 4 和 MVC 从另一个类访问一个类？
【发布时间】：2015-09-15 14:53:01
【问题描述】：

我是使用 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');
    }
}

【问题讨论】：

能否请您发布您的代码？
完成！ @AleksanderLidtke :)
谢谢，尽可能多地发布信息（不过量）确实会增加您获得帮助的机会。
感谢您的建议；）
在您的示例中，MVC 模式中没有任何内容

标签： javascript extjs extjs4 sencha-touch sencha-architect

【解决方案1】：

您可以在 classB 初始化时将 classA 附加到 classB 中的 requires 配置上。
因此，当您在 classB 中执行任何操作时，classA 已经存在。

// 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()
   }
   ...

【讨论】：

【解决方案2】：

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

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

【讨论】：

感谢您的回答，但它对我不起作用。我收到此错误：Uncaught TypeError: classA.printMessage is not a function
我在您的代码中看不到 printMessage 属性。您正在尝试不使用 () 符号，因此您使用的是属性而不是方法。

【解决方案3】：

方法一：你的B类可以扩展A类，让你在B类实例中拥有A类的所有方法。

方法 2：可以将 Class A 中的方法定义为 Statics，以便从外部访问这些方法，而无需创建 Class A 的任何实例。

方法3：你可以编写一个包含方法的mixin，并在A类和B类中使用。

【讨论】：