关闭

形式

343人阅读 评论(0) 收藏 举报

形式

表格面板是没有什么比一个基本的面板与表单处理能力增加。表板可用于在整个外部应用程序,只要有需要收集来自用户的数据。此外,表板可以使用任何容器的布局,提供了方便,灵活的方式来处理各自领域的定位。表板也可以被绑定到一个模型,很容易地加载数据和提交数据回发到服务器。引擎盖下的表单面板包装的基本形式,它处理所有输入田间管理,验证,提交和形式加载服务。这意味着任何可用于表单面板上直接基本形式的配置选项。

基本形式小组

要开始了,这里是如何创建一个简单的形式,收集用户数据:

分机创建“Ext.form.Panel”,{
    renderTo分机getBody()
    标题“用户窗体”
    高度130
    宽度280
    bodyPadding10
    defaultType“文本框”
    项目:[
        {
            fieldLabel'名字'
            名称“名字”
        },
        {
            fieldLabel'姓'
            名称“的lastName”
        },
        {
            的xtype'的DateField' 
            fieldLabel'出生日期'
            名称“生日”
        }
    ]
});
 

这种形式本身呈现文档的正文有三小号- “第一名称”,“姓氏”,“出生日期”。字段添加到表单面板使用的项目配置。的fieldLabel配置定义文本将出现在标签字段旁边,和名称配置成为基本的HTML字段属性名称请注意如何将本表格小组有defaultType的 '文本框'。这意味着,任何项目,没有一个的xtype指定(“第一名称”和“姓氏”在这个例子中的字段),是文本字段小号。另一方面,“出生日期”字段的xtype “的DateField',这使得它明确定义的日期字段日期字段只包含有效日期数据,并拿出一个选择日期的DatePicker

现场演示的例子简单的表格

领域

字段类型

Ext JS的提供开箱即用一套标准的字段类型。在任何Ext.form.field命名空间可用于在表格面板。欲了解更多信息,请参阅每个字段类型的API documentaion:

验证

1。内置在验证

Ext JS的内置支持任何类型的字段验证,某些领域已经建立验证规则。例如,如果进入一个日期字段,该值不能被转换成一个日期,现场将有X-形式无效场 CSS类添加到HTML元素。如果有必要,可以改变这个CSS类使用invalidCls配置。在默认主题,添加的invalidCls的增加了一个红色的“无效,强调”:

无效的字段

一个字段包含无效的数据也将显示一条错误消息。默认情况下,此消息显示工具提示:

无效的字段哈弗

很容易改变的字段的错误消息位置msgTarget配置,和“ invalidText配置改变错误消息。每场提供其自己的执行invalidText,和许多支持在错误信息的令牌进行替换。例如,在一个日期场的invalidText, “{0}”任何事件将被替换字段的值,任何出现“{1}”将替换所需的日期格式下面的代码演示放置错误消息直属场,和自定义错误消息的文本:

{ 
    的xtype  '的DateField' 
    fieldLabel  '出生日期'  '生日' 
    msgTarget  '下'  / /位置的错误消息 “{0}”坏。“{1}”好。“  / /自定义错误消息的文本
}

自定义错误消息

2。自定义校验

使用内置在验证一些验证的要求不能得到满足。实现自定义验证最简单的方法是使用申请文本字段正则表达式配置验证规则,限制字符可以进入该领域中键入maskRe配置。下面是一个文本字段,例如,验证时间。

{ 
    fieldLabel  '上次登录     一个有效的时间。必须在格式“12:34”。
}

虽然上述方法验证一个单一的领域,它是不实际的应用程序共享相同的自定义验证的许多领域。Ext.form.field.VTypes类提供了一个用于创建可重用的自定义验证的解决方案。这里可以创建定制的“时间”验证:

