ExtJS 4.2.1 - Form custom field validation

Question

I am working on a form that contains a grid panel with checkbox selection model to select users. After the submission the users ID's (as well as other form field values) are POSTed to the server. This works perfect.

But I need to add a custom validation for that special (custom) field - if no user is selected, display an error icon with an error tooltip text. Here is the custom field component screenshot:

As You can see within the image, there is a title (done by xtype: label), then an empty space, that is currently filled with label with no text (the area marked by red rectangle) and the grid itself. If I select a user (or more), their names (blanked data) are displayed in that empty label.

But within a process of validation I need to show an error icon with tooltip somewhere here if no user is selected.

I can check for the selected data using

grid.getSelectionModel().getSelection().length > 0 ? true : false

therefore I am wise of the selection is valid or not, but I do not know how to display that error icon, nor where should I best display it. I think the best position for that icon should be within the section title label (either left or right, this does not matter that much).

Any help on how to display that icon is highly appreciated!

Answer 1

As nobody answered and I found a solution myself, I want to put it here so that maybe somebody could tell me about a better approach.

So after the validation

if(grid.getSelectionModel().getSelection().length > 0) {
    // valid, let's submit the form...
} else {
   // invalid, let's show the error hint
}

I only need to address the concrete label and set the text for it - while adding a concrete HTML markup that is the same as of when error icon is displayed by calling form.isValid():

label.setText(myPreviousText
    + '<span role="presentation" class="x-form-error-msg x-form-invalid-icon" data-errorqtip="&lt;ul class=&quot;x-list-plain&quot;&gt;&lt;li role=&quot;alert&quot;&gt;'
    + 'MY ERROR MESSAGE'
    + '&lt;/li&gt;&lt;/ul&gt;" style="display: inline-block;"></span>', false);

Now I have the error icon with a styled hint. I set the label text back (set back to valid) on grid.select event and check the validity again on grid.deselect event.