第六课,Extjs中常用表单介绍与应用

目标:

      知道表单面板如何创建

      了解表单面板中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 width: 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 ' ,width: 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 text(默认) filepassword等等
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 width: 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:{width: 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 width: 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:{width: 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: // ***
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 width: 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 width: 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 ' ,width: 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 width: 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:{width: 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: // ***
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

 

转载于:https://www.cnblogs.com/chenjq0717/archive/2010/06/05/1752183.html