/ /的定制Vtype为 
 
 
    的vtype验证功能
    时间 功能VAL  {的
        回报timeTest 测试VAL ); 
    } 
    / / vtype Text属性:错误文本时显示的验证函数返回的虚假
    timeText  “不是有效的时间。的格式必须是“12:34” 
    / / vtype面膜的特性:按键过滤口罩
    timeMask  / [\ D \ S:AMP] /
 });

一旦已经创建了一个自定义验证,它可以用来对文本字段应用在整个使用vtype配置:

{ 
    fieldLabel  '上次登录时间“ 
    名称 'loginTime' 
    vtype  '时间' 
}

看到工作演示验证范例如需更多关于自定义验证的详细信息,请参阅API文档VTypes

数据处理

提交表单

将数据提交到服务器的最简单的方法是使用 url 配置的基本形式由于表格面板包装的基本形式,我们可以使用任何基本形式的配置选项表单面板上直接:

分机创建“Ext.form.Panel'  { 
    ... 
    URL  'ADD_USER“ 
    项目 [ 
        ... 
    ] 
});

基本形式的提交方法可用于将数据提交到配置的URL

 
      
        
     
           
                  得到的基本形式
                 形式参考isValid ()) {  / /确保形式包含有效数据前   
                           
                          
                            
                        
                    
                   显示错误警报,如果数据是无效的
                    分机讯息警报“无效数据”  “请正确形式错误。” 
                
            } } 
        } 
    ] 
});

在上面的例子,一个按钮配置与处理程序,处理表单提交。处理程序采取以下措施:

  1. 首先必须获得基本形式的参考。
  2. 那么isValid方法被称为前提交验证的领域,没有验证错误。
  3. 最后提交的方法调用,通过两个回调函数- 成功失败的action.result是指在这些回调函数解析JSON响应。

上面的例子中,预计一个JSON响应,看起来像这样:

 “成 ​​功”  真实的 “味精”  “用户添加成功”  }

表单提交实例

表格模型绑定

整个Ext JS为代表的各类数据,以及检索和更新服务器上的数据模型类。模型代表用户定义的领域的用户,以及加载和保存数据的代理:

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['firstName', 'lastName', 'birthDate'],
    proxy: {
        type: 'ajax',
        api: {
            read: 'data/get_user',
            update: 'data/update_user'
        },
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});

与模型工作的更多细节,请参阅数据手册

数据可以装入一个 Form 面板,直接从模型使用loadRecord方法:

分机ModelMgr “用户” )。负载1  {  / /加载用户编号为“1”的
    成功 功能用户 { 
        用户窗体loadRecord 用户);  / /当用户成功加载,加载到表单的数据
    
} } );

最后,使用提交方法来保存数据,而不是基本形式的updateRecord方法用于更新表单数据的记录,以及模型的保存方法被称为数据保存到服务器:

 
      
        
     
           
                  得到的基本形式
                    记录形式getRecord ();  / /获得底层模型实例
                 形式参考isValid ()) {  / /确保形式包含有效数据的,然后再提交updateRecord 纪录);  / /更新与表单数据
                    记录在案的 ({  / /保存记录到服务器
                        的成功 功能用户 
                            { EXT 消息警报'成功'  '。用户保存成功“ 
                        },
                        失败 功能用户 
                            { EXT 讯息警报'失败'  '无法保存用户。' 
                        
                    } } ); 
                }  否则 {  / /显示错误警报,如果数据是无效的
                    分机讯息警报“无效数据”  “请正确形式的错误。“ 
                } 
            
        } } 
    ] 
});

模型绑定示例

布局

表格布局用来处理在一个Ext JS的应用程序组件的大小和定位。 面板可以使用任何容器的布局上布局的更多信息,请参阅布局和容器指南

例如,在形式的定位领域水平可以很容易被使用的HBox布局:

看到现场演示的布局范例

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:91329次
    • 积分:1196
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:7篇
    • 译文:22篇
    • 评论:1条
    文章分类
    文章存档