[英]Event handling on custom container Sencha Touch
定制组件
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犯了什么错误。 我需要过滤这些自定义组件中的相应商店,并将它们设置为选择字段的选项。
尝试从组件this.fireEvent('colorSelectInitAction', this);
触发事件this.fireEvent('colorSelectInitAction', this);
而不是Ext.Viewport.fireEvent('colorSelectInitAction', this);
。 然后添加侦听器:
this.colorselect.on({
scope: this,
colorSelectFieldInit: this.colorSelectFieldInitAction,
colorSelectInitAction: this.onColorSelectInitAction
});
我自己无法测试,但应该可以。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.