今天我和大家继续分享ExtJS！OK!
上篇中我们分享了Ext.window的简单使用，今天我们要看看强大的FormPanel,也是继承panel组件的使用。
首先弄清楚这个问题，创建的时候：
//查看源代码便知，两种方法是一样的
Ext.form.FormPanel = Ext.FormPanel;
我们还是从最简单的代码实例开始吧：
<!--html代码-->
<body>
<div id="form1"></div>
</body>
//js代码
var form1 = new Ext.form.FormPanel({
350,
frame:true,//圆角和浅蓝色背景
renderTo:"form1",//呈现
title:"青苹果",
bodyStyle:"padding:5px 5px 0",
items:[
{
fieldLabel:"UserName",//文本框标题
xtype:"textfield",//表单文本框
name:"user",
id:"user",
200
},
{
fieldLabel:"PassWord",
xtype:"textfield",
name:"pass",
id:"pass",
200
}
],
buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件！");}}]
});
});
效果图：
都是通过items属性参数把表单元素添加到这个表单中。
我们发现两个文本框的类型和框度是一样的，我们还可以把items里面的相同项提取出来，以简化代码：
//简化代码，和上面的代码效果一样
var form1 = new Ext.form.FormPanel({
350,
frame:true,
renderTo:"form1",
title:"青苹果",
bodyStyle:"padding:5px 5px 0",
defaults:{200,xtype:"textfield"},//*****简化****//
items:[
{
fieldLabel:"UserName",
//xtype:"textfield",
name:"user",
id:"user",
//200
},
{
fieldLabel:"PassWord",
//xtype:"textfield",
name:"pass",
id:"pass",
inputType:"password",
//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属性
var form1 = new Ext.form.FormPanel({
350,
frame:true,
renderTo:"form1",
title:"青苹果",
bodyStyle:"padding:5px 5px 0",
defaults:{200,xtype:"textfield"},//*****简化****//
items:[
{
xtype:'fieldset',
title: '个人信息',
collapsible: true,
autoHeight:true,
330,
defaults: { 150},
defaultType: 'textfield',
items :[{
fieldLabel: '爱好',
name: 'hobby',
value: 'www.cnblogs.com'
},{
xtype:"combo",
name: 'sex',
store:["男","女","保密"],//数据源为一数组
fieldLabel:"性别",
emptyText:'请选择性别.'
}]
}
],
buttons:[{text:"确定"},{text:"取消",handler:function(){alert();}}]
});
});
效果图：
这里的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
好啦！今天就写到这里吧！今天的东西也不多！为什么每次都比较少呢？是这样的，和大家解释一下，我个人感觉吧如果写的太多了可能就有些乏味了，所以每次一点点，慢慢的积累嘛！对吧！OK今天就和大家分享到这里！也希望大家继续对ExtJS的关注！
| 作者：青苹果 座右铭：不断的反省自己！然后加以改变！ 感兴趣的技术：.NET、数据库、JavaScript、C#、ajax、winform、jquery、extjs 本文出处：http://www.cnblogs.com/xinchun/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
