Ext js - слушатель родительского компонента не запускается от детей - PullRequest
Новая
       32

Ext js - слушатель родительского компонента не запускается от детей

1 голос
/ 07 апреля 2020

Я только начал писать 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, все работает нормально.

Есть идеи?

1 Ответ

1 голос
/ 08 апреля 2020

Вид B расширяет A, где A имеет контроллер, относительно просто в Ext JS 6.

Вы можете запустить следующий код здесь: 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'
      }]
    });
  }
});
...