Ext2.0的form不单增加了时间输入控件、隐藏输入控件，还修改了创建方法，通过formpanel代替了原来form，column也根据新的布局定义更新了定义方式。总体来说，定义一个form更简单便捷了。本文将通过一个实例介绍一下2.0的form的创建以及其大部分控件的使用方法，因水平有限，错漏难免，忘大家多多谅解！

我们先来看看我们将要设计的form的情况：

呵呵，form有点杂乱，不过在这个fomr里包含了绝大部分Ext2.0的控件，我将会和大家一起探讨一下这些控件的使用。

在创建一个form之前，我们先增加以下语句：

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

 第一句的目的是为需要的元件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息了。

第二句的目的就是设置控件的错误信息显示位置，主要可选的位置有：

qtip

[element id]

这个大家可以根据各人喜好设置，我习惯使用“side”，这里有一点要注意的，就是注意控制控件的宽度，以防不够宽度显示错误图标，这个下面会说到。

好了，现在创建我们的form，2.0的方法就是直接创建一个formpanel：

 var simpleForm = new Ext.FormPanel({
labelAlign: 'left',
title: '表单例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
items: [],
buttons: []
});
simpleForm.render(document.body);

在formpanle里，我们定义了form控件的标题是在左边的（labelAlign: 'left'）；form的标题栏显示标题“表单的例子”；它的按钮位置是在右对齐的（buttonAlign:'right'）；边的类型设置了内补丁 5px（bodyStyle:'padding:5px'）；总宽度是600px；设置了面板的边角是圆弧过度的（frame:true），我设置这个属性主要目的不是因为边角，而是因为背景，如果不设置这个，背景颜色将为白色，设置了这个将会加入海蓝色的背景图，好看点；还设置了form控件的标题宽度是80px（labelWidth:80）。还有一些其它的设置选项，我这里就不多说，大家可以参看2.0的API。

items数组的设置是我们的重点了，form上的所有控件都是在这里设置的。

从form的结构图中看到，form整体上是分了两列的（实际上不是的，呵呵）。因为要分列，所以要使用columnLayout类。在使用 columnLayout类之前，我们需要了解一下CSS中float属性的作用，改属性主要作用是设置对象是否及如何浮动，属性值为none、left 和right三个。column设置是left，意思就是对象浮在左边的。那这个有什么作用呢？其实这个和我们在word中输入文字，默认文字是左对齐的，当一行文字的宽度超过页面的宽度时将自动换行是一样的。 我们通过一个例子来说明一下。

首先我们定义一个div，背景色是黑色，宽度和高度都是200：

 <div style='background:black;width:200px;height:200px;'>
</div>

然后在里面加入2个div，每个宽度和高度都是200，背景色一个是红色，一个是绿色：

<div style='background:black;width:200px;height:200px;'>
<div style='background:red;width:50px;height:50px;'></div>
<div style='background:green;width:50px;height:50px;'></div>
</div>

我们来看看效果：

在没有使用float之前，两个子div是分别各占一行的。好，现在我们在两个子div中加入“float:left”在看看效果：

<div style='background:black;width:200px;height:200px;'> 

<div style='background:red;width:50px;height:50px;float:left;'></div> 

<div style='background:green;width:50px;height:50px;float:left;'></div> 

</div> 

两个子div出现在同一行了。我们复制一下两个子div，粘贴两次，然后看看效果：

 <div style='background:black;width:200px;height:200px;'>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
</div>

 6个子div有序的按左对齐方式排列在一起了，当一行的子div的宽度超过了父div的宽度时，子div自动换行到了第二行。

不知道大家是否看得明白？看不明白自己再动手改变一下子div的宽度和高度，看看效果。column的工作方式就是这样的。明白这个很重要，因为在定义checkbox和radio的时候，如果想它们的选项在同一行，就要注意column的宽度，不然就无法让他们在同一行。不过现在column是通过百分比来定义宽度的，我们只要控制好百分比就行了。

好了，我们继续写form，因为要用到column，所以我们先在formpanel的itmes加入一个column的定义：

{
layout:'column',
border:false,
labelSeparator:'：',
items:[]
}

 代码里定义了在这里使用的是columnlayout（layout:'column'）；没有边（border:false）；标题的分隔符号我们用中文冒号代替英文的冒号（labelSeparator:'：'）。coulmnLayout里的控件将定义在items里。

我们首先在items里加入一个常用输入控件，是用来输入姓名的：

