上篇中我们讨论了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();}}]
});
关于inputType,参数如下：
//input的各种类型（这个大家都知道，就只列了几个典型的）
radio
check
text(默认)
file
password等等关于FormPanel的配置参数，请主要参考panel的参数，这里列举另外两个：
1.labelAlign:fieldlabel的排列位置，默认为"left"，其他两个枚举值是"center","right"
2.labelWidth:fieldlabel的占位宽
3.method:"get"或"post"
4.url："提交的地址"
5.submit:提交函数 //稍后我们一起详细分析
因为内容太多，我们先看一个例子。
1.FormPanel的fieldset应用
//把前面代码重写items属性
items:[
{
xtype:'fieldset',
title: '个人信息',
collapsible: true,
autoHeight:true,
width:330,
defaults: {width: 150},
defaultType: 'textfield',
items :[{
fieldLabel: '爱好',
name: 'hobby',
value: 'www.cnblogs.com'
},{
xtype:"combo",
name: 'sex',
store:["男","女","保密"],//数据源为一数组
fieldLabel:"性别",
emptyText:'请选择性别.'
}]
}
]
这里的combox组件只是简单的演示，具体还是要深入了解，我们会在以后的内容中详细探讨。
2.关于xtype的类型，在extjs的form表单（其他的请参考api）中已经定义的有：
Form components
---------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
不早了，FormPanel还有很多的东西要了解，但是今天不能再讲了，太多了，大家都没有兴致看下去,明天继续。
extjs的东西很庞大，但是还没有一个人用中文系统的分析写文章，所以资料都很可贵，现在我想做这件事，请大家多多支持，我才有动力，
才有激情，才能写出更好的下一片文章，让我们期待更精彩的next吧!
分享到：
相关推荐
在本文中，我们将深入探讨ExtJS 2.0中的FormPanel组件，并通过具体的示例来了解如何使用不同的组件，如checkbox、radio以及htmleditor。首先，Ext.FormPanel是ExtJS中用于创建表单的主要组件，它允许我们构建复杂的...
4. **packages**：这个目录通常用于存放自定义组件或者第三方扩展包，可以扩展Ext.js的功能。 5. **resources**：包含了CSS样式文件、图片和其他前端资源，用于构建用户界面。 6. **src**：未压缩的源代码目录，...
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架，具有最新的Javascript标准支持 新的漂亮组件和主题，以创建漂亮的企业应用程序 现代工具链，用于构建优化，高性能，通用的应用程序 用于可视...
Extjs中实现国际化要用到的文件ext-lang-zh_CN.js和ext-lang-en.js
在EXTJS框架中，`Ext.ux.form.LovCombo`是一种自定义组件，它扩展了基本的`Ext.form.field.ComboBox`，提供了更丰富的功能，尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”（即“Look Up Value”...
ExtJS是一种基于JavaScript的开源富客户端框架，特别适用于构建企业级的Web应用程序。...文档《ExtJs2.0学习系列.doc》应包含了关于这些主题的详细教程和示例，是学习ExtJS 2.0不可或缺的参考资料。
关于ext学习的资料，有些例子 ExtJs2.0学习系列.CHM
从ext官方论坛上下的。 文件名： ext-4.2.1.883.jsb2 对应版本ext-4.2.1.883
从spket IDE 官网下载。 文件名： ext-4.2.1.883.jsb2 对应版本ext-4.2.*版本。spket自动提示ExtJs4，需要ext4.2.1.jsp2文件。
不过要注意，虽然ExtJS 2.0是一个稳定的版本，但后续版本（如3.x、4.x、6.x等）引入了许多新特性，如Sencha CMD自动化工具、新的布局系统和更好的性能优化，因此在深入学习时也应关注最新版本的更新。同时，ExtJS...
20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....
标题中的"ext-7.0.0-gpl.zip"是一个软件扩展或库的压缩包，遵循GPL（GNU General Public License）开源协议。这通常意味着它是一个免费的、可修改的软件，用户可以查看源代码并根据需要进行定制，但必须保留原始许可...
在ExtJs框架中，JsonStore是一种非常重要的数据存储器，它专门用来处理和展示JSON格式的数据。本资料主要讲解如何使用JsonStore来加载并显示数据，以创建一个简单的个人信息表格。 首先，为了使用ExtJs框架，我们...
标题中的"ext-4.2.1.883.7z"指的是ExtJS框架的一个特定版本，4.2.1.883，它被压缩成了7z格式的文件。7z是一种高效的文件压缩格式，由7-Zip软件创建，以提供更高的压缩比和更快的解压缩速度。7z文件通常需要使用支持7...
ExtJS 2.0 和 Spket 1.6.11 是两个在Web开发领域中常用的工具，尤其在创建富互联网应用程序（Rich Internet Applications，RIAs）时。这两个工具的结合使用可以极大地提升开发效率和代码质量。 **ExtJS 2.0** ExtJS...
1. **基础篇**: 介绍ExtJS的基本架构和使用环境，讲解如何创建第一个ExtJS应用。 2. **组件篇**: 详述各组件的使用方法，如窗口、面板、按钮等，以及如何自定义组件。 3. **数据篇**: 深入探讨数据模型、数据存储和...
ExtJs2.0学习系列大全 共15个word文档，大部分介绍都在里面了
在ExtJS 2.0版本中，智能提示（Intelligent Hinting）是一项关键特性，它增强了开发人员的编码体验，提高了开发效率。智能提示功能提供了自动补全、代码提示以及类库方法和属性的快速参考，使得编写ExtJS代码更为...