Below is my code. I get two fieldset each one contains some textboxes and a button. I want to validate only those fields on button click that belongs to that field set.
For example, there are two options: Send SMS and Send Email. Each option has a send button. If I want to send either SMS or Email then I don't want to validate all fields. This means if I want to send Email then I want to validate only Emails Text fields, not SMS's fields on click of Send button of email.
Below is my code. You can understand better.
this.form = new Ext.form.Panel({
margin: '10 100 10 100',
xtype: 'panel',
border: true,
layout: 'hbox',
padding: '2 2 2 2',
items: [{
xtype: 'fieldset',
flex: 1,
layout: 'anchor',
title: 'Send Email',
//collapsible: true,
//collapsed: true,
border: false,
defaults: { anchor: '100%' },
items: [{
xtype: 'textfield',
name: 'txtRecipients',
allowBlank: false,
//fieldLabel: 'Last Name',
emptyText: 'Recipients email address',
padding: '2 2 2 2 '
},
{
xtype: 'textfield',
name: 'txtSubject',
allowBlank: false,
//fieldLabel: 'Last Name',
emptyText: 'Subject',
padding: '2 2 2 2 '
},
{
xtype: 'textareafield',
name: 'txtMessage',
allowBlank: false,
//fieldLabel: 'Last Name',
emptyText: 'Type your message here',
padding: '2 2 2 2 ',
rows: 4
},
{
xtype: 'container',
items: [
{
xtype: 'button',
margin: '0 0 0 0',
text: 'Send',
width: 80,
height: 30,
handler: function () {
}
}
]
}]
},
{
xtype: 'fieldset',
flex: 1,
layout: 'anchor',
title: 'Send SMS',
//collapsible: true,
//collapsed: true,
border: false,
defaults: { anchor: '100%' },
items: [{
xtype: 'textfield',
name: 'txtRecipients',
allowBlank: false,
//fieldLabel: 'Last Name',
emptyText: 'Contact Numbers seperated by comma(,)',
padding: '2 2 2 2 '
},
{
xtype: 'textareafield',
name: 'txt1Message',
allowBlank: false,
//fieldLabel: 'Last Name',
emptyText: 'Type your message here',
padding: '2 2 2 2 ',
rows: 3
},
{
xtype: 'tbspacer',
height: 45
},
{
xtype: 'container',
items: [
{
xtype: 'button',
margin: '0 0 0 0',
text: 'Send',
width: 80,
height: 30,
handler: function () {
}
}
]
}]
}]
});
You need to add a specific function for each button. In each role you add the necessary validation to E-mail or SMS.
Example:
this.form = new Ext.form.Panel({
margin: '10 100 10 100',
xtype: 'panel',
border: true,
layout: 'hbox',
padding: '2 2 2 2',
items: [{
xtype: 'fieldset',
flex: 1,
layout: 'anchor',
title: 'Send Email',
//collapsible: true,
//collapsed: true,
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
name: 'txtRecipients',
allowBlank: false,
//fieldLabel: 'Last Name',
emptyText: 'Recipients email address',
padding: '2 2 2 2 '
},
{
xtype: 'textfield',
name: 'txtSubject',
allowBlank: false,
//fieldLabel: 'Last Name',
emptyText: 'Subject',
padding: '2 2 2 2 '
},
{
xtype: 'textareafield',
name: 'txtMessage',
allowBlank: false,
//fieldLabel: 'Last Name',
emptyText: 'Type your message here',
padding: '2 2 2 2 ',
rows: 4
},
{
xtype: 'container',
items: [{
xtype: 'button',
margin: '0 0 0 0',
text: 'Send',
width: 80,
height: 30,
handler: function() {
check_email();
}
}]
}
]
},
{
xtype: 'fieldset',
flex: 1,
layout: 'anchor',
title: 'Send SMS',
//collapsible: true,
//collapsed: true,
border: false,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'textfield',
name: 'txtRecipients',
allowBlank: false,
//fieldLabel: 'Last Name',
emptyText: 'Contact Numbers seperated by comma(,)',
padding: '2 2 2 2 '
},
{
xtype: 'textareafield',
name: 'txt1Message',
allowBlank: false,
//fieldLabel: 'Last Name',
emptyText: 'Type your message here',
padding: '2 2 2 2 ',
rows: 3
},
{
xtype: 'tbspacer',
height: 45
},
{
xtype: 'container',
items: [{
xtype: 'button',
margin: '0 0 0 0',
text: 'Send',
width: 80,
height: 30,
handler: function() {
check_sms();
}
}]
}
]
}
]
});
function check_email(){
// Here you do a validation of the E-mail fields
}
function check_sms(){
// Here you do a validation of the SMS fields
}