EXTJS表单
但是如果只是加上css样式，在我看来，ExtJS无法给我一个理由，让我选择它的表单控件，而不是选择<input>控件，因为我已经使用原有的控件相当熟练。
Extjs考虑了类似我这样的想法，它当然有更强大的功能。想想我们原有的<input>控件还有什么令我们不爽的地方，又有哪些功能得让我们反复的自己编写。魔兽世界里地精总说的一句话“需求是发明之母”，看看ExtJS为我们添加了什么功能。
1、输入框的数据校验
2、原来没有的Combox控件
html里面表单放到<form>之中，Ext里面表单则放到FormPanel中，FormPanel继承自Ext.Panel。所以FormPanel也可以被放在容器之中。
FormPanel有两种布局form(横向)和column(纵向)，这一章还将讲到FormPanel特有的form布局。
我们先添加一个FormPanel，并放置一个输入框、一个提交按钮创建一个最简单的表单
<head>
<title>跟浩然哥哥学习表单</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var myFormPanel = new Ext.form.FormPanel({
xtype: 'form',
title: '浩然哥哥的FormPanel',
width: 400,height: 400,
standardSubmit: true,
url: 'message_box.html',
items:
[
],
buttons: [{ text: '提交', handler: login}]
});
var viewport = new Ext.Viewport({
items: [myFormPanel]
});
function login() {
myFormPanel.getForm().submit({
clientValidation: true,
waitMsg: 'Please wait...',
waitTitle: 'Hint',
method: 'GET',
success: function () {
Ext.Msg.alert('成功', '恭喜！表单提交成功');
},
failure: function () {
Ext.Msg.alert('失败', '对不起，表单提交失败！');
}
});
}
});
</script>
</head>
<body>
</html>
当前我们就创建了一个简单的FormPanel，接下来，我们一一添加表单组件。
一、文本输入框Ext.form.TextField
刚才我们已经添加一个文本输入框
................
items:
[
{ xtype: 'textfield', fieldLabel: '输入框' }
]
................
介绍TextField的配置属性
| 名称 | 说明 | 类型 |
| allowBlank | 是否允许为空 | Boolean |
| blankText | 为空验证失败后提示信息 | String |
| emptyText | 空字段时默认文字 | String |
| grow | 设置字段是否根据内容伸缩，设置为true后width属性无效。 | Boolean |
| growMax | 字段伸展的最大宽度（默认800） | Number |
| growMin | 字段伸展的最小宽度（默认30） | Number |
| inputType | 字段类型（默认text） | String |
| labelWidth | 标签宽度 |
Number |
| maxLengthText | 允许最大输入长度 | Number |
| minLengthText | 允许输入最小长度 | Number |
| regex | javascript正则表达式 | String |
| regexText | 正则表达式失败提示信息 | String |
| selectOnFocus | 得到焦点是否自动选择已存在文本 | Boolean |
| vtype | 验证类型名称 | String |
| vtypeText | 自定义提示信息，代替vtype本身的错误提示信息 | String |
| validator | 在所有基本验证通过后调用函数 | function |
我们试着加上一个不允许为空，试着理解几个属性配置，回头您慢慢试其他的配置项。
................
items:
[
{
xtype: 'textfield',
fieldLabel: '输入框',
allowBlank:false,
blankText:'此处不能输入为空',
emptyText:'请输入用户名'
}
]
................
网页打开后
这里有我们配置好的默认的文字
里面是我们配置的文字，这并不是TextField里面的表单值，而是当没有输入值的时候，显示这几个字，当鼠标点击让它获得焦点后，几个字消失，当失去焦点后，如果内部还是没有值，那么这几个字又显示了。
我们试着提交一下。
仔细看，先是出现了一个很短暂的Ext.MessageBox.wait时间很短，然后弹出了提交失败时的效果
是我们代码中设置好的，表单提交失败时的设置效果。
关闭提示框后TextField出现效果
当我们点击它，让它获得焦点后，出现我们配置好的提示文字。
二、多行文本输入框Ext.form.TextArea
除了可以输入多行外，和Ext.form.TextField用法基本相同。
................
{
xtype: 'textarea',
fieldLabel: '多行文本框',
width:300,//设置宽
height:100//设置高
}
................
记住两点问题：1、width不是文本框的宽度，而是算上前面的标签总宽度
2、如果设置上grow:true，已经配置的height属性无效，width有效
三、单选框Ext.form.Radio
ExtJS里单选框继承自复选框
例：
{
xtype: 'radio',
boxLabel: '男',
name: 'sex',
inputValue: '1',
checked:true//默认选中项
},
{
xtype: 'radio',
boxLabel: '女',
name: 'sex',
inputValue: '0'
}
对照一下html的单选框，有点基础的同学，很容易理解。
四、复选框Ext.form.Checkbox
唯一的区别就是把xtype的值从radio改为checkbox
看来我再仔细讲解，就是废话了，接下来你试着做成这个效果。
五、下拉列表框Ext.form.ComboBox
先来看看html原始的下拉框怎么编写
|
<select> <option value="2">JS</option> |
 |
