ExtJs2.0学习系列（4）--Ext.FormPanel之第一式

ExtJs2.0学习系列（4）--Ext.FormPanel之第一式2010-04-21 博客园谦虚的天下中我们讨论了Ext.window的简单使用，今天我们要看看强大的FormPanel,也是继承panel组件的使用。

首先弄清楚这个问题，创建的时候：

//查看源代码便知，两种方法是一样的

Ext.form.FormPanel=Ext.FormPanel;

我们还是从最简单的代码实例开始吧：

<！--html代码-->

<body>
<div id="form1"></div>
</body>

//js代码

var form1 = new Ext.form.FormPanel（{
 width:350,
 frame:true,//圆角和浅蓝色背景
 renderTo:"form1",//呈现
 title:"FormPanel",
 bodyStyle:"padding:5px 5px 0",
 items:[
{
fieldLabel:"UserName",//文本框标题
xtype:"textfield",//表单文本框
name:"user",
id:"user",
width:200
},
{
fieldLabel:"PassWord",
xtype:"textfield",
name:"pass",
id:"pass",
width:200
}
 ],
 buttons:[{text:"确定"},{text:"取消",handler:function（）{alert（"事件！"）;}}]
}）;

都是通过items属性参数把表单元素添加到这个表单中。

我们发现两个文本框的类型和狂度是一样的，我们还可以把items里面的相同项提取出来，以简化代码：

//简化代码，和上面的代码效果一样

var form1 = new Ext.form.FormPanel（{
 width:350,
 frame:true,
 renderTo:"form1",
 title:"FormPanel",
 bodyStyle:"padding:5px 5px 0",
 defaults:{width:200,xtype:"textfield"},//*****简化****//
 items:[
{
fieldLabel:"UserName",
//xtype:"textfield",
name:"user",
id:"user",
//width:200
},
{
fieldLabel:"PassWord",
//xtype:"textfield",
name:"pass",
id:"pass",
inputType:"password",
//width:200
}
 ],
 buttons:[{text:"确定"},{text:"取消",handler:function（）{alert（）;}}]
}）;