效果图如下:
主要文件dynamic.html,dynamic.js。
dynamic.html
01.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
02.
<html>
03.
<head>
04.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
05.
<title>Forms</title>
06.
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
07.
08.
<!-- GC -->
09.
<!-- LIBS -->
10.
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
11.
<!-- ENDLIBS -->
12.
13.
<script type="text/javascript" src="../../ext-all.js"></script>
14.
15.
<script type="text/javascript" src="states.js"></script>
16.
<script type="text/javascript" src="dynamic.js"></script>
17.
<link rel="stylesheet" type="text/css" href="forms.css"/>
18.
19.
<!-- Common Styles for the examples -->
20.
<link rel="stylesheet" type="text/css" href="../examples.css"/>
21.
</head>
22.
<body>
23.
<script type="text/javascript" src="../examples.js"></script>
24.
<!-- EXAMPLES -->
25.
<h1>Dynamic Forms built with JavaScript</h1>
26.
27.
<p>
28.
These forms do not do anything and have very little validation. They solely demonstrate
29.
how you can use Ext Forms to build and layout forms on the fly.
30.
</p>
31.
32.
<p>The js is not minified so it is readable. See <a href="dynamic.js">dynamic.js</a>.</p>
33.
34.
</body>
35.
</html>
dynamic.js
001.
/*
002.
* Ext JS Library 2.0.2
003.
* Copyright(c) 2006-2008, Ext JS, LLC.
004.
* <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%22%3e%6c%69%63%65%6e%73%69%6e%67%40%65%78%74%6a%73%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><a href="mailto:licensing@extjs.com">licensing@extjs.com</a>
005.
*
006.
* <a href="http://extjs.com/license">http://extjs.com/license<;/a>
007.
*/
008.
009.
Ext.onReady(function(){
010.
011.
Ext.QuickTips.init();
012.
013.
// turn on validation errors beside the field globally
014.
Ext.form.Field.prototype.msgTarget = 'side';
015.
016.
var bd = Ext.getBody();
017.
018.
/*
019.
* ================ Simple form =======================
020.
*/
021.
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
022.
023.
024.
var simple = new Ext.FormPanel({
025.
labelWidth: 75, // label settings here cascade unless overridden
026.
url:'save-form.php',
027.
frame:true,
028.
title: 'Simple Form',
029.
bodyStyle:'padding:5px 5px 0',
030.
width: 350,
031.
defaults: {width: 230},
032.
defaultType: 'textfield',
033.
034.
items: [{
035.
fieldLabel: 'First Name',
036.
name: 'first',
037.
allowBlank:false
038.
},{
039.
fieldLabel: 'Last Name',
040.
name: 'last'
041.
},{
042.
fieldLabel: 'Company',
043.
name: 'company'
044.
}, {
045.
fieldLabel: 'Email',
046.
name: 'email',
047.
vtype:'email'
048.
}, new Ext.form.TimeField({
049.
fieldLabel: 'Time',
050.
name: 'time',
051.
minValue: '8:00am',
052.
maxValue: '6:00pm'
053.
})
054.
],
055.
056.
buttons: [{
057.
text: 'Save'
058.
},{
059.
text: 'Cancel'
060.
}]
061.
});
062.
063.
simple.render(document.body);
064.
065.
066.
/*
067.
* ================ Form 2 =======================
068.
*/
069.
bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
070.
071.
var fsf = new Ext.FormPanel({
072.
labelWidth: 75, // label settings here cascade unless overridden
073.
url:'save-form.php',
074.
frame:true,
075.
title: 'Simple Form with FieldSets',
076.
bodyStyle:'padding:5px 5px 0',
077.
width: 350,
078.
079.
items: [{
080.
xtype:'fieldset',
081.
checkboxToggle:true,
082.
title: 'User Information',
083.
autoHeight:true,
084.
defaults: {width: 210},
085.
defaultType: 'textfield',
086.
collapsed: true,
087.
items :[{
088.
fieldLabel: 'First Name',
089.
name: 'first',
090.
allowBlank:false
091.
},{
092.
fieldLabel: 'Last Name',
093.
name: 'last'
094.
},{
095.
fieldLabel: 'Company',
096.
name: 'company'
097.
}, {
098.
fieldLabel: 'Email',
099.
name: 'email',
100.
vtype:'email'
101.
}
102.
]
103.
},{
104.
xtype:'fieldset',
105.
title: 'Phone Number',
106.
collapsible: true,
107.
autoHeight:true,
108.
defaults: {width: 210},
109.
defaultType: 'textfield',
110.
items :[{
111.
fieldLabel: 'Home',
112.
name: 'home',
113.
value: '(888) 555-1212'
114.
},{
115.
fieldLabel: 'Business',
116.
name: 'business'
117.
},{
118.
fieldLabel: 'Mobile',
119.
name: 'mobile'
120.
},{
121.
fieldLabel: 'Fax',
122.
name: 'fax'
123.
}
124.
]
125.
}],
126.
127.
buttons: [{
128.
text: 'Save'
129.
},{
130.
text: 'Cancel'
131.
}]
132.
});
133.
134.
fsf.render(document.body);
135.
136.
/*
137.
* ================ Form 3 =======================
138.
*/
139.
bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
140.
141.
142.
var top = new Ext.FormPanel({
143.
labelAlign: 'top',
144.
frame:true,
145.
title: 'Multi Column, Nested Layouts and Anchoring',
146.
bodyStyle:'padding:5px 5px 0',
147.
width: 600,
148.
items: [{
149.
layout:'column',
150.
items:[{
151.
columnWidth:.5,
152.
layout: 'form',
153.
items: [{
154.
xtype:'textfield',
155.
fieldLabel: 'First Name',
156.
name: 'first',
157.
anchor:'95%'
158.
}, {
159.
xtype:'textfield',
160.
fieldLabel: 'Company',
161.
name: 'company',
162.
anchor:'95%'
163.
}]
164.
},{
165.
columnWidth:.5,
166.
layout: 'form',
167.
items: [{
168.
xtype:'textfield',
169.
fieldLabel: 'Last Name',
170.
name: 'last',
171.
anchor:'95%'
172.
},{
173.
xtype:'textfield',
174.
fieldLabel: 'Email',
175.
name: 'email',
176.
vtype:'email',
177.
anchor:'95%'
178.
}]
179.
}]
180.
},{
181.
xtype:'htmleditor',
182.
id:'bio',
183.
fieldLabel:'Biography',
184.
height:200,
185.
anchor:'98%'
186.
}],
187.
188.
buttons: [{
189.
text: 'Save'
190.
},{
191.
text: 'Cancel'
192.
}]
193.
});
194.
195.
top.render(document.body);
196.
197.
198.
/*
199.
* ================ Form 4 =======================
200.
*/
201.
bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
202.
203.
204.
205.
var tabs = new Ext.FormPanel({
206.
labelWidth: 75,
207.
border:false,
208.
width: 350,
209.
210.
items: {
211.
xtype:'tabpanel',
212.
activeTab: 0,
213.
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
214.
items:[{
215.
title:'Personal Details',
216.
layout:'form',
217.
defaults: {width: 230},
218.
defaultType: 'textfield',
219.
220.
items: [{
221.
fieldLabel: 'First Name',
222.
name: 'first',
223.
allowBlank:false,
224.
value: 'Jack'
225.
},{
226.
fieldLabel: 'Last Name',
227.
name: 'last',
228.
value: 'Slocum'
229.
},{
230.
fieldLabel: 'Company',
231.
name: 'company',
232.
value: 'Ext JS'
233.
}, {
234.
fieldLabel: 'Email',
235.
name: 'email',
236.
vtype:'email'
237.
}]
238.
},{
239.
title:'Phone Numbers',
240.
layout:'form',
241.
defaults: {width: 230},
242.
defaultType: 'textfield',
243.
244.
items: [{
245.
fieldLabel: 'Home',
246.
name: 'home',
247.
value: '(888) 555-1212'
248.
},{
249.
fieldLabel: 'Business',
250.
name: 'business'
251.
},{
252.
fieldLabel: 'Mobile',
253.
name: 'mobile'
254.
},{
255.
fieldLabel: 'Fax',
256.
name: 'fax'
257.
}]
258.
}]
259.
},
260.
261.
buttons: [{
262.
text: 'Save'
263.
},{
264.
text: 'Cancel'
265.
}]
266.
});
267.
268.
tabs.render(document.body);
269.
270.
271.
272.
/*
273.
* ================ Form 5 =======================
274.
*/
275.
bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
276.
277.
var tab2 = new Ext.FormPanel({
278.
labelAlign: 'top',
279.
title: 'Inner Tabs',
280.
bodyStyle:'padding:5px',
281.
width: 600,
282.
items: [{
283.
layout:'column',
284.
border:false,
285.
items:[{
286.
columnWidth:.5,
287.
layout: 'form',
288.
border:false,
289.
items: [{
290.
xtype:'textfield',
291.
fieldLabel: 'First Name',
292.
name: 'first',
293.
anchor:'95%'
294.
}, {
295.
xtype:'textfield',
296.
fieldLabel: 'Company',
297.
name: 'company',
298.
anchor:'95%'
299.
}]
300.
},{
301.
columnWidth:.5,
302.
layout: 'form',
303.
border:false,
304.
items: [{
305.
xtype:'textfield',
306.
fieldLabel: 'Last Name',
307.
name: 'last',
308.
anchor:'95%'
309.
},{
310.
xtype:'textfield',
311.
fieldLabel: 'Email',
312.
name: 'email',
313.
vtype:'email',
314.
anchor:'95%'
315.
}]
316.
}]
317.
},{
318.
xtype:'tabpanel',
319.
plain:true,
320.
activeTab: 0,
321.
height:235,
322.
defaults:{bodyStyle:'padding:10px'},
323.
items:[{
324.
title:'Personal Details',
325.
layout:'form',
326.
defaults: {width: 230},
327.
defaultType: 'textfield',
328.
329.
items: [{
330.
fieldLabel: 'First Name',
331.
name: 'first',
332.
allowBlank:false,
333.
value: 'Jack'
334.
},{
335.
fieldLabel: 'Last Name',
336.
name: 'last',
337.
value: 'Slocum'
338.
},{
339.
fieldLabel: 'Company',
340.
name: 'company',
341.
value: 'Ext JS'
342.
}, {
343.
fieldLabel: 'Email',
344.
name: 'email',
345.
vtype:'email'
346.
}]
347.
},{
348.
title:'Phone Numbers',
349.
layout:'form',
350.
defaults: {width: 230},
351.
defaultType: 'textfield',
352.
353.
items: [{
354.
fieldLabel: 'Home',
355.
name: 'home',
356.
value: '(888) 555-1212'
357.
},{
358.
fieldLabel: 'Business',
359.
name: 'business'
360.
},{
361.
fieldLabel: 'Mobile',
362.
name: 'mobile'
363.
},{
364.
fieldLabel: 'Fax',
365.
name: 'fax'
366.
}]
367.
},{
368.
cls:'x-plain',
369.
title:'Biography',
370.
layout:'fit',
371.
items: {
372.
xtype:'htmleditor',
373.
id:'bio2',
374.
fieldLabel:'Biography'
375.
}
376.
}]
377.
}],
378.
379.
buttons: [{
380.
text: 'Save'
381.
},{
382.
text: 'Cancel'
383.
}]
384.
});
385.
386.
tab2.render(document.body);
387.
});
4682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
