ExtJS - How to implement a container with its own isValid and hasInvalidField methods - forms

Question

For example, let's say we have three phone number fields: mobile, home, business, that we want to encapsulate as a contact item.
The phone number fields can be blank or, if not, have their own validity checks, the contact item has its own validity check in that at least one number must be provided.
I'm thinking about doing something like this:
Ext.define('My.widgets.contact', {
// To make use of Ext.form.Labelable mixin
extend: 'Ext.form.fieldcontainer',
xtype: 'contact',
alias: 'widget.contact',
requires: [
'My.widgets.phone'
],
mixins: [
// To link in isValid and other methods
'Ext.form.field.Field'
],
items: [
{
xtype: 'phone',
fieldLabel: 'mobile'
},
{
xtype: 'phone',
fieldLabel: 'home'
},
{
xtype: 'phone',
fieldLabel: 'business'
}
],
isValid: function() {
let valid = false;
if (this.callParent(arguments)) {
for (const item in this.getItems()) {
if (item.getValue() != '') {
valid = true;
break;
}
}
}
return valid;
}
});
Is this the right way to do this?
The idea is to have the minimum extra fluff. For example, form panels have dockable, button, header and footer elements which aren't needed. Also, I've read about problems in ExtJS having multiple form items on a page, so want to avoid sequential or nested forms on a single page.
Another approach might be to extend Ext.container.Container with the Ext.form.Labelable and Ext.form.field.Field mixins. Would that work?

Answer 1

In ExtJs fieldcontainer have method query so you use this to check your Validation.
Query retrieves all descendant components which match the passed selector. Executes an Ext.ComponentQuery.query using this container as its root.
As you have used this.getItems() it will return all the items of fieldcontainer as whatever it contain. In this case you need to maintain condition to check getValue() only for fields.
Query will return only that component as you want to check.
I have created an Sencha Fiddle demo hope this will be help you to achieve your solution.
//Custom xtype for phone
Ext.define('Ext.form.field.Phone', {
extend: 'Ext.form.field.Text',
alias: 'widget.phone',
xtype: 'phone',
maskRe: /[\d\.]/,
regex: /^\d+(\.\d{1,2})?$/,
maxLength: 11,
enforceMaxLength: true
});
//Contact details
Ext.define('ContactForm', {
extend: 'Ext.form.FieldContainer',
alias: 'widget.contact',
xtype: 'contact',
flex: 1,
layout: 'vbox',
defaults: {
xtype: 'phone'
},
items: [{
fieldLabel: 'mobile'
}, {
fieldLabel: 'home'
}, {
fieldLabel: 'business'
}],
isValid: function () {
return this.query('phone[value=""]').length > 0;//you can also use like this { this.query('phone[value!=""]') };
}
});
//Panel this will contain contact
var panel = Ext.create('Ext.panel.Panel', {
itemId: 'myPanel',
bodyPadding: 5,
width: 300,
renderTo: Ext.getBody(),
title: 'Contact Details',
items: [{
xtype: 'contact'
}],
buttons: [{
text: 'Submit Details',
handler: function () {
var contactFrm = this.up('#myPanel').down('contact'), //you also use like this this.up('panel').down('contact')
title = 'Success',
msg = 'Good you have entered the contact details..!';
if (!contactFrm.isValid()) {
title = 'Error';
msg = 'Plese enter at least one contact detail..!'
}
Ext.Msg.alert(title, msg);
}
}]
});