{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: '姓名',
name: 'name',
anchor:'90%'
}]
}

 我们设置了该列的宽度占总宽度的50%（columnWidth:.5）；在布局里放了一个formlayout用来放置控件（layout: 'form'）；formlayout也是没有边的（border:false）。在formlayout里有一个类型为 textfield'（xtype:'textfield'）的输入控件。控件标题为姓名（fieldLabel: '姓名'），输入框（input）的name属性设置“name”（name: 'name'），输入框的长度为列宽减去标题的宽度后的90%（anchor:'90%'），余下的10%的是给显示错误信息图标用的。

在加入性别的radio控件时就要注意了，这里需要加入两个radio，第一radio是有标题的，第二是没有的，而且两个radio加起来的宽度应该正好是余下的列宽（50%）：

 从代码中可以看到，除了列宽设置为25%外，其它的列设置和第一控件是一样。Formlayout里加入了一个类型为radio的控件。控件的标题是性别，控件的选择显示文本是男（boxLabel:'男），input的name属性值是sex（name: 'sex'），该控件默认是已选的（checked:true），控件的值（value）是男（inputValue:'男'），input的宽度是 95%。在这里我还设置一个css属性，顶部的外补丁为5px（style:'margin-top:5px'），原因是为了选择按钮和标题对齐，大家可以将该属性去掉然后看看效果。

第二个raido控件的列设置就有所不同，因为它不需要标题，所以要设置隐藏标题（hideLabels:true），标题的宽度设置为 0（labelWidth:0）,还要设置其标题分隔符号为空（labelSeparator:''）。其余的设置和第一个radio的设置没有不同，只是input的值不同了。

我们已经设置了3列，3列的列宽分别为50%、25%、25%，根据float的原则，下一列将从第二行开始。

在第二行第一列我们要增加的是一个日期选择控件：

{
columnWidth:.25,
layout: 'form',
border:false,
items: [{
style:'margin-top:5px',
xtype:'radio',
fieldLabel: '性别',
boxLabel:'男',
name: 'sex',
checked:true,
inputValue:'男',
anchor:'95%'
}]
},{
columnWidth:.25,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
items: [{
style:'margin-top:5px',
xtype:'radio',
fieldLabel: '',
boxLabel:'女',
name: 'sex',
inputValue:'女',
anchor:'95%'
}]
}
{ 
columnWidth:.5, 

layout: 'form', 

border:false, 

items: [{ 

xtype:'datefield', 

fieldLabel: '出生日期', 

name: 'birthday', 

anchor:'90%' 

}] 

} 
日期控件的列宽也是50%，列的其它设置没有变化。控件的类型为datefield，标题是出生日期，input的name属性是birthday，intput宽度也是设置了90%，出来留出空位给错误信息外，还可以让控件与上一行的姓名的宽度相同，整列看起来比较整齐。

日期控件的设置和普通文本输入的设置一样简单，这里就不多说了。不过要说到的是汉化的问题。在2.0版自带的本地化文件ext-lang-zh.js中存在一些小bug，我们需要自己修改一下。

首先要修改的是周的显示，原来的定义是：

 因为在日期选择中显示的区域不够宽，只能显示一个汉字，所以需要将上面定义的把“周”去掉，修改为：

Date.dayNames = [ 

"周日", 

"周一", 

"周二", 

"周三", 

"周四", 

"周五", 

"周六" 

]; 

 Date.dayNames = [
"日",
"一",
"二",
"三",
"四",
"五",
"六"
];

在年份和月份选择中的按钮文字还是英文“ok”和“cancel”的，这里我们也需要修改一下：

 if(Ext.DatePicker){
Ext.apply(Ext.DatePicker.prototype, {
todayText : "今天",
minText : "日期在最小日期之前",
maxText : "日期在最大日期之后",
disabledDaysText : "",
disabledDatesText : "",
monthNames : Date.monthNames,
dayNames : Date.dayNames,
nextText : '下月 (Control Right)',
prevText : '上月 (Control Left)',
monthYearText : '选择一个月 (Control Up/Down 来改变年)',
todayTip : "{0} (Spacebar)",
okText : "确定",
cancelText : "取消",
format : "y年m月d日"
});
}

上面定义中黑色字体部分就是要加入的代码。如果不喜欢默认格式是“y年m月d日”，需要修改：

 if(Ext.form.DateField){
Ext.apply(Ext.form.DateField.prototype, {
disabledDaysText : "禁用",
disabledDatesText : "禁用",
minText : "该输入项的日期必须在 {0} 之后",
maxText : "该输入项的日期必须在 {0} 之前",
invalidText : "{0} 是无效的日期 - 必须符合格式： {1}",
format : "Y-m-d"
});
}
修改DatePicker不会改变DateField的格式的，这个自己根据情况决定，呵呵。

