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

本文翻译自：http://www.sitepen.com/blog/2011/10/14/creating-a-widget-with-full-dojox-form-manager-support/
原文作者：Ken Franqueiro
译者：Nate（[email protected])

作为免费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文档里找到这些相关信息，但是如果要详细深入了解的话，最好还是能够看一看它们的源代码以了解它们到底是如何工作的。

值得注意的是，这些基类提供了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方法里调用每个表单元素的这个方法。

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