目标:
知道表单面板如何创建
了解表单面板中xtype的类型的应用
知道表单面板如何验证，绑定，取值
综合应用表单面板（玩转它）
内容:
首先我们要理解的是FormPanel也是继承panel组件的。所以它有着panel的属性
要创建一个表单面板其实很简单 var MyformPanel=new Ext.form.formpanel();
表单面板和面板一样只是作为一个容器出现的，需要我们使用items加入各控件元素来丰富我们的表单面板，
defaults:{},此属性提取了items中各组件项的共同属性
对于xtype:在表单面板中非常有用，没有必要每次都用new 来创建一个组件，它定义了组件的类型，同时让组件在加载后渲染。
Xtype中最常见的组件
1 form Ext.FormPanel
2 checkbox Ext.form.Checkbox
3 combo Ext.form.ComboBox
4 datefield Ext.form.DateField
5 field Ext.form.Field
6 fieldset Ext.form.FieldSet
7 hidden Ext.form.Hidden
8 htmleditor Ext.form.HtmlEditor
9 label Ext.form.Label
10 numberfield Ext.form.NumberField
11 radio Ext.form.Radio
12 textarea Ext.form.TextArea
13 textfield Ext.form.TextField
14 timefield Ext.form.TimeField
15 trigger Ext.form.TriggerField
对于表单验证，Extjs提供了非常强大的支持，在后面的实例中大家可以发现
实例分析讲解：
一，创建表单面板
创建Formpanel
1 function Read2() {
2 Ext.QuickTips.init();
3 var MyForm=new Ext.form.FormPanel({
4 title:'表单应用',
5 300,
6 x:300,
7 y:50,
8 floating:true,
9 tools:[{id:'close'}],
10 frame:true,
11 bodyStyle:'padding:10px 0px 1px 1px',
12 labelSeparator:':',
13 labelAlign:'right',
14 renderTo:Ext.getBody(),//为什么这里不可以用'id1'
15 defaults:{xtype:'textfield',150,allowBlank:false,msgTarget:'side'},//提取共同属性
16 items:[
17 {
18 fieldLabel:'用户名称',
19 name:'username',
20 id:'user',
21 emptyText:'请输入用户名',
22 blankText:'请输入用户名'
23 },
24 {
25 fieldLabel:'用户密码',
26 name:'userpassword',
27 id:'password',
28 inputType:'password',//它还包括 radiocheck
29 blankText:'请输入密码'
30
31 }
32
33 ],
34 buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件！");}}],
35 buttonAlign:'center'
36
37 });
38 }
注意：renderTo:'id1' 这个时候表单面板显示失效 想来很久不知道是怎么一回事
二，基本表单组建的应用于说明 (通常情况下我们都是利用xtype来说明 items中组件的类型)
fieldset的应用
1 function Read3() {
2 var MyformPanel=new Ext.form.FormPanel({
3 title:'fieldset的应用',
4 renderTo:Ext.getBody(),
5 frame:true,
6 350,
7 x:400,
8 y:50,
9 floating:true,
10 items:[
11 {
12 xtype:'fieldset',
13 title:'用户信息',
14 collapsible:true,
15 autoHeight:true,
16 autoWidth:true,
17 defaults:{150,allowBlank:false,xtype:'textfield'},
18 items:[
19 {
20 fieldLabel:'用户名称',
21 emptyText:'陈建强',
22 blankText:'请输入用户名称'
23
24
25 },
26 {
27 fieldLabel:'用户密码',
28 inputType:'password',
29 blankText:'请输入用户密码'
30 }
31 ]
32 }
33 ]
34 });
35 }
表单面板中基本组件的介绍
1 function Read3() {
2 Ext.QuickTips.init();//初始化tips
3 Ext.apply(Ext.form.VTypes,{
4 password:function(val,field){//val指这里的文本框值，field指这个文本框组件，大家要明白这个意思
5 if(field.confirmTo){//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
6 var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
7 return (val==pwd.getValue());
8 }
9 return true;
10 }
11 });
12 var MyformPanel=new Ext.form.FormPanel({
13 title:'fieldset的应用',
14 renderTo:Ext.getBody(),
15 frame:true,
16 550,
17 x:400,
18 y:50,
19 draggable:{
20 insertProxy: false,//拖动时不虚线显示原始位置
21 onDrag : function(e){
22 var pel = this.proxy.getEl();
23 this.x = pel.getLeft(true);
24 this.y = pel.getTop(true);//获取拖动时panel的坐标
25 var s = this.panel.getEl().shadow;
26 if (s){
27 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
28 }
29 },
30 endDrag : function(e){
31 this.panel.setPosition(this.x, this.y);//移动到最终位置
32 }
33 },
34 plain:true,
35 floating:true,
36 items:[
37 {
38 xtype:'fieldset',
39 checkboxToggle:true,
40 checkboxName:'user',
41 title:'用户信息',
42 collapsible:true,
43 autoHeight:true,
44 autoWidth:true,
45 labelSeparator:':',
46 labelAlign:'right',
47 labelWidth:70,
48 defaults:{150,allowBlank:false,xtype:'textfield'},
49 items:[
50 {
51 fieldLabel:'用户名称',
52 emptyText:'陈建强',
53 id:'user',
54 name:'userName',
55 blankText:'请输入用户名称',
56 anchor:'95%'
57
58 },
59 {
60 fieldLabel:'用户密码',
61 inputType:'password',// password text checkbox rodio
62 id:'password',
63 name:'userpassword',
64 value:'0717',
65 blankText:'请输入用户密码',
66 anchor:'95%'
67 },
68 {
69 fieldLabel:'确认密码',
70 id:'password2',
71 name:'userpassword2',
72 inputType:'password',
73 vtype:'password',
74 vtypeText:'两次输入的密码不一致',
75 confirmTo:'userpassword',
76 anchor:'95%'
77 },
78 {
79 xtype:"datefield",
80 fieldLabel:"出生日期",
81
82 anchor:"95%"
83 },
84 {
85 fieldLabel:'我的博客',
86 value:'http://www.cnblogs.com/chenjq0717',
87 vtype:'url',
88 vtypeText:'不是有效的url',
89 id1:'myblog',
90 name:'myblog',
91 anchor:'95%'
92 },
93 {
94 //alpha 只能输入字母，无法输入其他（如数字，特殊符号等）
95 //2.alphanum//只能输入字母和数字，无法输入其他
96 //3.email//email验证，要求的格式是"langsin@gmail.com"
97 //4.url//url格式验证，要求的格式是http://www.langsin.com
98 fieldLabel:'电子邮箱',
99 vtype:'email',
100 vtypeText:'不是有效的邮箱',
101 name:'email',
102 anchor:'95%'
103 },
104 {
105 xtype:"panel",
106 layout:"column",
107 fieldLabel:'性别',
108 isFormField:true,
109 items:[{
110 columnWidth:.5,
111 xtype:"radio",
112 boxLabel:"男",
113 name:"sex"
114 //inputValue
115 },{
116 columnWidth:.5,
117 checked:true,
118 xtype:"radio",
119 boxLabel:"女",
120 name:"sex"
121 }]
122
123 },
124 {
125 xtype:"panel",
126 layout:"column",//也可以是table,实现多列布局
127 fieldLabel:'爱好',
128 isFormField:true,//非常重要,否则panel默认不显示fieldLabel
129 items:[{
130 columnWidth:.5,//宽度为50%
131 xtype:"checkbox",
132 boxLabel:"足球",//显示在复选框右边的文字
133 name:""
134 },{
135 columnWidth:.5,
136 xtype:"checkbox",
137 boxLabel:"篮球",
138 name:""
139 }]
140
141 },
142 {
143 xtype:'combo',
144 fieldLabel:'用户家乡',
145 name:'family',
146 store:<%=getfamilyData() %>,//调用后台变量
147 emptyText:'请选择家乡'
148 },
149 {
150 xtype:"htmleditor",
151 id:"myinfo",
152 fieldLabel:"个人说明",
153 anchor:"99%"
154
155 }
156
157 ]
158 }
159 ]
160 });
161 }
表单数据提交到服务器 submit
submit: function(){
this.getEl().dom.action = 'MyPages/GetForm.aspx', //提交后转向的页面
this.getEl().dom.method='POST',//提交方式
this.getEl().dom.submit();//执行提交
},
添加提交按钮
buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]
添加提交方法：
function login(){
MyformPanel.form.submit();//提交
}
function reset(){
MyformPanel.form.reset();//取消
}
本课代码：
表单面板的综合应用
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext7.aspx.cs" Inherits="EXT1.Ext7" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7 <title>第七课,Extjs中常用表单介绍与应用</title>
8 <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
9 <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
10 <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
11 <script type="text/javascript">
12 function Read1() {
13 Ext.QuickTips.init();
14 var MyForm=new Ext.form.FormPanel({
15 title:'表单应用',
16 300,
17 height:200,
18 x:300,
19 y:50,
20 floating:true,
21 tools:[{id:'close'}],
22 draggable:{
23 insertProxy: false,//拖动时不虚线显示原始位置
24 onDrag : function(e){
25 var pel = this.proxy.getEl();
26 this.x = pel.getLeft(true);
27 this.y = pel.getTop(true);//获取拖动时panel的坐标
28 var s = this.panel.getEl().shadow;
29 if (s){
30 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
31 }
32 },
33 endDrag : function(e){
34 this.panel.setPosition(this.x, this.y);//移动到最终位置
35 }
36 },
37 frame:true,
38 labelSeparator:':',
39 labelAlign:'right',
40 renderTo:Ext.getBody(),//为什么这里不可以用'id1'
41 items:[
42 new Ext.form.TextField({
43 fieldLabel:'用户名称',
44 allowBlank:false,
45 blankText:'请输入用户名',
46 msgTarget:'side'
47 }),
48 new Ext.form.TextField({
49 fieldLabel:'用户密码',
50 allowBlank:false,
51 inputType:'password',
52 blankText:'请输入密码',
53 msgTarget:'side'
54
55 })
56 ]
57 });
58 }
59 function Read2() {
60 Ext.QuickTips.init();
61 var MyForm=new Ext.form.FormPanel({
62 title:'表单应用',
63 300,
64 x:300,
65 y:50,
66 floating:true,
67 tools:[{id:'close'}],
68 frame:true,
69 bodyStyle:'padding:10px 0px 1px 1px',
70 labelSeparator:':',
71 labelAlign:'right',
72 draggable:{
73 insertProxy: false,//拖动时不虚线显示原始位置
74 onDrag : function(e){
75 var pel = this.proxy.getEl();
76 this.x = pel.getLeft(true);
77 this.y = pel.getTop(true);//获取拖动时panel的坐标
78 var s = this.panel.getEl().shadow;
79 if (s){
80 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
81 }
82 },
83 endDrag : function(e){
84 this.panel.setPosition(this.x, this.y);//移动到最终位置
85 }
86 },
87 renderTo:Ext.getBody(),//为什么这里不可以用'id1'
88 defaults:{xtype:'textfield',150,allowBlank:false,msgTarget:'side'},//提取共同属性
89 items:[
90 {
91 fieldLabel:'用户名称',
92 name:'username',
93 id:'user',
94 emptyText:'请输入用户名',
95 blankText:'请输入用户名'
96 },
97 {
98 fieldLabel:'用户密码',
99 name:'userpassword',
100 id:'password',
101 inputType:'password',
102 blankText:'请输入密码'
103
104 }
105
106 ],
107 buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件！");}}],
108 buttonAlign:'center'
109
110 });
111 }
112
113 function Read3() {
114 Ext.QuickTips.init();//初始化tips
115 Ext.apply(Ext.form.VTypes,{
116 password:function(val,field){//val指这里的文本框值，field指这个文本框组件，大家要明白这个意思
117 if(field.confirmTo){//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
118 var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
119 return (val==pwd.getValue());
120 }
121 return true;
122 }
123 });
124 var MyformPanel=new Ext.form.FormPanel({
125 title:'fieldset的应用',
126 renderTo:Ext.getBody(),
127 frame:true,
128 550,
129 x:400,
130 y:50,
131 draggable:{
132 insertProxy: false,//拖动时不虚线显示原始位置
133 onDrag : function(e){
134 var pel = this.proxy.getEl();
135 this.x = pel.getLeft(true);
136 this.y = pel.getTop(true);//获取拖动时panel的坐标
137 var s = this.panel.getEl().shadow;
138 if (s){
139 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
140 }
141 },
142 endDrag : function(e){
143 this.panel.setPosition(this.x, this.y);//移动到最终位置
144 }
145 },
146 submit: function(){
147 this.getEl().dom.action = 'MyPages/GetForm.aspx',
148 this.getEl().dom.method='POST',
149 this.getEl().dom.submit();
150 },
151 plain:true,
152 floating:true,
153 items:[
154 {
155 xtype:'fieldset',
156 checkboxToggle:true,
157 checkboxName:'user',
158 title:'用户信息',
159 collapsible:true,
160 autoHeight:true,
161 autoWidth:true,
162 labelSeparator:':',
163 labelAlign:'right',
164 labelWidth:70,
165 defaults:{150,allowBlank:false,xtype:'textfield'},
166 items:[
167 {
168 fieldLabel:'用户名称',
169 //emptyText:'陈建强',
170 id:'user',
171 name:'userName',
172 blankText:'请输入用户名称',
173 anchor:'95%'
174
175 },
176 {
177 fieldLabel:'用户密码',
178 inputType:'password',// password text checkbox rodio
179 id:'password',
180 name:'userpassword',
181 value:'0717',
182 blankText:'请输入用户密码',
183 anchor:'95%'
184 },
185 {
186 fieldLabel:'确认密码',
187 id:'password2',
188 name:'userpassword2',
189 inputType:'password',
190 vtype:'password',
191 vtypeText:'两次输入的密码不一致',
192 confirmTo:'userpassword',
193 anchor:'95%'
194 },
195 {
196 xtype:"datefield",
197 fieldLabel:"出生日期",
198
199 anchor:"95%"
200 },
201 {
202 fieldLabel:'我的博客',
203 value:'http://www.cnblogs.com/chenjq0717',
204 vtype:'url',
205 vtypeText:'不是有效的url',
206 id1:'myblog',
207 name:'myblog',
208 anchor:'95%'
209 },
210 {
211 //alpha 只能输入字母，无法输入其他（如数字，特殊符号等）
212 //2.alphanum//只能输入字母和数字，无法输入其他
213 //3.email//email验证，要求的格式是"langsin@gmail.com"
214 //4.url//url格式验证，要求的格式是http://www.langsin.com
215 fieldLabel:'电子邮箱',
216 vtype:'email',
217 vtypeText:'不是有效的邮箱',
218 name:'email',
219 anchor:'95%'
220 },
221 {
222 xtype:"panel",
223 layout:"column",
224 fieldLabel:'性别',
225 isFormField:true,
226 items:[{
227 columnWidth:.5,
228 xtype:"radio",
229 boxLabel:"男",
230 name:"sex"
231 //inputValue
232 },{
233 columnWidth:.5,
234 checked:true,
235 xtype:"radio",
236 boxLabel:"女",
237 name:"sex"
238 }]
239
240 },
241 {
242 xtype:"panel",
243 layout:"column",//也可以是table,实现多列布局
244 fieldLabel:'爱好',
245 isFormField:true,//非常重要,否则panel默认不显示fieldLabel
246 items:[{
247 columnWidth:.5,//宽度为50%
248 xtype:"checkbox",
249 boxLabel:"足球",//显示在复选框右边的文字
250 name:""
251 },{
252 columnWidth:.5,
253 xtype:"checkbox",
254 boxLabel:"篮球",
255 name:""
256 }]
257
258 },
259 {
260 xtype:'combo',
261 fieldLabel:'用户家乡',
262 name:'family',
263 store:<%=getfamilyData() %>,//调用后台变量
264 emptyText:'请选择家乡'
265 },
266 {
267 xtype:"htmleditor",
268 id:"myinfo",
269 fieldLabel:"个人说明",
270 anchor:"99%"
271
272 }
273
274 ]
275
276 }
277 ],
278 buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]
279
280 });
281 function login(){
282 MyformPanel.form.submit();//提交
283 }
284 function reset(){
285 MyformPanel.form.reset();//取消
286 }
287
288 }
289
290
291 Ext.onReady(Read3);
292 </script>
293 </head>
294 <body>
295 <form id="form1" runat="server">
296 <div id="id1">
297 </div>
298 </form>
299 </body>
300 <script type="text/javascript">
301
302 </script>
303 </html>
304