How can i add a Custom Component [Message] below the input field ?

[mrbond]

How can i add a custom component (i created a component called ErrorMessage) below an Input Field to display an error message back to user ?

This is the pseudo code that i was trying, for now i'm just adding all the error at the end. But i don't see the messages even at the end of panel. Most of the responses in forums are asking to do doLayout, which i guess is from sencha touch 1. How can i refresh the view after adding new components. Also how can i add components in the middle?

        
        var form = this.getForm(); // form panel
        var fields = form.getFields(), field; 
        for (name in fields) {
            //console.log('Field Name ' + name);
            if (fields.hasOwnProperty(name)) {
                field = fields[name];   // do some validation here later.
                field.getParent().items.add(new App.ErrorMessage(
                        {html: 'test error message.' }
                ));
            }
        }

[jerome76]

I believe you can do this with simple css by adjusting the field's bottom margins and displaying some sort of floating error text below the field. And the view should refresh after adding new components automatically.