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.Whosebug.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.Whosebug.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.Whosebug.ViewB', {
  extend: 'com.Whosebug.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'
      }]
    });
  }
});

Extjs - 父组件的侦听器不是由子组件触发的

Extjs - Parent component's listener is not triggered from children

javascript

extjs6