Textfield allowBlank/Focus and invalid-cls issue

Question

I am new to ext-js and need some help regarding this issue.
I have a Panel which has a fieldset with two textfields.
The allowBlank property of both these textfields is set to false so that textField with empty text is not allowed.

If the textfield is empty then by default the invalid css is applied to the textfield, which makes it's border red.

Here the issue is that initially when the textfield is rendered the invalid css is not applied by default.Once if the TextField is focused and when the textfield loses the focus it becomes red.

I want the textfield to be having the invalid-cls when it is rendered initially it self.

Here is a fiddle which has same issue.
https://fiddle.sencha.com/#fiddle/csa

Please help me out with this issue.

With Regards,
Sumanth

Answer 1

Use .validate() at rendering element

For example:

fieldLabel: 'Field 1',
name: 'field1',
allowBlank: false,
listeners: {
    render: function(el) {
        el.validate();
    }
}

---

I update your fiddle-project