フォームのビュー ファイルに設定されたフィールドに次の 2 つのコンポーネントがあります。
Ext.define('App.view.prospects.Filter', {
alias: 'widget.prospectsfilter',
extend: 'Ext.form.Panel',
itemId: 'prospectsfilter',
...
initComponent: function(){
...
this.testButton = Ext.create('Ext.button.Button', {
handler: function() {this.fireEvent('testEvent')},
iconCls: 'icon-apply_16x16',
itemId: 'testButton',
text: 'Test'
});
this.campaignsComboBox = Ext.create('Ext.form.field.ComboBox', {
anchor: '100%',
displayField: 'name',
fieldLabel: 'Campaign(s)',
itemId: 'campaignsComboBox',
labelWidth: 90,
listConfig: {
minWidth: 150
},
listeners: {
select: function() {this.fireEvent('testEvent');}
},
multiSelect: false,
queryMode: 'local',
store: this.campaignsStore,
value: null,
valueField: 'id'
});
さて、コントローラーには次のものがあります。
Ext.define('App.controller.ProspectsFilter', {
extend: 'Ext.app.Controller',
models: ['Prospect'],
stores: ['Prospects'],
views: ['prospects.Filter'],
...
init: function() {
this.control({
'prospectsfilter #testButton':{
testEvent: function(){console.log('Found #testButton!');}
},
'prospectsfilter #campaignsComboBox':{
testEvent: function(){console.log('Found #campaignsComboBox!');}
}
}
});
「testButton」をクリックすると、コンソールに見つかったというメッセージが表示されます。
しかし、 で選択してcampaignsComboBoxも何も起こりません。
なんで？
アップデート：
以下は良いテストですが、根本原因を特定できません。テストする他のコンポーネントを追加したところ、テキスト フィールドのイベントが問題なくキャプチャされました。他の人は失敗します。なんで？
更新されたコントローラーは次のとおりです。
Ext.define('MyApp.controller.ProspectsFilter', {
extend: 'Ext.app.Controller',
models: ['Prospect'],
stores: ['Prospects'],
views: ['prospects.Filter'],
init: function() {
this.control({
'prospectsfilter #campaignsComboBox' : {
render: this.comboRender,
select: this.comboSelect
},
'prospectsfilter #campaignsDateField' : {
render: this.dateRender,
select: this.dateSelect
},
'prospectsfilter #campaignsTextField' : {
render: this.textRender,
change: this.textChange
}
});
},
comboRender: function(combobox) {console.log('comboRender');}, // Never executes.
comboSelect: function(combobox) {console.log('comboSelect');}, // Never executes.
dateRender: function(dateField) {console.log('dateRender'); }, // Never executes.
dateSelect: function(dateField) {console.log('dateSelect'); }, // Never executes.
textRender: function(textField) {console.log('textRender'); }, // Executes.
textChange: function(textField) {console.log('textChange'); } // Executes.
});
更新されたビューは次のとおりです。
Ext.define('MyApp.view.prospects.Filter', {
alias: 'widget.prospectsfilter',
extend: 'Ext.form.Panel',
itemId: 'prospectsfilter',
....
initComponent: function(){
....
this.dateField = Ext.create('Ext.form.field.Date',{
fieldLabel: 'Date',
itemId: 'campaignsDateField'
});
this.textField = Ext.create('Ext.form.field.Text',{
fieldLabel: 'Text',
itemId: 'campaignsTextField'
});
this.campaignsComboBox = Ext.create('Ext.form.field.ComboBox', {
anchor: '100%',
displayField: 'name',
fieldLabel: 'Campaign(s)',
itemId: 'campaignsComboBox',
labelWidth: 90,
listConfig: {
minWidth: 150
},
multiSelect: false,
queryMode: 'local',
store: Ext.create('Ext.data.ArrayStore', {
fields: ['name'],
data: [['entry1'], ['entry2'], ['entry3']]
}),
tabindex: 7,
value: null,
valueField: 'id'
});
this.statusToSegmentFieldSet = Ext.create('Ext.form.FieldSet', {
anchor: '100%',
autoHeight: true,
collapsed: true,
collapsible: true,
defaults: {
editable: false,
forceSelection: false
},
items: [
this.dateField,
this.textField,
this.campaignsComboBox
],
layout: 'anchor',
margin: '10 10 10 10',
title: 'Dispositions, Campaigns, Segments'
});
.......
var config = {
autoRender: true,
autoScroll: true,
bodyStyle: 'background-color: #F1F1F1;',
border: true,
//buttons: [
// this.applyButton,
// this.clearButton
//],
collapsed: false,
collapsible: true,
frame: true,
height: 200,
items: [
//this.datePicker,
//this.dateRangeFieldSet,
//this.prospectDetailsFieldSet,
this.statusToSegmentFieldSet
//this.assignedToFieldSet
],
layout: 'anchor',
minWidth: 300,
region: 'east',
split: true,
stateId: 'prospectsModuleFilter',
title: 'Advanced Filters',
width: 300
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.callParent(arguments);
}
});
更新: 8 月 28 日:
わかった。JSFiddle で発生している問題を再現できるまで、さらに絞り込みました。
うまくいけば、これにより、誰かが何が間違っているのかを理解するのを非常に簡単にしてくれるでしょう.
こちらの JSFiddle のメモをお読みください: http://jsfiddle.net/4JubT/3/