我们继续，现在需要加入一个学历的下拉选择控件。下来选择控件最重要的一个定义就是数据的定义的，数据定义错误，可能得不到我们需要的效果，也是很多朋友感觉最麻烦的地方。

 {
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'combo',
store: new Ext.data.SimpleStore(
{
fields: ["retrunValue", "displayText"],
data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]
}),
valueField :"retrunValue",
displayField: "displayText",
mode: 'local',
forceSelection: true,
blankText:'请选择学历',
emptyText:'选择学历',
hiddenName:'education',
editable: false,
triggerAction: 'all',
allowBlank:false,
fieldLabel: '学历',
name: 'education',
anchor:'90%'
}]
}

列的定义就不说了，没变化。在items里，类型设置成combo了，在这里定义了一个sotre属性，就是选择值存储的地方，因为是在客户端的数据，所以使用了一个简单存储（SimpleStore）。在存储里，我们通过一个数组定义了retrunValue和displayText两个字段。 retrunValue字段指定是提交给后台的值，displayText字段指定是在下拉中显示的选择值。然后我们在data里定义了几组数据（data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[3,'大学']]），我们可以看到，每组数据都是根据 fiedls的定义来组成的，数组里第一个值就是retrunValue的值，第二个值就是displayText的值，例如[1,'小学']，就表示 retrunValue是1，displayText是小学。

下面就是很重要的一步了，设置下拉选择框的值和显示文本。本例中设置了下拉选择框的提交值对象的是存储中的retrunValue字段（valueField :"retrunValue"），显示文本是存储中的displayText字段（displayField: "displayText"），通过这两个设置就可将存储中的数据和下拉框对应起来。

因为数据是在本地，所以设置了模式为local（mode: 'local'）。该下拉列表只允许选择，不允许输入（editable: false），而且是必须选择一个选项（forceSelection: true）。在没有选择值时显示为选择学历（emptyText:'选择学历'）。提交form时，该项如果没有选择，则提示错误信息“请选择学历” （blankText:'请选择学历'）。该选项值不允许为空（allowBlank:false）。大家要注意的是hiddenName和name属性，name只是改下拉的名称，作用是可通过，而hiddenName才是提交到后台的input的name。如果没有设置hiddenName，在后台是接收不到结构的，这个大家一定要注意。

因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。

如果要为控件设置默认值，就设置属性value，value的值要设置为提交给后台的值，不要设置为显示文本。例如本例要设置大学为默认值得，则设置value的值为6。

现在到第三行了，我们要创建一个checkbox选项输入：

 {
columnWidth:.35,
layout: 'form',
border:false,
items: [{
xtype:'checkbox',
fieldLabel: '权限组',
boxLabel:'系统管理员',
name: 'popedom',
inputValue:'1',
anchor:'95%'
}]
},{
columnWidth:.2,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
items: [{
xtype:'checkbox',
fieldLabel: '',
boxLabel:'管理员',
name: 'pepedom',
inputValue:'2',
anchor:'95%'
}]
},{
columnWidth:.2,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
items: [{
xtype:'checkbox',
fieldLabel: '',
boxLabel:'普通用户',
name: 'pepedom',
inputValue:'3',
anchor:'95%'
}]
},{
columnWidth:.25,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
items: [{
xtype:'checkbox',
fieldLabel: '',
boxLabel:'访客',
name: 'pepedom',
inputValue:'4',
anchor:'95%'
}]
}
checkbox的设置和radio的设置大同小异，大家注意列宽的定义就行。

第四行的两个输入框主要是测试通过vtypes属性来验证输入框的输入的：

 {
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: '电子邮件',
name: 'email',
vtype:'email',
allowBlank:false,
anchor:'90%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: '个人主页',
name: 'url',
vtype:'url',
anchor:'90%'
}]
}]
}

这里的定义和普通的文本输入框没什么区别，只是多了一个vtypes的属性定义。Vtypes里总共定义了email、url、alpha和 alphanum四种类型数据格式，email和url这个不用介绍了，呵呵。alpha是字母和下划线的组合，alphanum是字母、下划线和数字的组合。

下面要加入一个tabpanel，加入3个tab页。

 {
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[]
}

要注意的是，这个tabpanel不是在上面coulmn的items里加的，因为不在column里。我们加在formpanel里。把item 类型设置为'tabpanel'就行了，然后将标签页头的背景设置为透明的（plain:true），当前活动的标签页是第一页（activeTab: 0），高度设置为235px（height:235），tab页的面板使用内补丁10px（defaults: {bodyStyle:'padding:10px'}）。

