zoukankan      html  css  js  c++  java
  • 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,
                  233,
                  renderTo:'',
                  defaultType:'',
                  defaults:{
                      allowBanlk:true,
                      msgTarget:'side',
                      pageSize:4  //配置这个参数即可在下拉框内一分页的形式操作数据 
                  },
                  由于混入了Ext.form.labelable所以可进行如下配置;
                      labelSeparator 字段的名称与值直之间的分隔符
                      labelWidth 标签宽度          
          Ext.form.field.Text 文本框(xtype:textfield)
              重要配置项
                  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.

  • 相关阅读:
    模板【洛谷P3368】 【模板】树状数组 2
    模板【洛谷P3812】 【模板】线性基
    Java面向对象-多态
    Java常用工具类
    Java常用工具类
    Java static关键字
    MyBatis对象关联查询demo (一对多,多对一)
    将Cmder添加到系统右键菜单中
    IDEA 创建JavaWeb应用打包并发布
    IDEA 调试与打包
  • 原文地址:https://www.cnblogs.com/zhaoxd/p/3047658.html
Copyright © 2011-2022 走看看