自定義容器Sencha Touch上的事件處理

Question

定制組件

Ext.define('MyApp.view.colorSelect', {
  extend: 'Ext.Container',
  xtype: 'colorselect',
  colorStore: '',

  initialize: function() {
    this.callParent(arguments);

    this.colorSelectField = Ext.create('Ext.field.Select', {
      label: 'Color',
      options: [],
      listeners: {
        initialize: function() {
          scope:this,
          this.fireEvent('colorSelectFieldInit', this);
        }
      }
    });
    this.add([this.colorSelect, otherItem1, otherItem2]);
    Ext.Viewport.fireEvent('colorSelectInitAction', this);
  }
});

控制者

Ext.define('MyApp.controller.colorSelect', {
  extend: 'Ext.app.Controller',
  config: {
    refs: {
      colorSelect : 'colorselect'
    }
  },
  onColorSelectInitAction: function() {

    var colorselect = this.getColorSelect();
    this.colorselect.on({
      scope: this,
      colorSelectFieldInit: this.colorSelectFieldInitAction
    });
  },

  colorSelectFieldInitAction: function(comp) {
  var store = comp.colorStore
    console.log(store);
    comp.setOptions(
      this.fillterStore(store)
    );
  },

  fillterStore: function(store) {
  },

  launch: function() {
    this.callParent();
    Ext.Viewport.on({
      scope: this,
      colorSelectInitAction: this.onColorSelectInitAction
    });
  }
});

需要在主容器中創建一些自定義組件的實例

this.firstColor = Ext.create('MyApp.view.colorSelect', {
colorStore:'abc'
    });

this.secondColor = Ext.create('MyApp.view.colorSelect', {
colorStore:'def'
    });

this.thirdColor = Ext.create('MyApp.view.colorSelect', {
colorStore:'xyz'
    });

this.add([this.firstColor,this.secondColor,this.thirdColor]);

我想知道我不顯示在colorSelectFieldInitAction中添加的console.log犯了什么錯誤。 我需要過濾這些自定義組件中的相應商店，並將它們設置為選擇字段的選項。

Answer 1

嘗試從組件this.fireEvent('colorSelectInitAction', this);觸發事件this.fireEvent('colorSelectInitAction', this); 而不是Ext.Viewport.fireEvent('colorSelectInitAction', this); 。 然后添加偵聽器：

this.colorselect.on({
      scope: this,
      colorSelectFieldInit: this.colorSelectFieldInitAction,
      colorSelectInitAction: this.onColorSelectInitAction
});

我自己無法測試，但應該可以。