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 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

使goroutine同步的方法总结

在前面并发性能对比的文章中,我们可以看到Golang处理大并发的能力十分强劲,而且开发也特别方便,只需要用go关键字即可开启一个新的协程。

13330
来自专栏Jerry的SAP技术分享

BSP和JSP里的UI元素ID生成逻辑

WebClient UI渲染出来的DOM元素的这些C#_W#格式的id是在哪行ABAP代码被生成出来的?

36350
来自专栏iOS开发攻城狮的集散地

iOS app国际化 、跳转到系统设置、iOS10通知、正则表达式

17640
来自专栏Pythonista

Golang之Mysql事务

40020
来自专栏挖掘大数据

Cobub无码埋点关键技术实现流程(附图)

随着大数据时代的到来,数据采集也已经变的越来越重要。前端埋点作为一个比较成熟的数据接入手段被广泛应用着。目前埋点分为两种方式,有码与无码埋点。有码埋点比较容易理...

27460
来自专栏wblearn

ExtJS初体验

最近公司的一个系统有用到Extjs框架,对于之前完全用JQuery的js插件的我来说,对Extjs的api并不熟悉。extjs是个富客户端框架,一般用来做后台管...

14910
来自专栏一个会写诗的程序员的博客

bootstrap-table 前端分页,刷新事件代码实例

参考文档: http://bootstrap-table.wenzhixin.net.cn/

1.3K10
来自专栏静默虚空的博客

Eclipse 使用小结

代码智能提示 Java智能提示 Window -> Preferences -> Java -> Editor -> Content Assist -> Aut...

24460
来自专栏Golang语言社区

厚土Go学习笔记 | 34. 一个简单的 web 服务器实现

go 语言实现 web 服务器很容易。这样就可以很任意的建立 web 应用而互不干扰。当然,端口和IP要规划好。不过这里不讨论这个范畴的内容。我们只实现最基本的...

37190
来自专栏西安-晁州

rabbitmq消息队列——"工作队列"

二、”工作队列” ? 在第一节中我们发送接收消息直接从队列中进行。这节中我们会创建一个工作队列来分发处理多个工作者中的耗时性任务。 工作队列主要是为了避免进行一...

42700

扫码关注云+社区

领取腾讯云代金券