Как получить доступ к одному классу из другого с помощью ExtJs 4 и MVC?

Question

Я работаю с ExtJS 4 и MVC. У меня есть два класса: ClassA и ClassB. От ClassB Мне нужно получить доступ к ClassA и его свойствам. Я использую Ext.require, чтобы загрузить ClassA на ClassB, но я не знаю, прав ли я и как его использовать.

Заранее спасибо за любую помощь кто-то может дать мне

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

Answer 1

Вы можете создать экземпляр ClassB с помощью Create обеспечивается Ext.

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

Answer 2

Вы можете прикрепить CLASSA на requires конфигурации в ClassB в то время как его инициализации.
Таким образом, классA уже существует, когда вы делаете что-либо в классе B.

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

Answer 3

Способ 1: Ваш класс B может расширить класс A, чтобы у вас были все методы класса A в классах B.

Способ 2: Вы можете определить методы в классе А, как статики, так что методы доступны извне без необходимости создавать экземпляры класса А.

Способ 3: Вы можете написать подмешать, содержащие методы и используйте его в классах A и B. B.