好了，现在在tabpanel的items加入标签页。第一页主要有两个输入控件，一个是vtypes类型alphanum的登录输入框和一个密码输入框。

 {
title:'登录信息',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: '登录名',
name: 'loginID',
allowBlank:false,
vtype:'alphanum',
allowBlank:false
},{
inputType:'password',
fieldLabel: '密码',
name: 'password',
allowBlank:false
}]
}

在标签定义了，设置了标签标题是登录信息（title:'登录信息'），控件容器是formlayout（layout:'form'），控件的默认宽度是230px（defaults: {width: 230}），默认控件类型是textfield（defaultType: 'textfield'）。

两个控件的定义与前面的textfield定义没什么区别，只是密码输入框需要定义input控件的类型为password（inputType:'password'）。两个控件都不允许为空（allowBlank:false）。

第二个标签页里有numberfield、timefield和textfield三个控件：

 {
title:'数字时间字母',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
xtype:'numberfield',
fieldLabel: '数字',
name: 'number'
},{
xtype:'timefield',
fieldLabel: '时间',
name: 'time'
},{
fieldLabel: '纯字母',
name: 'char',
vtype:'alpha'
}]
}

Numberfield顾名思义就是只能输入数字的输入控件。在该例子，没做最大值、最小值任何限制，如果要设置最大值和最小值，分别设置 maxValue和minValue两个属性就行了。如果要设置数字输入长度，例如身份证号码，可以设置maxLength和minLength两个属性。可以通过设置maxText、minText、maxLengthText和minLengthText设置各自的验证出错信息。可通过 allowDecimals属性设置是否只允许输入整型值，默认值是true，允许输入浮点数。设置allowNegative设置是否只允许输入正数，默认值是true，允许输入正负数。通过decimalPrecision属性可设置小数点后的位数，默认值是2位。

timefield是新增加的时间输入控件，起弥补日期输入控件不能输入时间的作用。它的定义也很简单，设置类型为timefield就行了。 timefield默认时间格式是12小时制的，我们可通过修改format属性来修改其数据格式。通过设置increment属性可设置下拉选择值得时间区间，默认值是15分钟的。还可以和数字输入控件一样设置最大值和最小值。下拉的设置和combobox是一样的。

在目前的版本中，timefield类还没有汉化，所以我们要在本地文件中加入timefield的汉化定义：

 if(Ext.form.TimeField){
Ext.apply(Ext.form.TimeField.prototype, {
format:'G:i:s',
minText : "该输入项的时间必须大于或等于： {0}",
maxText : "该输入项的时间必须小于或等于： {0}",
invalidText : "{0}不是有效的时间",
});
}

在这里，我默认定义了时间格式是24小时制的，小时为个位数是不加前缀0。

最后一个加入的是测试纯字母输入的，和email等是一样的，我就不介绍了。

在最后一个tab页中加入了一个textarea输入：

 {
title:'文本区域',
layout:'fit',
items: {
xtype:'textarea',
id:'area',
fieldLabel:''
}
}

和textfield一样，只要设置类型为textarea就可以了，唯一的区别是为了让textarea和面板自适应面板，使用了fitlayout作为它的容器，所以在这里我们不用设置textarea的宽度和高度。

最后一步就是为form添加按钮了，在formpanel的buttons属性中我们加入了一个保存按钮和取消按钮：

 buttons: [{
text: '保存',
handler:function(){
if(simpleForm.form.isValid()){
this.disabled=true;
simpleForm.form.doAction('submit',{
url:'test.asp',
method:'post',
params:'',
success:function(form,action){
Ext.Msg.alert('操作',action.result.data); this.disabled=false;
},
failure:function(){
Ext.Msg.alert('操作','保存失败！');
this.disabled=false;
}
});
}
}
},{
text: '取消',
handler:function(){simpleForm.form.reset();}
}]

在formpanel类中，form属性指向的是formpanle里的basicform对象，我们可通过formpanle.form来使用该 basicform对象。在被例子，我们已经将formpanel对象赋值给了simpleForm这个变量，所以我们可以通过 simpleForm.form访问面板里的basicform对象。

在buttons里定义的按钮默认是Ext.Button，所以按钮的属性定义可以查看Ext.Button的API。在这里两个按钮都没用到其它属性，只是设置了显示文本（text）和单击事件。

