创建完全支持dojox.form.manager的自定义表单控件
2011-11-22 16:36
316 查看
本文翻译自: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:
问题原文是:
感谢提出这个问题,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的控件。因此,你需要以此为基类,比如:
这里简单说明下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方法里调用每个表单元素的这个方法。
好了,希望这些信息能够帮助你去实现自己的表单元素控件,好运!
原文作者: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文档里找到这些相关信息,但是如果要详细深入了解的话,最好还是能够看一看它们的源代码以了解它们到底是如何工作的。
值得注意的是,这些基类提供了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方法里调用每个表单元素的这个方法。
好了,希望这些信息能够帮助你去实现自己的表单元素控件,好运!
相关文章推荐
- 创建完全支持dojox.form.manager的自定义表单控件
- 弹出下拉编辑控件,跟踪输入内容自动过滤查询,过滤条件完全自定义,支持TextBox,支持DataGridView(弹出查询对话框),支持DevExpress 8.2的TextEdit,Gridview
- jQuery formValidator表单校验插件ver3.0全新功能发布,支持自动创建提示层。
- jQuery formValidator表单验证插件2.9.3版本已经支持对所有客户端控件的验证
- 从头开始教你创建一个自定义可视化的Winows Form控件(Divider Panel)--For Begnners
- jQuery formValidator表单验证插件2.9.3版本已经支持对所有客户端控件的验证
- ExtJS form表单控件创建
- 从头开始教你创建一个自定义可视化的Winows Form控件(Divider Panel)--For Begnners
- 用自定义的form表单对jqgrid数据进行检索查询
- Orchard创建自定义表单
- JavaScript EXT 创建一个 form 表单并提交
- 创建完全受信任的InfoPath表单
- Coolite Toolkit学习笔记九:表单布局控件FormLayout与FromPanel
- ExtJs 备忘录(1)—— Form表单(一) [ 控件使用 ](2)
- 创建产品列表控件时触发自定义DataUpated事件时,设置MultiView.ActiveViewIndex无效
- 不使用ASP.NET服务器端控件(包括form表单不加runat="server")来触发.cs里的事件(方法),(适用于有代码洁癖者)。
- 主题:Web自定义表单集成FusionCharts图形控件
- 自定义Form 移动标题栏控件
- form表单中的常用控件
- JQuery Form表单转JSON(支持复杂数据版)