value的值是此控件选中后实际值，和显示出来的值不同，有网页开发经验的人想必都知道。
我们再来看看Ext的下拉框，好看了很多。
Ext的下拉列表框就没有上面的组件那么简单了，使用起来复杂。需要定义数据源。看看代码。
Ext.onReady(function () {
var store = new Ext.data.SimpleStore({//创建一个下拉框需要的数据源
fields: ['value', 'text'],//一个是选择项的值，一个是显示的值
data: [
[1, "Ext"],
[2, "JS"],
[3, "jquery"],
[4, "php"]
});
var myFormPanel = new Ext.form.FormPanel({
xtype: 'form',
title: '浩然哥哥的FormPanel',
width: 400, height: 400,
standardSubmit: true,
url: 'message_box.html',
items:
[
{ xtype: 'textfield', fieldLabel: '输入框' },
{ xtype: 'textarea', fieldLabel: '多行文本框' },
{ xtype: 'checkbox',boxLabel: '男',name:'sex',inputValue:'1',checked: true},
{ xtype: 'checkbox', boxLabel: '女', name: 'sex', inputValue: '0' },
{
xtype: 'combo',
store: store,//下拉框数据来源
editable: false,//是否允许直接输入值
emptyText: '请进行选择'
}
buttons: [{ text: '提交', handler: login}]
});
items: [myFormPanel]
});
function login() {
}
});
</script>
我们为下拉列表框定义了数据源store使用的是Ext.data.SimpleStore。没见过，和你一样我也是第一次碰到Ext.data.SimpleStore，先简单看一下，这里会用就行，下面的章节会详细的讲解。
 |
定义了value text两个值，代表下拉框的取值和显示值。 信息是一个二维数组，存储了下拉框的值 |
还有一个属性<select>做不到，那就是可以直接输入值，而且输入的值可以是下拉框选项里面没有的。editable属性控制能否直接输入值，试着把editable: false改为 true或者去掉这句，因为true为默认。就会出现下面的效果。
我们在源代码其他的部分不变的基础上添加一个按钮，个这个按钮弹出获取值的功能。
{ text: '提交', handler: login },
{
]
六、日期输入框Ext.form.DateField
这就是Ext的日期输入框，它使用很简单，看例子，看看它如何使用它。
[
{ xtype: 'textfield', fieldLabel: '输入框' },
{ xtype: 'textarea', fieldLabel: '多行文本框' },
{ xtype: 'checkbox', boxLabel:'男',name:'sex',inputValue: '1',checked: true},
{ xtype: 'checkbox', boxLabel:'女',name:'sex',inputValue: '0' },
{
id: 'dd',
xtype: 'combo',
store: store,
editable: false, //是否允许直接输入值
emptyText: '请进行选择'
},
{
xtype: 'datefield',
fieldLabel: '生日',//前面的标题
format: 'Y-m-d',//显示出来的效果
disabledDays: [0,6]//屏蔽掉的一周内特定日期0为周日
}
效果
可以获取到的值是Y-m-d格式即"年-月-日"格式，默认的格式是"d/m/Y"，格式你可以自己定，比如:
Y:m:d
Y年m月d日
可以加入的信息有：
Y：年的全称如2012
y：年的后两位简称如2012年去后两位12
m：月的数字3月为3
M：月的英文如3月为Feb
d：日的数字
D：选择日期的星期数英文如星期三Wed
七、在线编辑器Ext.form.HtmlEditor
在线编辑器的type是htmleditor，这是本章最后介绍的一个组件，我告诉你几个参数，看看你能不能做出来。
1、宽度500
2、高度400
3、标签不要
条件到此为止，试着做出来，下一章给答案，并且下一章我们试着实践一个表单应用。