Thank you for reporting this bug. We will make it our priority to review this report.
-
[UNREPRO] [3.??] Ext.getCmp() bug with ComboBoxes
I create a ComboBox either by xtype or by new Ext.form.Combo(), with id: 'some_unique_id'.
At create time using Ext.form.Combo(), I examine the object returned, and it sure does appear to be a ComboBox.
However, in an event handler, I do:
var cmp = Ext.getCmp('some_unique_id');
Examine the object returned, and it's something else, a child of the combo:
cmp.id: 'some-unique-id'
cmp.dom.className: 'x-form-text x-form-field'
cmp.dom.nodeName: "INPUT"
&c
The problem is, this cmp returned has no markInvalid() method, but the one returned by the construction does.
-
Can you post the console.logs() for both upon construction and using getCmp?
Twitter - @evantrimboli
Former Sencha framework engineer, available for consulting.
As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.
-
Can you clarify the question?
There are no console.log() calls in the code that I know of. I'm setting breakpoints with firebug and examining what getCmp() returns if I use an xtype construction and examining the variable if I construct with the new operator. I posted what I see in my first post, when I do getCmp(). Using the new construction, I get a variable pointing at a valid combo that I can call markInvalid() on just fine.
To be more clear...
Code:
var form = new Ext.form.FormPanel({
...
{
xtype: 'combo',
id: 'unique_id',
...
}
...
});
var combo = Ext.getCmp('unique_id');
combo points at something not a combo.
Examine the object returned, and it's something else, a child of the combo:
cmp.id: 'some-unique-id'
cmp.dom.className: 'x-form-text x-form-field'
cmp.dom.nodeName: "INPUT"
(has no markInvalid method)
If I do this instead:
Code:
var combo = new Ext.form.ComboBox({
...
});
var form = new Ext.form.FormPanel({
...
items: [
combo
...
]
});
combo points at a valid combo box.
(has a markInvalid method)
-
To debug, add an interceptor to Ext.ComponentMgr.register and break or alert if something ever overrides that id with some other object
-
Definitely cannot reproduce this:
Code:
Ext.onReady(function() {
var cmb = new Ext.form.ComboBox({
triggerAction: 'all',
id: 'foo',
store: [1, 2, 3],
renderTo: document.body
});
var x = Ext.getCmp('foo');
console.log(cmb == x);
});
Twitter - @evantrimboli
Former Sencha framework engineer, available for consulting.
As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.
-
-
Tried to reproduce this in several different variants under the latest SVN and was unable to reproduce it.
-

Originally Posted by
evant
Definitely cannot reproduce this:
Code:
Ext.onReady(function() {
var cmb = new Ext.form.ComboBox({
triggerAction: 'all',
id: 'foo',
store: [1, 2, 3],
renderTo: document.body
});
var x = Ext.getCmp('foo');
console.log(cmb == x);
});
That's not the case that fails for me.
More like:
Code:
var form = new Ext.form.FormPanel({
items: [
{
xtype: 'combo',
id: 'foo',
... (other options)
}
],
tbar: new Ext.Toolbar({
items: [
{
text: 'click me',
handler: function() {
console.dir(Ext.getCmp('foo')); // not a combo for me
}
}
]
})
});
-
Tried again with something similar to what you posted and was unable to reproduce. Can you zip up your version and send it to me and/or put it in a hosted environment i can debug?
-
12 May 2009, 10:14 AM
#10
I wish it were easy to do. My app is 17,000 lines of javascript and extracting just a piece of it isn't trivial. I'm also not at liberty to show the app, I'd need permission to do that.
I can be more specific.
The button is in the fbar of a dialog window, not a tbar. I thought maybe the tbar button would do the trick.
A snippet of the code making the combo:
Code:
{
xtype: 'combo',
id: 'datasource-' + id,
fieldLabel: 'Data Source',
store: this.tablestore,
valueField: 'nodeid',
displayField: 'title',
msgTarget: 'side',
listeners: {
render: function() {
this.store.on('load', function() {
this.setValue(p.datasource || 'Choose Table');
}, this);
this.store.load();
}
}
}
The snippet of code doing the getCmp():
Code:
var cmp = Ext.getCmp('datasource-'+id);
if (cmp.getValue() == 'Choose Table') {
cmp.markInvalid('You must choose a data source'); // firebug stops here, cmp.markInvalid is undefined
valid = false;
}
id is a unique number.