保存按钮要做的就是先做basicform的客户端验证（simpleForm.form.isValid()），验证通过了则设置该按钮状态为 disable，防止2次提交。然后调用simpleForm.form.doAction方法提交数据。doAction方法的第一个参数 “submit”的意思是表示执行的是提交操作，提交的后台页面是test.asp（url:'test.asp'），提交方式是 post（method:'post'），没有其它提交参数（params:''），提交成功后执行success定义的函数，本例只是显示一个保存成功信息。后台返回的数据格式是需要我们注意的，一定要json格式，而且必须包含“success:true”，不然不会执行success定义的函数。success 定义的函数返回两个参数，第一是form本身，第二个是ajax返回的响应结果，在action.result这个json数组了保存了后台返回的数据。例如本例后台返回的json结构是“{success:true,data:~~~}”，其中data部分我将提交的数据将字段名和数据组合成一个字符串。在success函数中，我通过“Ext.Msg.alert('操作',action.result.data);”将data数据显示出来。我们还定义failure函数，就是网络通讯存在问题的时候将显示错误信息。

取消按钮就是简单的reset一下form的控件。

如果想form按以前的老办法提交，可以在formpanel的定义中加入一下设置：

 onSubmit: Ext.emptyFn,
submit: function() { this.getEl().dom.submit();}
第一个设置的目的是取消formpanel的默认提交函数。第二就是设置新的提交方式为旧方式提交。

使用过Delphi、Visual Basic或Java Swing等开发语言的读者对面板（Panel）一定非常熟悉，我们可以在面板随意地排版布局，它就像是一副骨架撑起了整个用户界面，在ExtJS中面板同样起着页面骨架的作用，所以学习面板是学习ExtJS页面布局的基础和起点。 ExtJS面板从使用方式上来说更接近于Java Swing中的面板，通过为其指定不同的布局方式或者进行面板嵌套达到复杂布局的目的，因此布局方式是否丰富，能否进行嵌套，是衡量ExtJS布局灵活性的重要指标。ExtJS面板共支持10种不同风格的布局样式，并且允许无限制的进行嵌套，这就给我们创造了一个尽情发挥的强大舞台。 

一、认识Ext.Panel

    Ext.Panel扩展自Ext.Container，是各种组件的容器也是基础类，可以扩展出功能更加强大的面板。作为标准的面板组件主要包括如下5部分：底部工具栏（bottom toolbars）、顶部工具栏（top toolbars）、面板头部（header）、面板底部（footer）和面板体（body），下面是一个标准面板的示例，可以帮助读者更清晰的认识面板组件。 
    代码5-1：Ext.Panel示例
    <script type="text/javascript">
Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  new Ext.Panel({
   title:'面板头部（header）',
   tbar : ['顶端工具栏(top toolbars)'],
   bbar : ['底端工具栏(bottom toolbars)'],
   height:200,
   width:300,
   frame:true,
   applyTo :'panel',
   bodyStyle:'background-color:#FFFFFF',
   html:'<div>面板体（body）</div>',
   tools : [//设置面板头部功能区
    {id:'toggle'},
    {id:'close'},
    {id:'maximize'}
   ],
   buttons:[
    new Ext.Button({
     text:'面板底部（footer）'
    })
   ]
  })
 });
  </script>
    代码5-1演示了标准面板的创建方式，从图5-1中可以看到一个标准面板所具有的全部组成部分，这5部分不但位置不同功能也不尽相同，它们分别有自己存在的价值，读者可以根据业务需要选择使用其中合适的部分构成自己需要的页面。效果如图5-1所示。


二、Ext.Panel 的主要功能
上节介绍了ExtJS面板的主要表现形式，接下来将介绍面板组件的主要配置项及常用方法，这些配置项及方法将在后面的示例中用到，可以把这部分内容作为后续章节的铺垫，进行快速的浏览，Ext.Panel主要配置项目如表5-1所示。

表5-1  Ext.Panel主要配置项目表表

