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

Posted 2023-02-26

【中文标题】ExtJS 4.2.1 - 表单自定义字段验证

【英文标题】：ExtJS 4.2.1 - Form custom field validation

【发布时间】：2013-08-26 10:39:49

【问题描述】：

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

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

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

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

我可以使用检查所选数据

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

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

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

【问题讨论】：

您的问题是关于图标和消息的绘图（即 html 标记、CSS、如何使用 Ext 生成等），还是关于验证逻辑（组件、监听器、最佳实践等）？还是两者兼而有之？

@rixo 主要是显示带有消息提示的图标。我最终同时实现了它，但也许你可以提供一个我会接受的更好的解决方案。验证的逻辑已经完成并且正在运行。

【参考方案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 事件上再次检查有效性。