本節開始我們正式講EXT的第2大類元件--表單控件，有了之前幾節的經驗，現在應該學起來得心應手，這裡先介紹下Extjs4.2裡的樣式，以便于美化界面，今天無意中還搜到了幾篇自己制作樣式的文章，相當給力，對于我來說是個好消息，我會在後面的學習中逐漸學習。
css檔案夾裡有總體對應的下面theme樣式，
access是黑色樣式
classic為預設藍色經典樣式
ext-theme-classic-sandbox為沒有樣式，最基本的，超難看，建議别用這個
ext-theme-gray是灰色樣式
ext-theme-neptune是藍色樣式
接下來的例子中我們主要使用ext-theme-neptune樣式，我們來制作一個簡單的表單：
主要代碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<code><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%></code>
<code><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></code>
<code><</code><code>html</code><code>></code>
<code><</code><code>head</code><code>></code>
<code><</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=UTF-8"</code><code>></code>
<code><</code><code>title</code><code>>Hello Extjs4.2</</code><code>title</code><code>></code>
<code><</code><code>link</code> <code>href</code><code>=</code><code>"../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>></code>
<code><</code><code>script</code> <code>src</code><code>=</code><code>"../../ExtJS4.2/ext-all.js"</code><code>></</code><code>script</code><code>></code>
<code><</code><code>script</code> <code>src</code><code>=</code><code>"../../ExtJS4.2/locale/ext-lang-zh_CN.js"</code><code>></</code><code>script</code><code>></code>
<code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>
<code>Ext.onReady(function(){</code>
<code> </code><code>var form = new Ext.form.FormPanel({</code>
<code> </code><code>title:'第一個表單',</code>
<code> </code><code>defaultType:'textfield', //預設表單裡的控件類型</code>
<code> </code><code>buttonAlign:'center', //按鈕對齊方式</code>
<code> </code><code>frame:true,</code>
<code> </code><code>width:220,</code>
<code> </code><code>fieldDefaults:{</code>
<code> </code><code>labelAlign:'right', //文本對齊方式</code>
<code> </code><code>labelWidth:70</code>
<code> </code><code>},</code>
<code> </code><code>items:[{ //内容</code>
<code> </code><code>fieldLabel:'輸入框'</code>
<code> </code><code>}],</code>
<code> </code><code>buttons:[{</code>
<code> </code><code>text:'按鈕'</code>
<code> </code><code>}]</code>
<code> </code><code>});</code>
<code> </code><code>form.render("form");</code>
<code>});</code>
<code></</code><code>script</code><code>></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code><</code><code>h1</code><code>>我的ExtJS4.2學習之路</</code><code>h1</code><code>></code>
<code><</code><code>hr</code> <code>/></code>
<code>作者：束洋洋</code>
<code>開始日期：2013年12月10日 20:36:56</code>
<code><</code><code>h2</code><code>>深入淺出ExtJS之制作表單</</code><code>h2</code><code>></code>
<code><</code><code>div</code> <code>id</code><code>=</code><code>"form"</code><code>></</code><code>div</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
再來看看整體表單有哪些控件：
看看代碼：
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<code> </code>
<code> </code><code>// HtmlEditor需要這個</code>
<code> </code><code>Ext.QuickTips.init();</code>
<code> </code><code>buttonAlign: 'center',</code>
<code> </code><code>width: 600,</code>
<code> </code><code>title: 'form',</code>
<code> </code><code>frame: true,</code>
<code> </code><code>fieldDefaults: {</code>
<code> </code><code>labelAlign: 'right',</code>
<code> </code><code>labelWidth: 70</code>
<code> </code><code>items: [{</code>
<code> </code><code>xtype: 'container',</code>
<code> </code><code>layout: 'column',</code>
<code> </code><code>items: [{</code>
<code> </code><code>columnWidth:.7,</code>
<code> </code><code>xtype:'fieldset',</code>
<code> </code><code>collapsible: true, //是否為可折疊</code>
<code> </code><code>collapsed: false, //預設是否折疊</code>
<code> </code><code>title: '單純輸入',</code>
<code> </code><code>autoHeight:true,</code>
<code> </code><code>defaults: {width: 300},</code>
<code> </code><code>defaultType: 'textfield',</code>
<code> </code><code>items: [{</code>
<code> </code><code>fieldLabel: '文本',</code>
<code> </code><code>name: 'text'</code>
<code> </code><code>},{</code>
<code> </code><code>xtype: 'numberfield',</code>
<code> </code><code>fieldLabel: '數字',</code>
<code> </code><code>name: 'number'</code>
<code> </code><code>xtype:"combo",</code>
<code> </code><code>fieldLabel: '選擇',</code>
<code> </code><code>name: 'combo',</code>
<code> </code><code>store: new Ext.data.SimpleStore({</code>
<code> </code><code>fields: ['value', 'text'],</code>
<code> </code><code>data: [</code>
<code> </code><code>['value1', 'text1'],</code>
<code> </code><code>['value2', 'text2']</code>
<code> </code><code>]</code>
<code> </code><code>}),</code>
<code> </code><code>displayField: 'text',</code>
<code> </code><code>valueField: 'value',</code>
<code> </code><code>mode: 'local',</code>
<code> </code><code>emptyText:'請選擇'</code>
<code> </code><code>xtype: 'datefield',</code>
<code> </code><code>fieldLabel: '日期',</code>
<code> </code><code>name: 'date'</code>
<code> </code><code>xtype: 'timefield',</code>
<code> </code><code>fieldLabel: '時間',</code>
<code> </code><code>name: 'time'</code>
<code> </code><code>xtype: 'textarea',</code>
<code> </code><code>fieldLabel: '多行',</code>
<code> </code><code>name: 'textarea'</code>
<code> </code><code>xtype: 'hidden',</code>
<code> </code><code>name: 'hidden'</code>
<code> </code><code>}]</code>
<code> </code><code>},{</code>
<code> </code><code>xtype: 'container',</code>
<code> </code><code>columnWidth:.3,</code>
<code> </code><code>layout:'form',</code>
<code> </code><code>items:[{</code>
<code> </code><code>xtype:'fieldset',</code>
<code> </code><code>checkboxToggle:true, //多選</code>
<code> </code><code>title: '多選',</code>
<code> </code><code>autoHeight:true,</code>
<code> </code><code>defaultType: 'checkbox',</code>
<code> </code><code>hideLabels: true,</code>
<code> </code><code>style: 'margin-left:10px;',</code>
<code> </code><code>bodyStyle: 'margin-left:20px;',</code>
<code> </code><code>items: [{</code>
<code> </code><code>boxLabel: '首先要穿暖',</code>
<code> </code><code>name: 'check',</code>
<code> </code><code>value: '1',</code>
<code> </code><code>checked: true,</code>
<code> </code><code>width: 'auto'</code>
<code> </code><code>},{</code>
<code> </code><code>boxLabel: '然後要吃飽',</code>
<code> </code><code>value: '2',</code>
<code> </code><code>boxLabel: '房子遮風避雨',</code>
<code> </code><code>value: '3',</code>
<code> </code><code>boxLabel: '行路友善',</code>
<code> </code><code>value: '4',</code>
<code> </code><code>}]</code>
<code> </code><code>checkboxToggle:true,</code>
<code> </code><code>title: '單選',</code>
<code> </code><code>defaultType: 'radio',</code>
<code> </code><code>boxLabel: '渴望自由',</code>
<code> </code><code>name: 'rad',</code>
<code> </code><code>boxLabel: '祈求愛情',</code>
<code> </code><code>}]</code>
<code> </code><code>},{</code>
<code> </code><code>layout: 'form',</code>
<code> </code><code>labelAlign: 'top',</code>
<code> </code><code>xtype: 'htmleditor',</code>
<code> </code><code>fieldLabel: '線上編輯器',</code>
<code> </code><code>id: 'editor',</code>
<code> </code><code>anchor: '98%',</code>
<code> </code><code>height: 200</code>
<code> </code><code>buttons: [{</code>
<code> </code><code>text: '儲存'</code>
<code> </code><code>text: '讀取'</code>
<code> </code><code>text: '取消'</code>
<code>開始日期：2013年12月10日 21:09:01</code>
<code><</code><code>h2</code><code>>深入淺出ExtJS之表單控件</</code><code>h2</code><code>></code>
本文轉自shyy8712872 51CTO部落格，原文連結：http://blog.51cto.com/shuyangyang/1360283，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)