I have 3 input fields in a form and want to make the third input enabled only when the first two inputs have values.
This doesn't seem to work:
Ext.define('MyApp.view.myobj.MyPanel', {
extend:'Ext.Panel',
viewModel: {},
items: [{
xtype: 'form',
defaultType: 'textfield',
items: [
{fieldLabel: 'Field 1', reference: 'field1', publishes: 'value'},
{fieldLabel: 'Field 2', reference: 'field2', publishes: 'value'},
{
fieldLabel: 'Field 3',
bind: {
disabled: '{!field1.value} || {!field2.value}'
}
},
],
}],
});
In the view model, add a formula to return the value for {!field1.value} || {!field1.value}
As per the fiddle:
viewModel: {
formulas: {
something: {
bind: {
x: '{!field1.value}',
y: '{!field2.value}'
},
get: function (data) {
if (data.x || data.y) return true;
else return false;
}
}
}
},
items: [{
xtype: 'form',
defaultType: 'textfield',
bodyPadding: 10,
items: [
{fieldLabel: 'Field 1', reference: 'field1', publishes: 'value'},
{fieldLabel: 'Field 2', reference: 'field2', publishes: 'value'},
{
fieldLabel: 'Field 3',
bind: {
disabled: "{something}"
}
},
],
}]