创建完全支持dojox.form.manager的自定义表单控件

╰+哭是因爲堅強的太久メ 2022-04-16 01:12 127阅读 0赞

本文翻译自：[http://www.sitepen.com/blog/2011/10/14/creating-a-widget-with-full-dojox-form-manager-support/][http_www.sitepen.com_blog_2011_10_14_creating-a-widget-with-full-dojox-form-manager-support]  
原文作者：Ken Franqueiro  
译者：Nate（supnate@gmail.com)  
  
作为免费Dojo支持工作的一部分，我们收到来自Pong的这样的问题：如何让自定义控件能够支持dojox.form.manager：  
  
**问题原文是**：

> ”我想创建一个自定义的表单控件，它组合了dijit.form.Select和dijit.form.ValidationTextBox，因为这并不是一个标准的dijit表单元素，因此它不能使用dojox.form.manager的一些功能，比如disable(), setFormValues(), observer等等。因此我想知道如何才能让自定义表单控件去支持dojox.form.manager呢？“

感谢提出这个问题，Pong！在分析这个问题之前，我们注意到你对你的widget的描述－”一个dijit.form.Select和dijit.form.ValidationTextBox的组合“－听上去这很像dijit.form.FilteringSelect已经做了这件事情。并且dijit.form.FilteringSelect已经能很好的支持dojox.form.Manager。如果你没有试过这个控件也许可以去看看。你可以通过这个链接来看到相关的例子：[this trivial dojox.form.Manager example.][]  
  
好了，既然你已经创建了自定义控件，那么我们来看看dojox.form.Manager需要控件提供哪些东西才能去管理它们。  
  
首先最重要的是，dojox.form.Manager仅仅跟踪管理那些继承自dijit.form.\_FormWidget的控件。因此，你需要以此为基类，比如：

dojo.declare("my.CustomFormWidget", dijit.form.\_FormWidget, \{ /\* implementation here \*/ \});  
这里简单说明下dijit.form.\_FormWidget，它主要用于封装Html的input元素，使其成为一个dijit的表单元素。特别重要的一点是对focusNode的设置，通常指向实际的input节点，从而能够使用原生的focus行为。

对于dijit.form.\_FormWidget还有一个进一步的扩展是dijit.form.\_FormValueWidget，它提供了表单元素的一些额外的基本功能，用于设置和获取表单元素的值，比如dijit.form.Select和dijit.form.FilteringSelect都继承自这个类。  
  
你可以在 [API文档][API]里找到这些相关信息，但是如果要详细深入了解的话，最好还是能够看一看它们的源代码以了解它们到底是如何工作的。  
  
值得注意的是，这些基类提供了dojox.form.Manage要使用的一些API的默认实现，如果你要做一些特别处理的话，可以覆盖这些实现以适应实际的需求。  
  
现在我们来看看哪些API会被dojox.form.Manager使用：

*  onChange: 这是manager用于观察的事件。（在\_FormWidget中实现）
 *  disabled getter/setter： manager用其来enable/disable表单元素，这个disabled状态在验证表单时也会被使用，因为disabled元素是不会被提交的（在\_FormWdiget中实现）。
 *  value getter/setter: manager用其获取和设置表单元素的值。（在\_FormWidget中实现）
 *  reset：重置表单元素的值（在\_FormValueWidget）中实现。

下面两个验证方法也会被manager使用，但是这两个方法并没有被\_FormWidget基类所实现，需要自己去实现。dijit.form.ValidationTextBox(被dijit.form.FilteringSelect继承）包含了这个实现，可以参考其方法来为自己的widget提供这样的API。

*  isValid方法：如果widget的值是valid则返回true，否则返回false。manager会去检查每一个表单元素的有效性作为自己的isValid的结果，比如当表单提交时就会调用此方法。
 *  validate方法: isValid仅仅返回widget是否是一个有效的状态，而validate会进行一些UI上的更新来反应当前的状态。通常，它会调用isValid方法，然后根据结果来更新状态。manager会在自己的validate方法里调用每个表单元素的这个方法。

好了，希望这些信息能够帮助你去实现自己的表单元素控件，好运！

[http_www.sitepen.com_blog_2011_10_14_creating-a-widget-with-full-dojox-form-manager-support]: http://www.sitepen.com/blog/2011/10/14/creating-a-widget-with-full-dojox-form-manager-support/
[this trivial dojox.form.Manager example.]: http://jsfiddle.net/27TMe/
[API]: http://dojotoolkit.org/api/dijit/form/_FormValueWidget