首先弄清楚這個問題，創建的時候：
//查看源代碼便知，兩種方法是一樣的
Ext.form.FormPanel = Ext.FormPanel;
我們還是從最簡單的代碼實例開始吧：Ext.form.FormPanel = Ext.FormPanel;
<!--html代碼-->
<body>
<div id="form1"></div>
</body>
<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("事件！");}}]
});
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,參數如下：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();}}]
});
//input的各種類型（這個大家都知道，就只列了幾個典型的）radiochecktext(默認)filepassword等等1.labelAlign:fieldlabel的排列位置，默認爲"left"，其他兩個枚舉值是"center","right"
2.labelWidth:fieldlabel的佔位寬
3.method:"get"或"post"
4.url："提交的地址"
5.submit:提交函數 //稍後我們一起詳細分析
因爲內容太多，我們先看一個例子。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:'請選擇性別.'
}]
}
]
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還有很多的東西要了解，但是今天不能再講了，太多了，大家都沒有興致看下去,明天繼續。---------------------------------------
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
extjs的東西很龐大，但是還沒有一個人用中文系統的分析寫文章，所以資料都很可貴，現在我想做這件事，請大家多多支持，我纔有動力，
纔有激情，才能寫出更好的下一片文章，讓我們期待更精彩的next吧!