Extjs 6 ViewModel does not work fine - viewmodel

Question

I'm developing an application using Extjs6. I have a sign page. I have two textfields as follows:
items: [{
xtype: 'textfield',
name: 'email',
emptyText: 'Email',
bind : '{inEmail}',
labelWidth: 60,
anchor: '100%',
hideLabel: true,
allowBlank : false,
margin: '15 5 0 5',
listeners: listeners
}, {
xtype: 'textfield',
reference: 'password',
name: 'password',
bind : '{inpassword}',
emptyText: 'Password',
inputType: 'password',
labelSeparator: '',
labelWidth: 60,
anchor: '100%',
hideLabel: true,
allowBlank : false,
margin: '15 5 0 5',
listeners: listeners
}]
I have a button like this:
{
xtype: 'button',
text: '<span style="color: white ">Enter</span>',
anchor: '100%',
handler: 'signin',
bind: {
disabled: '{!signinBtn}'
},
margin: '-5 5 25 5'
}
In viewModel I define a formula:
formulas:
{
signinBtn: function (get) {
var fn = get('inEmail'), ln = get('inpassword');
return (fn && ln);
}
}
But when I browse to this page, sometimes it does not work. But when I change disabled to hidden, it works fine.
Where is the problem?

Answer 1

The short answer is: don't add allowBlank: false to the textfield.
I've created a fiddle to answer your question. I've added a console.log(fn && ln); to see on the console when the formula is evaluated.
The fiddle works as you expected if you don't add the allowBlank: false to your textfield. If you add that property, the formula is not evaluated when you clear the textfield contents.