1

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

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

自定义表单字段 - 具有复选框选择模型的用户网格

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

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

我可以使用检查所选数据

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

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

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

4

1 回答 1

2

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

所以在验证之后

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。

于 2013-08-27T08:14:52.293 回答