资源描述：
《extjs最常用的表单课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、软件界面设计最常用的表单1表单及表单元素了解Ext.form.BasicForm基本表单认识Ext.form.FormPanel表单面板Ext.form.Field表单字段Ext.form.TextField文本区Ext.form.TextArea多行文本域Ext.form.NumberField数字输入框Ext.form.Checkbox复选框Ext.form.Radio单选框Ext.form.TrigglerField触发字段Ext.form.ComboBox组合框Ext.form.TimeField时间选择框Ext.form.DateField日期选择框Ext.form.Hi
2、dden隐藏字段Ext.form.HtmlEditorHTML编辑器Ext.form.FieldSet字段集2实现表单验证常见的验证类型表单验证VType自定义VType验证3表单的提交和加载Ext.form.Action基础表单数据加载表单数据提交一表单及表单元素特性表现在：表单的异步提交可配置的表单数据验证可配置的表单错误信息提示对特殊数据（数组，日期和时间等）输入组件的支持１了解Ext.form.BasicForm基本表单默认下表单采用ajax方式进行异步数据提交，如果要使用原始方式提交表单可以覆盖表单的onsubmit及submit方法，在extjs的文档中给出了标准实现。
3、VarmyForm=newExt.form.BasicFrom(“form-el-id”,{onSubmit:Ext.emptyFn,submit:function(){this.getEl().dom.submit();}});常用配置项baseParams:Object, //请求时的附加参数,格式为{id:'123',foo:'bar'} errorReader:DataReader, //提交时发生验证错误,这个dataReader将会被使用fileUpload:Boolean, //支持文件上传method:String, //GET或者POST read
4、er:DataReader, //load时使用的数据读取器timeout:Number, //超时时间trackResetOnLoad:Boolean,//支持使用reset方法恢复原始值url:String //form要提交的url地址常用方法add(Fieldfield1,[Fieldfield2],[Fieldetc]):BasicForm增加字段field1,field2,etc applyIfToFields(Objectvalues):BasicForm applyToFields(Objectvalues):BasicForm用传入的values呼叫E
5、xt.applyIf/apply方法clearInvalid():BasicForm清除当前basicform中所有的非法信息doAction(String/ObjectactionName,[Objectoptions]):BasicForm认识Ext.form.FormPanel扩展自Ext.Panel组件，是表单项的容器，可以接受所有在Ext.form.BasicForm中出现的配置项。1表单提交方式Ajax异步方式进行，改善用户操作Html原始表单Form.submit()这种方式是同步的，会导致浏览器页面的跳转，打断用户的操作，降低用户体验2表单验证的支持只需要在组件上配
6、置就可以实现输入数据的本地验证Html需要自己编写相应验证代码3对表单组件的支持下面的例子是用Ext.form.TextField和Ext.form.NumberField组件，本例在于显示不同位置提示信息的效果example201under方式注意表单高度2side方式注意表单宽度Ext.form.TextField文本区扩展自Ext.form.Field类，代替inputtype=text以一个登陆页面常见表单为例：包括用户名和密码两个输入框example21常用配置表allowBlank:Boolean //允许为空blankText:String //如果为空验证错
7、误时的提示文字,默认Thisfieldisrequired disableKeyFilter:Boolean emptyClass:String emptyText:String grow:Boolean //自动生长?,如果需要,会加宽当前inputtype="text" growMax:Number growMin:Number maskRe:RegExp //仅允许输入与maskRe匹配的按键maxLength:
