Ext JS表单与输入控件（五）

一、制作一个表单

var  form  =  new  Ext.form.FormPanel（{

    defaultType：‘textfield’，

    labelAlign：‘right’，

    title：‘form’，

    labelWidth：50，

    frame：true，

    width：220，

    item：[{

        fieldLabel：‘文本框’

    }]，

    buttons：[{

        text：‘按钮’

    }]

}）;

form.render（"form"）；

HTML里不需要写很多代码了，只需定义一个

就可以实现这一切。初始配置显然变得更紧凑，利用items和buttons指定包含的控件和按钮。

二、输入控件

（1）表单控件

（2）基本输入控件Ext.form.Field：

        是所有表单输入控件的额基类，其他的输入入控件都是基于Ext.form.Field扩展得来的。Ext.form.Field中定义了输入控件通用的属性和功能函数，这些通用的属性和功能函数大致分为3大类：页面显示样式、控件参数配置和数据有效性校验。

（3）文本输入控件Ext.form.TextField：

        直接继承自Ext.form.Field，它是一个专门用来输入文本数据的输入控件。除了Ext.form.Field中提供的通用属性和功能函数外，Ext.form.TextField最常用的特性就是可以检测内部输入的数据是否为空，还可以控制输入数据的内容及最大最小长度。

（4）多行文本输入控件Ext.form.TextArea：

        用来输入文本的输入控件，与Ext.form.TextField的不同之处是，他可以输入多行文本。除此之外，两者的用法都是相同的。

（5）时间输入控件Ext.form.TimeField：

        用来选择时间的输入控件，它可以通过指定一天中的起始时间，结束时间以及时间间隔的方式来为用户提供可选择的时间。

（6）在线编辑器Ext.form.HtmlEditor：

        是一个简易的在线编辑器，能对文本进行各项设置。

（7）隐藏域Ext.form.Hidden：

        直接继承自Ext.form.Field，可以通过它的setValue()和getValue()函数对它执行赋值和取值操作，但它不会显示在页面上。当我们想保存一些需要隐藏的数据时，可以使用Ext.form.Hidden。

（8）下拉输入框Ext.form.TriggerField：

        是ComboBox、DateField和TimeField的父类，它既可以通过手工录入数据，也可以通过选择录入数据。为了显示下拉选择的功能，需要覆写它的onTriggerClick()函数以实现弹出窗口。

三、使用表单提交数据：

        Form最重要的功能是向后抬提交数据。但是，普通的HTML表单只能执行最单纯的Submit提交，EXT中的Form却支持三种形式的提交：

（1）EXT默认的提交形式：

        form对象有一个submit函数，用途就是提交数据。

（2）使用HTML原始的提交形式：

        EXT默认的提交形式是不会进行页面跳转的，主要是考虑到“one page one application”的形式。但是，有的用户还是希望在点击“提交”按钮后就可以跳转到其他页面。在EXT里这并不是什么难事，EXT本质是JavaScript，原来的JavaScript能做的事情它都可以做。Ext.form.Form也只是对原始Form进行了装饰而已。找出那个我们都熟悉的Form，直接在它上面调用submit()就可以了。

        难点就在于找出Ext.form.Form中层层包裹的form。注意，EXT中所有的控件都有el，el都是有DOM的，这个DOM模型就是EXT控件在页面上真实对应的部分了。于是我们只需要修改按钮的handler函数。

（3）单纯Ajax：

        这里跳过表单自带的Ajax功能，使用单独的Ajax。实际上，表单自身的submit就使用了Ajax方式。想进一步控制表单里的数据，调用Ajax也是一个不错的选择。

        既然是使用外部Ajax，就只需知道如何从中把字段的数据取出来，一共有以下几种方式：

        1.form.getValues()函数：它有一个参数，如果参数为true，就返回JSON组装的字符串；如果是false，就返回JSON对象 ，对应其中每个字段的名称和值。默认是false。

        2.findField()函数：它可以获得表单里的控件。

转载于:https://my.oschina.net/tobeexpertismydream/blog/2990579