本节开始我们正式讲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
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>Hello Extjs4.2</
title
>
<
link
href
=
"../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"
rel
=
"stylesheet"
>
<
script
src
=
"../../ExtJS4.2/ext-all.js"
></
script
>
<
script
src
=
"../../ExtJS4.2/locale/ext-lang-zh_CN.js"
></
script
>
<
script
type
=
"text/javascript"
>
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
title:'第一个表单',
defaultType:'textfield', //默认表单里的控件类型
buttonAlign:'center', //按钮对齐方式
frame:true,
width:220,
fieldDefaults:{
labelAlign:'right', //文本对齐方式
labelWidth:70
},
items:[{ //内容
fieldLabel:'输入框'
}],
buttons:[{
text:'按钮'
}]
});
form.render("form");
});
</
script
>
</
head
>
<
body
>
<
h1
>我的ExtJS4.2学习之路</
h1
>
<
hr
/>
作者：束洋洋
开始日期：2013年12月10日 20:36:56
<
h2
>深入浅出ExtJS之制作表单</
h2
>
<
div
id
=
"form"
></
div
>
</
body
>
</
html
>
|
再来看看整体表单有哪些控件：
看看代码：
|
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
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
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>Hello Extjs4.2</
title
>
<
link
href
=
"../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"
rel
=
"stylesheet"
>
<
script
src
=
"../../ExtJS4.2/ext-all.js"
></
script
>
<
script
src
=
"../../ExtJS4.2/locale/ext-lang-zh_CN.js"
></
script
>
<
script
type
=
"text/javascript"
>
Ext.onReady(function(){
// HtmlEditor需要这个
Ext.QuickTips.init();
var form = new Ext.form.FormPanel({
buttonAlign: 'center',
width: 600,
title: 'form',
frame: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 70
},
items: [{
xtype: 'container',
layout: 'column',
items: [{
columnWidth:.7,
xtype:'fieldset',
collapsible: true, //是否为可折叠
collapsed: false, //默认是否折叠
title: '单纯输入',
autoHeight:true,
defaults: {width: 300},
defaultType: 'textfield',
items: [{
fieldLabel: '文本',
name: 'text'
},{
xtype: 'numberfield',
fieldLabel: '数字',
name: 'number'
},{
xtype:"combo",
fieldLabel: '选择',
name: 'combo',
store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [
['value1', 'text1'],
['value2', 'text2']
]
}),
displayField: 'text',
valueField: 'value',
mode: 'local',
emptyText:'请选择'
},{
xtype: 'datefield',
fieldLabel: '日期',
name: 'date'
},{
xtype: 'timefield',
fieldLabel: '时间',
name: 'time'
},{
xtype: 'textarea',
fieldLabel: '多行',
name: 'textarea'
},{
xtype: 'hidden',
name: 'hidden'
}]
},{
xtype: 'container',
columnWidth:.3,
layout:'form',
items:[{
xtype:'fieldset',
checkboxToggle:true, //多选
title: '多选',
autoHeight:true,
defaultType: 'checkbox',
hideLabels: true,
style: 'margin-left:10px;',
bodyStyle: 'margin-left:20px;',
items: [{
boxLabel: '首先要穿暖',
name: 'check',
value: '1',
checked: true,
width: 'auto'
},{
boxLabel: '然后要吃饱',
name: 'check',
value: '2',
checked: true,
width: 'auto'
},{
boxLabel: '房子遮风避雨',
name: 'check',
value: '3',
width: 'auto'
},{
boxLabel: '行路方便',
name: 'check',
value: '4',
width: 'auto'
}]
},{
xtype:'fieldset',
checkboxToggle:true,
title: '单选',
autoHeight:true,
defaultType: 'radio',
hideLabels: true,
style: 'margin-left:10px;',
bodyStyle: 'margin-left:20px;',
items: [{
boxLabel: '渴望自由',
name: 'rad',
value: '1',
checked: true,
width: 'auto'
},{
boxLabel: '祈求爱情',
name: 'rad',
value: '2',
width: 'auto'
}]
}]
}]
},{
xtype: 'container',
layout: 'form',
items: [{
labelAlign: 'top',
xtype: 'htmleditor',
fieldLabel: '在线编辑器',
id: 'editor',
anchor: '98%',
height: 200
}]
}],
buttons: [{
text: '保存'
},{
text: '读取'
},{
text: '取消'
}]
});
form.render("form");
});
</
script
>
</
head
>
<
body
>
<
h1
>我的ExtJS4.2学习之路</
h1
>
<
hr
/>
作者：束洋洋
开始日期：2013年12月10日 21:09:01
<
h2
>深入浅出ExtJS之表单控件</
h2
>
<
div
id
=
"form"
></
div
>
</
body
>
</
html
>
|
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1360283，如需转载请自行联系原作者
扫一扫
432
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
