Confused on ItemId versus Id when used with controller / componentquery
I had thought that a controls id always would work and that only itemId works when the control is either a sibling or child. I've got the code below for a controller that listens for a button click (among other things). It does not respond when the button (continueButtonId) is set as the id property of the button, but the controller does respond when continueButtonId is the itemId of the button.
What am I understanding incorrectly?
Code:
Ext.define('RegistrationApp.controller.RegisterSpeakerAttendeeSponsorController', {
extend: 'Ext.app.Controller',
onRbAttendeeChange: function(field, newValue, oldValue, options) {
//console.log('onRbAttendeeChange');
if (newValue == true) {
this.rbChoice = 'attendee';
}
this.enableContinueButtonIfDisabled();
},
onRbSpeakerChange: function(field, newValue, oldValue, options) {
//console.log('onRbSpeakerChange');
if (newValue == true) {
this.rbChoice = 'speaker';
}
this.enableContinueButtonIfDisabled();
},
onRbSponsorChange: function(field, newValue, oldValue, options) {
//console.log('onRbSponsorChange');
if (newValue == true) {
this.rbChoice = 'sponsor';
}
this.enableContinueButtonIfDisabled();
},
onContinueButtonIdClick: function(button, e, options) {
//console.log('continue: ' + this.rbChoice);
var tabWizardPanel = Ext.ComponentQuery.query('#TabWizardId')[0];
if (this.rbChoice === 'speaker' || this.rbChoice == 'attendee') {
//console.log('speaker or attendee');
tabWizardPanel.setActiveTab(1);
} else if (this.rbChoice == 'sponsor') {
//console.log('sponsor');
tabWizardPanel.setActiveTab(2);
}
},
enableContinueButtonIfDisabled: function() {
var continueButton = Ext.ComponentQuery.query('#continueButtonId')[0];
if (continueButton.isDisabled()) {
continueButton.enable();
}
},
init: function(application) {
this.control({
"#rbAttendee": {
change: this.onRbAttendeeChange
},
"#rbSpeaker": {
change: this.onRbSpeakerChange
},
"#rbSponsor": {
change: this.onRbSponsorChange
},
"#continueButtonId": {
click: this.onContinueButtonIdClick
}
});
}
});
Even More to be confused about now
So, sticking to the original topic, the code below does show that doing a componentquery for itemId returns the component, id does not.
Rubbing salt into this wound, it turns out that the component query fails (in some cases) in the compiled version of this same code. I have not yet set up m very simple repro, but I'm thinking this is just buggy code (on sencha's side) but I'd love to be shown wrong (or at least explained to)
Code:
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
title: 'My Panel',
items: [
{
xtype: 'button',
id: 'buttonId',
itemId: 'buttonItemId',
text: 'hits controller'
},
{
xtype: 'button',
text: 'Does Compent Query of buttonId',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}
]
}
]
});
me.callParent(arguments);
},
onButtonClick: function(button, e, options) {
var componentQueryButtonIdLen = Ext.ComponentQuery.query('#buttonId').length;
// returns 0
var componentQueryButtonItemIdLen = Ext.ComponentQuery.query('#buttonItemId').length;
// returns 1
alert(componentQueryButtonIdLen + ',' + componentQueryButtonItemIdLen);
}
});
Code:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
views: [
'MyViewport'
],
autoCreateViewport: true,
name: 'MyApp',
controllers: [
'MyController'
]
});
Code:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
onButtonIdClick: function(button, e, options) {
console.log('button click inside controller');
},
init: function(application) {
this.control({
"#buttonItemId": {
click: this.onButtonIdClick
}
});
}
});