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}'
}
},
],
}],
});
Fiddle
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}"
}
},
],
}]
Add a formulas configuration to your ViewModel like this:
formulas : {
showSomeComponent : function (get) {
return get('isAuthorized') && !get('isDisabled');
}
}
http://docs.sencha.com/extjs/5.1.0/Ext.app.ViewModel.html#cfg-formulas
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With