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

问题描述：

我正在使用复选框选择模型来选择用户，其中包含一个网格面板。提交后，用户标识（以及其他表单字段值）被发布到服务器。这工作完美。ExtJS 4.2.1 - 表单自定义字段验证

但我需要为该特殊（自定义）字段添加一个自定义验证 - 如果没有用户被选中，显示错误图标并显示错误工具提示文本。这是自定义字段组件截图：

custom form field - users grid with checkbox selection model

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

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

我可以使用，因此

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

我明智的选择是有效还是无效检查所选的数据，但我不知道如何显示错误图标，也不是我应该在哪里最好显示它。我认为该图标的最佳位置应在标题标签标签内（左侧或右侧，这并不重要）。

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

是关于图标和消息的**绘图**（即HTML标记，CSS，如何使用Ext生成的）或关于验证逻辑（组件，听众，最佳实践等）？或两者？ – rixo

@rixo主要通过消息提示来显示该图标。我最终实现了它，但也许你可以提供一个我会接受的更好的解决方案。验证的逻辑已经完成并且正在工作。 – shadyyx

答

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

所以验证后

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事件中再次检查有效性。

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

相关推荐