Form表单的入门详解

1.根类

       Ext.form.Basic

              提供了表单组件，字段管理，数据验证，表单提交，数据加载的功能

2.表单的容器

       Ext.form.Panel

              容器自动关联  Ext.form.Basic 的实例对象更方便的进行字段的配置 

              可以利用getForm方法来得到Basic对象

              重要属性： defaultType:"" 设定默认子项的xtype

3.数据交互和加载

       Ext.form.action.Action

              Ext.form.action.Submit  ajax方式提交异步操作

                     Ext.form.action.StandardSubmit  原始表单提交方法，会转到页面

              Ext.form.action.DirectLoad

                     Ext.form.action.DirectSubmit指令式的模式

4.字段的控制

       Ext.form.field.Base是根类

              混入了类 Ext.form.field.Field 得到表单值的处理功能

              混入了类 Ext.form.Labelable 得到表单标签错误信息提示的功能

              Ext.form.field.Text  文本框方式的

                     Ext.form.filed.TextArea  文本域

                     Ext.form.filed.Trigger  触发器

                            Ext.form.filed.Picker  选择器

                            Ext.form.filed.Time

                            Ext.form.filed.Data

                            Ext.form.filed.Number

                            Ext.form.filed.File文件上传的

                            Ext.form.filed.ComboBox选择框

              Ext.form.filed.Checkbox选择框方式的

                     Ext.form.filed.Radio  单选框

              Ext.form.filed.Hidden  特殊的---隐藏字段

       Ext.form.filed.HtmlEditor     特殊的---文本编辑框

5.其中夹杂布局的类

       Ext.form.FieldContainer

              Ext.form.CheckboxGroup

                     Ext.form.RadioGroup

       Ext.form.Label

              Ext.form.Labelable

       Ext.form.FieldSet

6.代码实例与注释说明：

Ext.onReady(function(){

       //定一个一个model,用于加载数据

       Ext.define("person",{

              extend:"Ext.data.Model",

              fields:[

                     {name:"userName",type:"auto"},

                     {name:"passWord",type:"auto"}

              ]

       });

       varp=new person({userName:"marico_zhang@163.com",passWord:"123456"});

       //--扩展验证类 ,用于自定义验证

       varpassText=/[123]/i //定义正则

       Ext.apply(Ext.form.field.VTypes,{

              myPass:function(val,field){

                     returnpassText.test(val); //正则验证

              },

              myPassText:"密码格式错误",

              myPassMask:/[123]/i//指定正则，不符合的输入不进去

       });

       vartextForm=Ext.create("Ext.form.Panel",{

              title:"form中文本框实例",

              bodyStyle:"padding:55 5 5",

              frame:true,

              height:120,

              width:300,

              id:"my_form",

              renderTo:"formDemo",

              defaultType:"textfield",//默认的类型

              defaults:{//默认的字段项的配置  field的默认配置

                     labelSeparator:":",  //label的分隔符

                     labelWidth:50,//label的宽

                     width:200,  //field 的宽

                     allowBlank:false,//是否能为空

                     msgTarget:"side",//提示信息现在的位置

                     labelAlign:"left"//左对齐

              },

              items:[{

                     fieldLabel:"Name",//label的信息

                     name:"userName",//指定的field的名字

                     id:"userName",

                     selectOnFocus:true,//当文本框获取焦点的时候是否全部选中内容

                     regex:/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,  //对内容进行判断，正则表达式两边加定界符

                     regexText:"请用邮箱来注册", //正则的提醒

                     grow:false//是否在这个表单字段规定长度内自动根据文字的内容进行伸缩

              },{

                     fieldLabel:"Pass",//label的信息

                     name:"passWord",//指定的field的名字

                     id:"passWord",

                     inputType:"password",//规定输入的类型

                     vtype:"myPass"

              }],

              buttons:[//指定表单中的按钮

                     {text:'登录系统',handler:function(b){

                           

                            //考虑思路：通过Base来得到数值，需先得到base

                            //通过Basic来得到Base 方法findField(String id)

                            //通过form中的Panel getForm()方法得到Basic

                            //通过1>按钮按层次来得到 owerCt字段

                            //2>通过ID来得

                            varformObj=Ext.getCmp("my_form");

                            varbasic=formObj.getForm();

                            varnameField=basic.findField("userName");

                            varnameValue=nameField.getValue();

                            alert(nameValue);

                     }},{

                     text:"重置",handler:function(b){

                            varformObj=Ext.getCmp("my_form");

                            varbasic=formObj.getForm();

                            basic.reset();//重置

                     }},{

                            text:"装载数据",handler:function(b){

                            varformObj=Ext.getCmp("my_form");

                            varbasic=formObj.getForm();

                            basic.loadRecord(p);//重置         

                     }}

              ]

       });

});