配置项	参数类型	说明
animCollapse	Boolean	设置面板折叠或展开时是否显示动画效果，如果 Ext.Fx 类可用则默认 为true，否则为fasle。
applyTo	Mixed	一个页面上已经存在的元素或元素id，组件将会追加到该元素的后面，而不是将其作为新组件的容器。
autoDestroy	Boolean	设置是否自动销毁从容器中移除的组件，默认为true，否则要手工销毁
autoHeight	Boolean	是否使用自动高度，true则使用自动高度，false则使用固定高度，默认为false
autoLoad	Object/String/ Function	设置面板自动加载的url地址。如果不为null则面板会尝试加载该url 并立刻在面板中进行渲染。这个连接将变成面板的body元素，所以可以根据需要在任何时候刷新面板内容
autoScroll	Boolean	设置是否自动显示滚动条，true则设置面板的body元素样式为overflow:'auto'，内容溢出时会自动显示滚动条，false则不显示滚动条对溢出的内容进行截断。默认为false
autoShow	Boolean	设置是否移除组件的隐藏样式（例如'x-hidden' or 'x-hide-display'），如果为true则在渲染时移除它们，默认为false
autoWidth	Boolean	是否使用自动宽度，true为自动宽度，false为固定宽度，默认为false
baseCls	String	应用于面板元素的基本样式类，默认为'x-panel'
bbar	Object/Array	设置面板的底端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。
bodyBorder	Boolean	设置是否显示面板体（body）的内部边框，true则显示，false则隐藏，默认为true。并且该项只在border = true时生效
bodyStyle	String/Object/ Function	应用于面板体（body）的自定义样式。默认为null
border	Boolean	这是是否显示面板体（body）的边框，true则显示，false则隐藏，默认为true。默认边框宽度为2px
buttonAlign	String	设置面板底部（footer）中按钮的对齐方式，有效值包括：'right', 'left' 和'center'，默认为'right'
buttons	Array	加入到面板底部（footer）中按钮配置对象的数组
collapseFirst	Boolean	设置渲染展开或收缩按钮的顺序。true则在其它按钮渲染前先渲染展开或收缩按钮，false则最后渲染，默认为true。该配置项决定了展开或收缩按钮的位置。
collapsed	Boolean	设置面板在第一次渲染时是否处于收缩状态，true则收缩，false则展开，默认为false
collapsible	Boolean	设置是否允许面板进行展开和收缩，true则允许进行展开和收缩，并在面板头部显示伸缩按钮。默认为false
contentEl	String	设置面板的内容元素，可以是页面元素的id或已存在的HTML节点
defaultType	String	面板中元素的默认类型，默认为'panel'
defaults	Object	应用到面板容器中所有元素的配置对象， 例如： defaults: {bodyStyle:'padding:15px'}
floating	Boolean	设置面板是否可以浮动，true则允许，默认为false。注意，设置floating为true会导致面板显示在负偏移的位置，从而面板不可见，因为浮动状态下面板是采用绝对定位的，位置必须在渲染之后进行明确的设置（例如myPanel.setPosition(100,100);）.，浮动面板也需要有固定的宽度
footer	Boolean	设置是否创建面板底部（footer）元素，true则创建，false则跳过footer元素的创建，如果一个或多个按钮被加入到footer中，则footer的设置会被忽略，而直接创建footer元素

frame	Boolean	设置是否渲染面板，true则渲染面板为自定义的圆角边框，false则渲染为1px的直角边框
header	Boolean	设置是否创建面板头部（header）元素，true则创建，false则跳过header元素的创建，如果提供了title但没有设置header则header会被自动创建。如果提供了title但明确设置header为false则header不会被创建
headerAsText	Boolean	设置是否在面板的header中显示title，true则显示，默认为true
height	Number	面板高度，默认为auto
hideBorders	Boolean	true则隐藏面板容器中所有组件的边框，false则根据组件的具体配置进行显示
hideCollapseTool	Boolean	设置当collapsible为true时，是否显示展开或收缩按钮
html	String/Object	设置面板（body）元素的内容为HTML片段或DomHelper生成的内容。
items	Mixed	单独一个子组件或子组件的数组
layout	String	面板的布局类型，默认Ext.layout.ContainerLayout布局，被选布局的配置项通过layoutConfig进行设置
layoutConfig	Object	这个配置对象包含被选布局的配置项，针对每种布局的配置项需要查看相应的布局类说明
maskDisabled	Boolean	设置当面板不能使用时是否遮罩面板，true则遮罩，默认为true
shadow	Boolean/String	设置是否在面板后面显示阴影，true则显示，或通过字符串指定阴影的显示模式，有效值包括：sides、frame、drop，默认为'sides'。该项只在floating 为 true时生效
shadowOffset	Number	设置面板阴影的偏移量，以像素为单位，默认为4。该项只在floating 为true时生效
tbar	Object/Array	设置面板的顶端工具栏，可以是Ext.Toolbar对象、工具栏配置对象或button配置对象的数组。注意，面板渲染后只能通过getTopToolbar方法访问该工具栏
title	String	显示在面板头部的标题信息'
titleCollapse	Boolean	设置是否允许通过点击面板头部进行展开和收缩操作，true则允许，默认为false
tools	Array	工具按钮配置对象的数组，这些按钮会被添加到面板头部功能区，在表5-2中会有详细的说明
width	Number	面板宽度，默认为auto

    Tools 配置项主要用来设置面板头部功能区所要显示的各类按钮，每个按钮的配置对象可能包含的配置项在表5-2中说明，tools配置项id与按钮图标对应关系如表5-3所示。

