专栏首页柠檬先生Extjs form 组件

Extjs form 组件

1.根类

Ext.form.Basic

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

2.表单的容器

Ext.form.Panel

容器自动关联 Ext.form.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.field.Trigger 触发器

Ext.form.field.Time  带有时间下拉框 和自动验证的input表单。

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    一个field container其中有一个专门

Ext.form.field.Radio 控件分类按列分布的布局安排

Ext.form.Label    

创建一个独立的 <label /> 元素,此元素可以加入到 form

 之中,也可以通过 forId 与该form中的表单域 field 关联

Ext.form.Labelable

一个混合类,允许组件被配置且装饰有标签和错误消息,

作为表单字段的通用组件。

Ext.form.FieldSet

  控件组,输入域组合容器. 包装一组输入域的容器,

Ext.form.FieldContainer  文本域容器

Ext.form.Panel

  重要的配置项

    title:'',             标题头
    bodyStyle:'',      自定义到css 样式
    frame : ,            以什么方式提交提画面
    height: ,            高
    width :, 宽
    renderTo:'',    指定某个id ,这元素将被渲染。
    defaultType:'',   当前容器中创建子组件时使用的默认 xtype
    defaults:{}

    由于混入了Ext.form.Labelable

      可以配置

        labelSeparator 字段名字和值的分割符号
        labelWidth 标签宽度

      重要的方法

        Ext.form.field.Text  文本框(xtype: textfield)

       重要的配置项

width : 150,
allowBlank: false, //不能是空
labelAlign :'left',
msgTarget:'side'//在字段的右面展示数据

    重要的方法

    Ext.form.field.ComboBox

    控件支持自动完成、远程加载、和许多其他特性。

Validations 内置校验

  Ext.data.validations

    本单例包含一个验证函数集合, 用以验证任何类型的数据。通常在 Model中使 用它们, 它们是自动生成和执行的。

       可以通过msgTarget改变错误信息的显示位置,通过invalidText改变错误信息的内容,每个字段都有自己的invalidText实现方式,错误信息中有许多可替换的标记

    例如,在Date Field的invalidText中,任何’{0}’ 都会被替换成这个字段的值,’ {1}’会被替换成这个字段的format,下面的代码展示了如何使用这个特性自定义错误信息

    自定义校验:

      用Text Field的regex配置应用一个校验规则,和使用maskRe配置限制可输入的字符,这有一个使用TextField校验输入时间的例子 

      {
           fieldLabel: 'Last Login Time',
           name: 'loginTime',
           regex: /^([1-9]|1[0-9]):([0-5][0-9])(\s[a|p]m)$/i,
           maskRe: /[\d\s:amp]/i,
           invalidText: 'Not a valid time.  Must be in the format "12:34 PM".'
    }

Ext.form.action.Submit

    这类用来处理用Form 提交数据,并可以处理应答的返回值。

    这个类的实例只在Form 提交的时候创建。

    buttons: [ {
          text: 'Submit',
          handler: function() { var form = this.up('form').getForm();
          if (form.isValid()) {
            form.submit({ success: function(form, action) {
              Ext.Msg.alert('Success', action.result.msg); },
            failure: function(form, action) {
                Ext.Msg.alert('Failed', action.result.msg);
            }
        });
      } else {
        Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
       } }
    } ]

    1.首先找到对这个类的的引用.

   2. 提交之前调用了isValid方法确保每个表单字段都已经填写正确

   3.最后调用submit方法,并传递了两个回调函数success和failure,在这两个回调函数的参数中,action.result可以引用到服务器端返回JSON的解析后的对象

  数据可以通过loadRecord方法直接从Model加载进入Form Panel:

   Ext.ModelMgr.getModel('User').load(1, {
        success: function(user) {
          // 当用户加载成功,加载数据到表单
          userForm.loadRecord(user);
        }
    });

  代替submit方法,可以使用BasicForm的updateRecord方法更新form绑定的model,然后用Model的save方法保存数据

    buttons: [ { text: 'Submit', handler: function() {
          var form = this.up('form').getForm(),
            //获取到这个
              from record = form.getRecord();
            // 得到底层的模型实例
              if (form.isValid()) {
                //提交前确保表单含有有效数据
                  form.updateRecord(record);
                // 更新的记录表单数据
                  record.save({
                    // 将记录保存到服务器
                  success: function(user) {
                     Ext.Msg.alert('Success', 'User saved successfully.')
                  },
                  failure: function(user) {
                   Ext.Msg.alert('Failure', 'Failed to save user.')
                  } });
                } else {
                // 显示错误警报,如果数据是无效的 Ext.Msg.alert('Invalid Data', 'Please correct form errors.') }
            }
      } ]

   demo 下载 https://github.com/ningmengxs/Extjs.git

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 移动设备HTML5页面布局

    在HTML5标准添加的新元素中,用于常见页面结 构的包括header footer footer nav aside aside article section...

    用户1197315
  • Extjs grid 组件

    表格面板类Ext.grid.Panel 重要的配置参数 columns : Array 列模式(Ext.grid.column.Columnxtype: gr...

    用户1197315
  • 常用正则表达式

    一, 1.^\d+$    //匹配非负整数(正整数 + 0) ---^:以数字开头 +:之前紧邻出现的一次或多次 2.[0-9]*[1-9][0-9]*$...

    用户1197315
  • Flask 入门系列教程(四)

    在 WEB 应用当中,表单是和用户交互的最常见的方式之一,学习好表单,是非常重要的,用户登录注册、撰写文章等等操作都离不开表单的功能。表单的处理并不简单,除了要...

    周萝卜
  • 周末手撸管理系统(一)

    小小咸鱼YwY
  • BlackArch Linux 2020.01.01版发布:新增120多款工具

    BlackArch Linux开发者于今天宣布了新的ISO和OVA镜像,带来了诸多改进并引入了多款新工具,以帮助安全专家进行渗透测试和有道德的破解操作系统工作。...

    Debian中国
  • django 学习笔记一

    文件里面配置了 DJANGO_SETTINGS_MODULE,也就是 设置(setting.py) 的路径

    onety码生
  • Django使用普通表单、Form、以及modelForm操作数据库方式总结

    Django使用普通表单、Form、以及modelForm操作数据库主要应用于增删该查的情景下,流程通用如下,只是实现方式不一样: 进入填写表单页...

    菲宇
  • ndn挖坑记(一)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Enterprise_
  • Flutter跨平台移动端开发

    constrainedBox 可以给子 widget 添加更多约束条件。与 sizedBox 同通过 renderConstrainedBox 绘制

    码脑

扫码关注云+社区

领取腾讯云代金券