表单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. CVE-2013-0025

    Microsoft IE ‘SLayoutRun’释放后重用漏洞(CNNVD-201302-197) Microsoft Internet Explorer是微软Windows操作系统中默认捆绑的WE ...

  2. 洛谷P1331 海战 题解

    题目传送门 思路 肯定食用dfs啦... 但关键是两条船接触了怎么判断呢?? 上图: 可以发现一下规律 当两条船接触时,必有一条直线连续穿过两条船 当一条船不与另一条船接触时,没有一条直线连续穿过两条 ...

  3. abp zero 4.3 发布

    Demo URL: http://abpzerodemo.demo.aspnetzero.com Username: systemPassword: 123456 需要源码,请加QQ:3833-255 ...

  4. Hive(九)Hive 执行过程实例分析

    一.Hive 执行过程概述 1.概述 (1) Hive 将 HQL 转换成一组操作符(Operator),比如 GroupByOperator, JoinOperator 等 (2)操作符 Opera ...

  5. Hive(四)Hive的3种连接方式与DbVisualizer连接Hive

    一.CLI连接 进入到 bin 目录下,直接输入命令: [root@node21 ~]# hive SLF4J: Class path contains multiple SLF4J bindings ...

  6. CF455D. Serega and Fun

    D. Serega and Fun time limit per test 4 seconds memory limit per test 256 megabytes input standard i ...

  7. UtraEdit正则表达式替换.def

    * (?   替换(?结尾 ),*$  替换),开头

  8. Ionic入门八:头部与底部

    1.Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮. ionic 默认提供了许多种颜色样式,你可以调用不同的样式名,当然也可以自定义一个. <div cl ...

  9. thinphp中volist嵌套循环时变量$i 被污染问题,key="k"

    默认是$i,但是嵌套循环是使用$i,默认的变量$i就会被污染.可以自定义设置变量key="k" k任意. 用 key="k" 代替默认的 $i 1 2 3 4 ...

  10. Oracle数据库DDL,DML,视图,PLSQL编程

    动手敲~~~ --创建一个表空间--beijing create tablespace beijing datafile 'c:\beijing.dbf' size 100m autoextend o ...