Event handling on custom container Sencha Touch

Question

custom component

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);
  }
});

Controller

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
    });
  }
});

need to create some instances of custom component in main container

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]);

I'm wondering what is the mistake I have done for not showing the console.log I added in colorSelectFieldInitAction. I need to filter the corresponding stores in these custom components and set them as options to select fields.

Answer 1

Try fireing event from the component this.fireEvent('colorSelectInitAction', this); instead of Ext.Viewport.fireEvent('colorSelectInitAction', this); . Then add the listener:

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

I can't test it myself but it should work.