Extjs-子组件未触发父组件的侦听器

Question

我刚刚开始写Ext，我已经遇到了一些问题。请记住，我目前正在学习该框架。

我有2个视图。

视图A带有带有侦听器的按钮

xtype: 'button',
text: 'test',
iconCls: 'x-fa fa-search',
margin: '30px 0 10px 2px',
action: 'test',   
listeners: {
    click: 'refreshGrids'
}

视图B扩展了视图A并进行了父调用

this.callParent();

因此按钮现在在两个视图中都可用。

在我的控制器中，我具有以下功能

refreshGrids: function(obj){
    console.log(obj)
}

问题是，从视图A我通常可以在按下按钮时看到日志，但是在视图B中我不能看到日志，因为从不调用该方法。

现在，如果我未在控制器中使用方法，而是在click事件中使用了回调，则一切正常。

有什么想法吗？

Answer 1

在ExtJS 6中，使视图B扩展到A具有控制器的A相对容易。

您可以在此处运行以下代码：https://fiddle.sencha.com/#view/editor

请确保将版本设置为6.x版（例如6.7.0），因为7.x版已上线。

这里是一个实时示例：https://fiddle.sencha.com/#view/editor&fiddle/352k

/** @filename ./BaseController.js */
Ext.define('com.stackoverflow.BaseController', {
  extend: 'Ext.app.ViewController',
  alias: 'controller.base',
  refreshGrids: function() {
    var view = this.getView();
    var className = view.__proto__.$className;
    var suffix = view.getButtonTextSuffix();
    Ext.Msg.alert(className, 'Refreshing grids for... ' + suffix);
  }
});

/** @filename ./ViewA.js */
Ext.define('com.stackoverflow.ViewA', {
  extend: 'Ext.form.FieldSet',
  alias: 'widget.viewa',
  controller: 'base',

  config: {
    buttonTextSuffix: 'A'
  },

  initComponent: function() {
    var me = this;

    this.items = {
      xtype: 'button',
      text: 'Test' + ' ' + this.getButtonTextSuffix(),
      iconCls: 'x-fa fa-search',
      margin: '30px 0 10px 2px',
      action: 'test',
      listeners: {
        click: 'refreshGrids'
      }
    };

    me.callParent();
  }
});

/** @filename ./ViewB.js */
Ext.define('com.stackoverflow.ViewB', {
  extend: 'com.stackoverflow.ViewA',
  alias: 'widget.viewb',
  buttonTextSuffix: 'B',
  initComponent: function() {
    // Unless you want to do anything else here, this is unessesary.
    this.callParent();
  }
});

/** @filename ./App.js */
Ext.application({
  name: 'Fiddle',
  launch: function() {
    Ext.create('Ext.container.Viewport', {
      layout: {
        type: 'vbox',
        align: 'stretch'
      },
      defaults: {
        flex: 1,
        border: true
      },
      items: [{
        xtype: 'viewa'
      }, {
        xtype: 'viewb'
      }]
    });
  }
});