表单Ext.form.FormPanel

1、表单

对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的。而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素。FormPanel继承自Panel,在Panel的基础上提供与表单相关的各种特性,比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等;另外FormPanel固定使用form布局,前面关于布局一节中的内容我们说过,form布局也就是专门用于组织包含输入元素的布局。

看下面的代码:

}, items: [ {name: "username", fieldLabel: "姓名"}, {name: "password", fieldLabel: "密码", inputType: "password"}, {name: "email", fieldLabel: "电子邮件"}, {xtype: "textarea", name: "intro", fieldLabel: "简介"} ], buttons:[{text:"提交"}, {text:"取消"}] }); }); </script>

运行效果如下:

在上面的代码中,使用new Ext.form.FormPanel来创建表单面板,通过labelWidth来指定表单中字段标签的宽度,labelAlign来指定字段标签的对齐方式,在defaults中指定该容器中所有子元素默认类型都是textfield,也就是录入文本框。在items定义的子元素中,一共包含三个textfield元素以及一个textarea元素,这些元素都包含一个name属性,相当于传统<input>标签中的name属性,fieldLabel属性用来指定字段标签。

2、BasicForm

表单面板FormPanel包含一个form属性,该属性是一个Ext.form.BasicForm 类型的对象,可以直接访问,也可以通过getForm()方法得到。BasicForm 表示基本的表单,包含了submit、load、reset等方法,用来取代传统表单<form>中的submit、reset等方法,通过调用这些方法可以实现提交表单、表单信息重置等操作。下面的代码实现了表单的提交操作:

}, items: [ {name: "username", fieldLabel: "姓名"}, {name: "password", fieldLabel: "密码", inputType: "password"}, {name: "email", fieldLabel: "电子邮件"}, {xtype: "textarea", name: "intro", fieldLabel: "简介"} ], buttons:[{ text:"提交", handler: function(){ f.form.submit({ waitTitle:"请稍候", waitMsg:"正在提交表单数据,请稍候" }); } }, { text:"重置", handler: function(){ f.form.reset(); } }] }); }); </script>

运行结果如下:

3、Field,表单元素

Field代表各种各样的数据录入项;在程序中,我们一般直接使用Field的子类,包括Checkbox, CheckboxGroup, CompositeField, DisplayField, Hidden, HtmlEditor, SliderField, TextField等。

Field组件一般包括一个fieldLabel属性及name属性。fieldLabel是在Component中定义的,用来定义字段的元素。

4、表单动作Ext.form.Action

  表单动作包括表单内容提交Submit,表单数据加载Load两种。默认情况下都是通过Ajax的方式向服务器端发送数据,提交表单数据或加载表单中的内容。

  关于表单动作Action,我们将在后面的课程中讲解。

Ext Form的更多相关文章

  1. EXt form属性

    配置项: success:执行成功后回调的函数,包括两个参数:form和action failure:执行失败后回调的函数,包括两个参数:form和action method:表单的提交方式,有效值包 ...

  2. ExtJs之Ext.form.field.TimePicker DatePicker组合框

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  3. ExtJs之Ext.form.field.ComboBox组合框

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  4. 解决Ext.form.DateField在浏览器中显示可能有问题

    解决Ext.form.DateField在浏览器中显示可能有问题,界面将会拉的很长很长.如下图:  办法: 1:设置css的长度 .x-date-menu { padding-top:2px;padd ...

  5. 表单Ext.form.FormPanel(转)

    1.表单 对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的.而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素.FormPanel继承自 ...

  6. Ext.form.ComboBox 后台取值 动态加载 ext5.0.0

    我用的extjs是5.0.0版本的. 请注意:如果这里没有的combobox相关内容,这里一定有. 开始的时候keyup事件取到的数据就是放不到ComboBox中,放全局变量也不好用.最后大神出手帮忙 ...

  7. ExtJS4.2学习(19)在线编辑器Ext.form.HtmlEditor(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-24/191.html --------------- ...

  8. ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html --------------- ...

  9. Ext.form.FormPanel定义的参数说明

    1.formId : String (可选的)FORM标签的id(默认是自动生成的). 2.labelWidth : Number 标签的宽度.该属性级联于子容器. 3. itemCls : Stri ...

  10. ExtJs 第二章,Ext.form.Basic表单操作

    1.认识Ext.form.Panel表单面板         Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 ...

随机推荐

  1. day9--paramiko模块

    志不坚者智不达 paramiko:在Linux链接其他机器,每台Linux机器都有一个SSHClient:Python自己也写了一个SSHClient,那么Python写paramiko创建SSHCl ...

  2. python学习day4软件目录结构规范

    为什么要设计好目录结构? 参考:http://www.cnblogs.com/alex3714/articles/5765046.html "设计项目目录结构",就和"代 ...

  3. 实现nlp文本生成中的beam search解码器

    自然语言处理任务,比如caption generation(图片描述文本生成).机器翻译中,都需要进行词或者字符序列的生成.常见于seq2seq模型或者RNNLM模型中. 这篇博文主要介绍文本生成解码 ...

  4. CSU - 2058 跳一跳

    Description 冰弦非常热衷于过气微信小游戏"跳一跳",现在给出了他每次游戏时的一些信息,请你帮他计算一下每局游戏的得分. 跳一跳的游戏规则如下: 玩家操控一个小棋子,在形 ...

  5. 用户管理和FTP服务配置

    批量创建用户 python脚本:creuser.py import osulist=open('usernames','r')for x in ulist: cmd="useradd -g ...

  6. 监控cpu、内存 <shell>

    获取cpu.内存结果 pid=$1 #获取进程pid echo $pid interval=1 #设置采集间隔 while true do echo $(date +"%y-%m-%d %H ...

  7. 使开发更便捷——Visual Studio 使用技巧——快捷键

    下面是.Net开发中常用的快捷键,熟练使用可以提高开发效率: Ctrl + K + C //注释代码 Ctrl + K + U //取消代码注释 Ctrl + k + d //快速格式化代码 Shif ...

  8. oslo.config

    cfg Module来自于OpenStack中的重要的基础组件oslo.config,通过cfg Module可以用来通过命令行或者是配置文件来配置一些options, 对于每一个选项使用Opt类或者 ...

  9. redis修改密码

    ## 无需添加密码参数 redis-cli.exe -h 127.0.0.1 -p 6379 ## 获取当前密码 config get requirepass ## 设置当前密码,服务重新启动后又会置 ...

  10. Luogu 4492 [HAOI2018]苹果树 组合数

    https://www.luogu.org/problemnew/show/P4492 找每个编号的点的父边的贡献,组合数和阶乘就能算了. 我考场上怎么就是没想到呢. 调了好久好久好久好久调不出来,样 ...