markInvalid is not marking field with red zigzag - extjs

Question

My issue is that in change event of FTPSettingHost, markInvalid is not marking the field invalid : what I mean by invalid, the field is highlighted with red zigzag.
I'm getting empty fields each time the field is change(change event) and mark them invalid.
Is it possible to make a validator for that? and how? When a validator is called?
Here is the panel :
Ext.define("Backend.project.FtpPanel", {
xtype : "ftpPanel",
extend : "Ext.form.Panel",
border : 0,
id : 'ftpForm',
layout : 'anchor',
defaults : {
labelStyle : "font-weight: font-size: 11px",
fieldStyle : "font-size: 12px;",
anchor : "100%",
labelWidth : 180
},
initComponent : function () {
var me = this;
var ftpFields = [{
id : 'FTPSettingsHost',
label : LocalizationUtils.getMessage("FTPHost")
}, {
id : 'FTPSettingsPath',
label : LocalizationUtils.getMessage("FTPPath")
}, {
id : 'FTPSettingsUsername',
label : LocalizationUtils.getMessage("FTPUsername")
}, {
id : 'FTPSettingsPassword',
label : LocalizationUtils.getMessage("FTPPassword")
}
];
this.FTPSettingsHost = new Ext.form.field.Text({
fieldLabel : LocalizationUtils.getMessage("FTPHost"),
anchor : "100%",
id : "FTPSettingsHost",
name : "FTPSettingsHost",
xtype : 'textfield',
allowOnlyWhitespace : false,
//validator : FormUtils.getAllFieldsNonEmptyValidator("FTPSettingsPath", ftpFields)
listeners : {
change : {
fn : function (cmp) {
// Get empty fields
var fields = FormUtils.getEmptyFields(me);
var labels = [];
for (var i = 0; i < fields.length; i++) {
//console.log(fields[i]);
labels[i] = fields[i].getFieldLabel();
}
var message = LocalizationUtils.getMessage("AllTheseFieldsRequired", [labels.join(", ")]);
for (var i = 0; i < fields.length; i++) {
fields[i].clearInvalid();
fields[i].markInvalid(message);
}
}
}
}
});
this.FTPSettingsPath = new Ext.form.field.Text({
fieldLabel : LocalizationUtils.getMessage("FTPPath"),
anchor : "100%",
id : "FTPSettingsPath",
name : "FTPSettingsPath",
xtype : 'textfield',
allowOnlyWhitespace : false,
});
this.FTPSettingsUsername = new Ext.form.field.Text({
fieldLabel : LocalizationUtils.getMessage("FTPUsername"),
anchor : "100%",
id : "FTPSettingsUsername",
name : "FTPSettingsUsername",
xtype : 'textfield',
allowOnlyWhitespace : false,
});
this.FTPSettingsPassword = new Ext.form.field.Text({
fieldLabel : LocalizationUtils.getMessage("FTPPassword"),
anchor : "100%",
id : "FTPSettingsPassword",
name : "FTPSettingsPassword",
xtype : 'textfield',
allowOnlyWhitespace : false,
});
Ext.apply(this, {
items : [me.FTPSettingsHost, me.FTPSettingsPath, me.FTPSettingsUsername, me.FTPSettingsPassword]
});
this.callParent(this);
}
})
Thank you all for the help !

Answer 1

I looked through your fiddle and here is my version: http://jsfiddle.net/Jandalf/UehL7/22/
Ext.define("Backend.project.FtpPanel", {
xtype: "ftpPanel",
extend: "Ext.form.Panel",
border: 1,
id: 'ftpForm',
height: 200,
width: 500,
renderTo: Ext.getBody(),
layout: 'anchor',
bodyPadding: 10,
fieldDefaults: {
allowBlank: false,
labelStyle: "font-weight: bold; font-size: 11px",
fieldStyle: "font-size: 12px;",
anchor: "100%",
labelWidth: 180
},
items: [{
fieldLabel: "FTPHost",
id: "FTPSettingsHost",
name: "FTPSettingsHost",
xtype: 'textfield'
},{
fieldLabel: "FTPPath",
id: "FTPSettingsPath",
name: "FTPSettingsPath",
xtype: 'textfield'
},{
fieldLabel: "FTPUsername",
id: "FTPSettingsUsername",
name: "FTPSettingsUsername",
xtype: 'textfield'
},{
fieldLabel: "FTPPassword",
id: "FTPSettingsPassword",
name: "FTPSettingsPassword",
xtype: 'textfield'
}]
});
Is this what you want or do you really need to mark all fields invalid at once?