ExtJS 4.2.1 - 表单自定义字段验证

Question

我正在处理一个包含带有复选框选择模型的网格面板的表单，以选择用户。提交后，用户ID（以及其他表单字段值）将POST到服务器。这很完美。

但我需要为该特殊（自定义）字段添加自定义验证 - 如果未选择任何用户，则显示带有错误工具提示文本的错误图标。这是自定义字段组件截图：

正如您在图像中看到的那样，有一个标题（由xtype: label完成），然后是一个空白空间，当前填充的标签没有文字（标有红色矩形的区域）和网格本身。如果我选择一个用户（或更多），他们的名字（空白数据）将显示在该空标签中。

但是在验证过程中，如果没有选择用户，我需要在这里的某处显示带有工具提示的错误图标。

我可以使用

检查所选数据

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

因此我明智地选择是否有效，但我不知道如何显示该错误图标，也不知道应该在哪里展示它。我认为该图标的最佳位置应该在标题标题内（左侧或右侧，这无关紧要）。

非常感谢有关如何显示该图标的任何帮助！

Answer 1

由于没有人回答我自己找到了解决方案，我想把它放在这里，以便有人可以告诉我一个更好的方法。

所以验证后

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

我只需要解决具体标签并为其设置文本 - 同时添加一个具体的HTML标记，该标记与通过调用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);

现在我有一个带有样式提示的错误图标。我在grid.select事件上重新设置了标签文字（设置回有效），并在grid.deselect事件中再次检查有效性。