How to bind the button with form

[trupti.patil]

Hello,

I have two forms and I want to enable the 'Apply' button only if all the fields are filled. Following is the code:

var hostNetwork = new Ext.create('Ext.form.Panel', {
bodyPadding: 5, autoScroll: true, margin: marginInMenuContent, width: wp + 15, height: editTreeContentHeight + 15, layout: 'anchor', defaultType: 'textfield',
layout: { type: 'vbox', align: 'stretch', pack: 'start' }, defaultType: 'textfield',
items: [
{
xtype: 'form', bodyPadding: 5, title: '<font class="header-font">' + MyApp.Host.hosttitle + '</font>', defaultType: 'textfield', defaults: { disabled: true, width: 350 }, margin: 0, width: 400,
items: [
{ xtype: 'textfield', fieldLabel: MyApp.Host.hostname, id: 'host_name', name: 'host_name', disabled : true, disabledCls : 'disabled' },
{fieldLabel: MyApp.Host.timezone, name: 'timezone', xtype: 'displayfield', id: 'timezone',disabledCls : 'disabled' },
{ fieldLabel: 'Host name', xtype: 'hiddenfield', id: 'hidden_host_name'}
]
}, {
xtype: 'form', bodyPadding: 5, title: '<font class="header-font">' + MyApp.Host.rearadaptoripv4title + '</font>', defaultType: 'textfield', defaults: { disabled: true, width: 350 }, width: 400,
items: [
{ xtype: 'checkbox', boxLabel: MyApp.Host.dhcp, name: 'ipv4_dhcp_enabled', id: 'ipv4_dhcp_enabled',disabledCls : 'disabled' },
{ fieldLabel: MyApp.Host.ipaddress, name: 'ipv4_ip_address', id: 'ipv4_ip_address',disabledCls : 'disabled' },
{ fieldLabel: 'Host name', xtype: 'hiddenfield', id: 'hidden_ipv4_ip_address'},
{ fieldLabel: MyApp.Host.subnetmask, name: 'ipv4_subnet_mask', id: 'ipv4_subnet_mask',disabledCls : 'disabled' },
{ fieldLabel: MyApp.Host.gateway, name: 'ipv4_gateway', id: 'ipv4_gateway',disabledCls : 'disabled' },
{ fieldLabel: MyApp.Host.macaddress, name: 'ipv4_mac_address', id: 'ipv4_mac_address', xtype: 'displayfield' ,disabledCls : 'disabled'},
{ fieldLabel: MyApp.Host.primarydns, name: 'ipv4_primary_dns', id: 'ipv4_primary_dns',disabledCls : 'disabled' },
{ fieldLabel: MyApp.Host.secondarydns, name: 'ipv4_secondary_dns', id: 'ipv4_secondary_dns',disabledCls : 'disabled' }
]
}],
buttonAlign: 'left',
// Reset and Submit buttons
buttons: [{
text: MyApp.Host.apply,
id:'apply',
formBind: true, //only enabled once the form is valid
disabled: true,
}, {
text: MyApp.Host.cancel,
listeners: {
click: function () {
after_refresh_host_network();
}
}
}]
});

In above code, in green color I have set the 'formBind' config. However, it checks only fields of first form i.e. if first form fields are empty then button will get disabled and if first form's fields are not empty but second form's fields are empty then Apply button remain as enabled.

I want it like if any field is empty then Apply button should get disabled and vice versa.

Please help me.

Thank you,
Trupti

[friend]

Since your hostNetwork object is already being created as a Form Panel, it will properly handle any child form fields, regardless of container nesting. So, you can do something like this to get the desired effect:



var hostNetwork = new Ext.create('Ext.form.Panel', {
bodyPadding: 5,
layout: 'anchor',
items: [{
xtype: 'panel' ,
items: [{
<... form fields here...>
}]
},{
xtype: 'panel' ,
items: [{
<... form fields here...>
}]
}],
buttons: [{
text: 'Apply',
formBind: true
},{
text: 'Cancel'
}]
});

[trupti.patil]

Thank you friend, it works.