表5-2  tools配置项明细表

配置项	参数类型	说明
id	String	必选项，可能值及效果见表5.3
handler	Function	点击按钮后触发的处理函数，参数包括： event : Ext.EventObject、toolEl : Ext.Element、Panel : Ext.Panel
scope	Object	处理函数的执行范围
qtip	String/Object	为按钮指定提示信息，可以是字符串或配置对象
hidden	Boolean	设置初次渲染时，是否隐藏
on	Object	为按钮配置事件监听器。

表5-3  tools配置项id与按钮图标对应关系表


三、使用Ext.Panel

    本节主要介绍常用的面板使用方法，并结合示例介绍5.1.2节中常用配置项的使用及效果，以使读者有一个形象的认识。对于面板最重要的功能和作用就是在其中显示各种不同来源的内容，分为4个示例分别讲解4种不同的方式为面板提供显示内容，它们分别是： 
    使用autoLoad配置项为面板加载远程页面。 
    使用contentEl配置项为面板加载本地资源。 
    使用html配置项自定义面板内容。 
    使用items配置项在面板中添加组件。
    这4种方式可以灵活的为面板提供各种需要显示的内容，掌握它们是掌握面板使用方式的基础，在接下来的示例中会逐一看到它们的用法和效果。

1.  使用autoLoad配置项为面板加载远程页面

    在本例中创建一个面板用于加载远程页面，示例中主要使用了 autoLoad 配置项设置要加载的远程页面url地址，同时展示了面板折叠和滚动条的效果，请看下面的示例代码。
    代码5-2：使用autoLoad配置项加载远程页面示例
  <script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   title:'面板加载远程页面',
   height:150,//设置面板的高度
   width:250,//设置面板的宽度
   frame:true,//渲染面板
   autoScroll :true,//自动显示滚动条
   collapsible : true,//允许展开和收缩
   applyTo :'panel',
   autoLoad :'page1.html',//自动加载面板体的默认连接
   bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
  })
 });
  </script>
  <div id='panel'>
    代码 5-2 演示了设置面板的 autoLoad 配置项加载指定页面的方式，从下面的截图中可以看到，当面板初始化时自动加载了指定的page1.html页面，并且在页面内容超出面板大小时自动显示滚动条。效果如图5-2~5-4所示。

2.  使用contentEl配置项为面板加载本地资源

    上例介绍了面板加载远程页面的方法，它是非常实用的方式，但是在有些情况下并不需要读取一份远程的页面，而只是将本页面中的已有部分展示在面板中，这就用到了contentEl配置项，它的作用就是指定在面板中所要显示的本地资源id，看下面的示例代码。
    代码5-3：使用contentEl配置项加载本地资源示例
  <script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   title:'面板加载本地资源',
   height:150,                //设置面板的高度
   width:250,                //设置面板的宽度
   frame:true,               //渲染面板
   collapsible : true,          //允许展开和收缩
   autoScroll : true,           //自动显示滚动条
   autoHeight  : false,         //使用固定高度
   //autoHeight  : true,        //使用自动高度
   applyTo :'panel',
   contentEl :'localElement',    //加载本地资源
   bodyStyle:'background-color:#FFFFFF'       //设置面板体的背景色
  })
 });
  </script>
  <table border=1 id='localElement'>
  <tr><th colspan=2>本地资源---员工列表</th></tr>
  <tr>
   <th width = 60>序号</th><th width = 80>姓名</th>
  <tr>
  <tr><td>1</td><td>张三</td></tr>
  <tr><td>2</td><td>李四</td></tr>
  <tr><td>3</td><td>王五</td></tr>
  <tr><td>4</td><td>赵六</td></tr>
  <tr><td>5</td><td>陈七</td></tr>
  <tr><td>6</td><td>杨八</td></tr>
  <tr><td>7</td><td>刘九</td></tr>
  </table>

    在代码5-3中可以看到员工列表并没有通过请求远程页面得到，而是直接将本页面中已存在的一份table 表格作为内容展示在了面板当中，这种方式省略了远程页面的读取过程，显示速度快，适合于展示简单的本地资源。同时在示例中还展示了自动高度与固定高度的不同效果，自动高度会根据展示内容的实际高度自动调整面板高度，所以在面板内部并没有出现滚动条。运行效果如图5-5和5-6所示。

