title: How to access one class from another using ExtJs 4 and MVC?
body: <p>I'm new working with ExtJS 4 and MVC. I have two classes, <code>ClassA</code> and <code>ClassB</code>. From <code>ClassB</code> I need to access <code>ClassA</code> and its properties.
  I use <code>Ext.require</code> in order to load <code>ClassA</code> on <code>ClassB</code> but I don't know if I'm right and how to use it.</p>
  
  <p>Thanks in advance for any help someone can give it to me</p>
  
  <p>ClassA</p>
  
  <pre><code>Ext.define('App.view.ClassA', {
      extend: 'Ext.panel.Panel',
      layout: 'fit',
      alias: 'widget.mappanel',
      html: "&lt;div id='test-map'&gt;&lt;/div&gt;",
      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
                  })
              });
          },
      }
  });
  </code></pre>
  
  <p>ClassB</p>
  
  <pre><code>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: '&lt;b&gt;&lt;i&gt;Click on map&lt;/i&gt;&lt;/b&gt;&lt;b&gt;',
                      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');
      }
  }
  </code></pre>