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

Posted 2023-02-26

【中文标题】如何使用 ExtJs 4 和 MVC 从另一个类访问一个类？

【英文标题】：How to access one class from another using ExtJs 4 and 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 模式中没有任何内容

【参考方案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类中使用。