Error when set "disabled" config to customized Ext.field.Text - sencha-touch-2

Question

I have a customized text box which gives me a textbox with a button in textfield next to it.
(run the code you'll see what I mean).
The only problem is that if I set the disabled state to false I get an error saying:
Uncaught TypeError: Object [object Object] has no method 'getValue'
But if I set it to true all is good.
This is my code:
var disabled = false;
var _oInput = Ext.create("Ext.field.Text", {
flex: 8,
labelWidth:0,
labelAlign: "right",
value: self.psValue,
});
var _oSenchaObject = Ext.create("Ext.field.Text",{
label: "test",
disabled: disabled, //This gives me the error
component: {
xtype: 'container',
layout: 'hbox',
items: [
_oInput,
{
xtype: 'button',
flex: 1,
text: '...',
//disabled: disabled,
}
]
},
});
var formPanelComment = Ext.create('Ext.form.Panel', {
title:"Comments",
items: [{
xtype: 'fieldset',
title: "Comments",
items: [
_oSenchaObject
]
}]
});

Answer 1

Good question. :)
This is because of a conflict when you've defined your "custom" textfield (containing a normal textfield with an inner button).
Have a look at your code snippet, the line which gives you an error is:
var _oSenchaObject = Ext.create("Ext.field.Text",{
...
disabled: disabled, //This gives me the error
component: {
...
},
});
Here, disabled config is applied to children components (which are defined in component config), but Sencha Touch does not know how to correctly disable your textfield, disable your inner container (which contains another field and button). I guess it's something like a bug, or framework limitation.
So, the solution is just set disabled config to each of your single children. In the example above, just move that line to _oInput's config.
Hope it helps.