Question

i want to use this.form.markInvalid directly from the form.

i have 2 items in my form:

code:

  items: [
            { 
            fieldLabel: 'Name',
            name: 'name'
            }
            ,{
            id: 'e' ,
            fieldLabel: 'Email',
            name: 'email'
        }]

when the user click on a button i am calling this.form.markInvalid({'e':'email is invalid'});

i want to mark email item as invalid with the error message: “email is invalid”.

But i get an error message when i press the button:

this.form is undefined
 this.form.markInvalid({'e':'email is invalid'}); 

Thx

Answer 1

In the button handler/listener did you define the correct scope?

The function that is registered to the click event should have access to the this.form property. this in your case probably points to the button itself instead of the the formPanel.

You can easily change the scope of the listener by using createDelegate() or adding an extra argument when registering your listener like this:

myButton.on('click', function(){
    console.log(this, this.id);
}, this); // <= notice the "this" argument here!

BUT!
Why are you validating your email like this? You could as easily add a vtype to your field config and let ExtJS do it all for you.

items: [{ 
    fieldLabel: 'Name',
    name: 'name'
},{
    id: 'e' ,
    fieldLabel: 'Email',
    name: 'email',
    vtype: 'email'
}]