3.  使用html配置项自定义面板内容

    在上面2个示例中，不管是远程页面还是本地资源加载的都是已存在的页面内容。接下来介绍自定义面板内容的实现方式，可以自己编写HTML代码来定义自己需要的展示效果，示例使用面板的html配置项，通过它就可以实现自定义面板内容的目的，看下面的示例。
    代码5-4：使用html配置项自定义面板内容示例
<script type="text/javascript">
Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  var htmlArray = [
      '<table border=1>',
       '<tr><td colspan=2>员工列表</td></tr>',
       '<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>',
       '<tr><td>1</td><td>张三</td></tr>',
       '<tr><td>2</td><td>李四</td></tr>',
       '<tr><td>3</td><td>王五</td></tr>',
       '<tr><td>4</td><td>赵六</td></tr>',
       '<tr><td>5</td><td>陈七</td></tr>',
       '<tr><td>6</td><td>杨八</td></tr>',
       '<tr><td>7</td><td>刘九</td></tr>',
      '</table>'
       ];
  var panel = new Ext.Panel({
   title:'使用html配置项自定义面板内容',
   height:150,             //设置面板的高度
   width:250,             //设置面板的宽度
   frame:true,             //渲染面板
   collapsible : true,        //允许展开和收缩
   autoScroll : true,        //自动显示滚动条
   applyTo :'panel',
   html: htmlArray.join(''),
   bodyStyle:'background-color:#FFFFFF'      //设置面板体的背景色
  })
 });
</script>
    图5-7与图5-5中展示的页面效果完全相同，但是它们却使用了完全不同的产生方式，html 配置项给了我们动态组织面板内容的途径，在代码 5-7 中首先创建了字符串数组htmlArray，然后通过调用数组的 join 方法将数组内容连接为整体供程序使用，读者也可以使用“+”进行字符串连接，这两种连接方式对程序的执行并没有任何影响。


4.  使用items配置项在面板中添加组件

    在学习完前面3种为面板添加内容的方式之后，再介绍通过items配置项为面板添加组件的方式，这也是最重要和常用的面板功能之一。通过使用items配置项不但可以向面板中添加组件，还可以实现面板的多层嵌套，由于items既可以接受单个对象也可以接受数组为参数，所以将分2个示例分别讲解。 
    向面板中添加单一组件
    在代码5-5中将创建一个只包含日期选择组件的面板。
代码5-5：使用items配置项添加单一组件示例
  <script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   header :true,
   title:'日历',
   frame:true,            //渲染面板
   collapsible : true,       //允许展开和收缩
   autoHeight : true,       //自动高度
   width : 189,           //固定宽度
   applyTo :'panel',
   items: new Ext.DatePicker()    //向面板中添加一个日期组件
  })
 });
  </script>
    代码5-5演示了向面板添加单一组件的方法，其中items配置项是向面板中添加组件的主要方式，在代码5-6中会演示向面板中添加多个组件的方法。运行效果如图5-8所示。

图5-8  通过items配置项向面板中添加一个组件

向面板中添加多个组件
    可以向面板中添加普通组件，也可以向面板中添加子面板，因为面板（Ext.Panel）本身也是组件，因此面板本身可以通过items配置项添加到父面板中，这样就形成了多层面板嵌套的效果，这也是进行复杂页面布局的基础。下面是向面板添加多个组件的简单示例。
    代码5-6：使用items配置项添加多个组件示例
  <script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';
  var panel = new Ext.Panel({
   header :true,
   title:'使用items进行面板嵌套',
   frame:true,               //渲染面板
   collapsible : true,          //允许展开和收缩
   height : 200,
   width : 250,
   applyTo :'panel',
   defaults : {             //设置默认属性
    bodyStyle:'background-color:#FFFFFF',      //设置面板体的背景色
    height : 80,             //子面板高度为80
    collapsible : true,        //允许展开和收缩
    autoScroll : true         //自动显示滚动条
   },
   items: [
    new Ext.Panel({
     title : '嵌套面板一',
     contentEl : 'localElement'       //加载本地资源
    }),
    new Ext.Panel({
     title : '嵌套面板二',
     autoLoad : 'page1.html'         //加载远程页面
    })
   ]
  })
 });
  </script>
 <table border=1 id='localElement'>
  <tr><th colspan=2>本地资源---员工列表</th></tr>
  <tr>
   <th width = 60>序号</th><th width = 80>姓名</th>
  <tr>
  <tr><td>1</td><td>张三</td></tr>
  <tr><td>2</td><td>李四</td></tr>
  <tr><td>3</td><td>王五</td></tr>
 </table>
    代码 5-6 演示了向面板中添加多个组件的方法，items 配置项接受组件数组为参数依次
将组件添加到面板当中。效果如图5-9和5-10所示。