Form组件

1.根类
      Ext.form.Basic
      提供了表单组件,字段管理,表单提交,数据加载的功能
2.表单的容器
      Ext.form.panel
      容器自动关联 Ext.form.Basic的实例对象,更方便的进行字段的配置
      重要属性
          defautType : "" (设置默认子项的xtype)
3.数据交互和加载
      Ext.form.action.Action(两种表单自身的提交方式)
          Ext.from.action.Submit Ajax方式提交
              Ext.form.action.StandardSubmit 原始鼻癌单提交方法
          Ext.form,action.DirectLoad
              Ext.form.action.DirectSubmit 类似于dwr的方式提交
4.字段的类型
      Ext.form.field.Base 根类
          混入了的类[Ext.form.field.Field]得到表单的处理功能
          混入了的类[Ext.form.Labelable]得到表单标签错误信息提示功能
          Ext.form.field.Text 文本框方式的如下:
              Ext.form.field.TextArea 富文本域
              Ext.form.field.Trigger 触发器
                  Ext.form.field.Picker 触发器子类(选择器)
                      Ext.form.field.Time
                      Ext.form.field.Date
                      Ext.form.field.Number
                      Ext.form.field.file 文件上传
                      Ext.form.field.ComboBox 选择框
              Ext.form.field.Checkbox 选择框方式的
                  Ext.form.field.Radio 单选框
              Ext.form.field.Hidden 特殊的--隐藏字段(数据页面不显示,但后台需要)
      Ext.form.field.HtmlEditor 特殊的--文本编辑框
5.其中夹杂布局的类
      Ext.form.FieldContainer
          Ext.form.CheckboxGroup
              Ext.form.RadioGroup
      Ext.form.Label
          Ext.form.Labelable
      Ext.form.FieldSet
      Ext.form.fieldContainer (里面可以放多个表单项,进行统一布局)
6.常用的组件配置
      Ext.form.Panel
          重要的配置项
              title:'',
              bodyStyle:'',
              frame:true,
              height:122,
              width:233,
              renderTo:'',
              defaultType:'',
              defaults:{
                  allowBanlk:true,
                  msgTarget:'side',
                  pageSize:4  //配置这个参数即可在下拉框内一分页的形式操作数据 
              },
              由于混入了Ext.form.labelable所以可进行如下配置;
                  labelSeparator 字段的名称与值直之间的分隔符
                  labelWidth 标签宽度          
      Ext.form.field.Text 文本框(xtype:textfield)
          重要配置项
              width:156,
              allowBlank:false,//不能为空
              labelAlign:'left',
              msgTarget:'side' //在字段的幼斌展示提示信息
              grow:false,//是否在这个表单字段规定长度内,自动根据文字的内容进行伸缩
              selectOnFocus:true, //当字段的内容得到焦点的时候,选择所有文本
              regex : /\d+/g,
              regexText : '请输入数字',
              inputType:'password',//其它类型:email、url等。默认text
              //vType:'IPAddress'用于数据校验,Ext.form.field.VTypes
              //如果校验不是你想要的,可以自定义,如下:
              //custom Vtype for vtype:'IPAddress'
                Ext.apply(Ext.form.field.VTypes, {
                    IPAddress:  function(v) {
                        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
                    },
                    IPAddressText: 'Must be a numeric IP address',
                    IPAddressMask: /[\d\.]/i //不符合正则的,键盘整么输入,都不起作用
                });
      Ext.form.field.Number
          重要的配置项
              allowDecimals:false,//不能输入小数
              hideTrigger:true,//隐藏框帮边的调节按钮    
              decimalPrecision : 3,//自动四舍五入,保留小数位为3位。
              emptyText:'请输入小数'//默认框内灰色提醒
              //指定范围
              minValue:10,
              maxValue:100,    
              baseChars:'01',//表示框内只能输入0和1        
              step:'0.8',//指定步长
              
      Ext.form.field.ComboBox
          Ext.view.BoundList 约束列表
          重要属性
              listConfig:{
                //规划下拉框到底是什么样的样式
                //这里面的值是根据BoundList里面的属性进行初始化的
                getInnerTpl:function()
                {
                    return "<div style='color:red'>${name}</div>";//动态改变下拉框内容样式
                }
              } 
              queryMode:'remot', //local(本地数据)|remot(远程数据)
              valueFiled:'id',//后台需要
              displayField:'name'//页面显示的
              forceSelection:true, //必须选中数据集合中有的数据
              minChars:2,//表示输入2个字符的的时候,就到后台请求数据
              queryDelay:400,
              queryParam:'name',//指定往后台传入的参数名称,对应的参数值是你输入的参数
              multiSelect:true, //允许多选
              typeAhead:true,   //自动补全
      Ext.form.field.Date
          重要属性
              disableDays:[0,6] //周日与周六不能选为灰色
7.常用事件
      当字段类型为xtype:'triggerfield',它具有onTriggerClick事件,
      经常用于从其它弹出表格中选择某个值。              
                  
8.常用操作    
      获取表单中某项的值
          var fieldValue = Ext.getCmp('表单id').getForm().findField('字段名称').getValue();     
          
      自动填充表单的各项值
        loadRecord( Ext.data.Model record) : Ext.form.Basic
        Loads an Ext.data.Model into this form by calling setValues with the record data. See also trackResetOnLoad.

posted @ 2013-04-27 18:14  赵雪丹  阅读(231)  评论(0编辑  收藏