动态表单(Dynamic Forms)

来源：互联网发布：淘宝悬浮导航怎么做编辑：程序博客网时间：2024/05/01 01:21

效果图如下:

主要文件dynamic.html,dynamic.js。

dynamic.html

view sourceprint?
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet"type="text/css" href="../../resources/css/ext-all.css"/>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript"src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript"src="../../ext-all.js"></script>

<script type="text/javascript"src="states.js"></script>
<script type="text/javascript"src="dynamic.js"></script>
<link rel="stylesheet"type="text/css" href="forms.css"/>

<!-- Common Stylesfor the examples -->
<link rel="stylesheet"type="text/css" href="../examples.css"/>
</head>
<body>
<script type="text/javascript"src="../examples.js"></script>
<!-- EXAMPLES -->
<h1>Dynamic Forms builtwith JavaScript</h1>

<p>
These formsdo not doanything and have very little validation. They solely demonstrate
how you can use Ext Forms to build and layout forms on the fly.
</p>

<p>The js is not minified so it is readable. See <a href="dynamic.js">dynamic.js</a>.</p>

</body>
</html>

dynamic.js

view sourceprint?
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* <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>
*
* <a href="http://extjs.com/license">http://extjs.com/license<;/a>
*/

Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget ='side';

varbd = Ext.getBody();

/*
* ================ Simple form =======================
*/
bd.createChild({tag:'h2', html: 'Form 1 - Very Simple'});


varsimple = new Ext.FormPanel({
labelWidth: 75,// label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title:'Simple Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType:'textfield',

items: [{
fieldLabel:'First Name',
name:'first',
allowBlank:false
},{
fieldLabel:'Last Name',
name:'last'
},{
fieldLabel:'Company',
name:'company'
}, {
fieldLabel:'Email',
name:'email',
vtype:'email'
},new Ext.form.TimeField({
fieldLabel:'Time',
name:'time',
minValue:'8:00am',
maxValue:'6:00pm'
})
],

buttons: [{
text:'Save'
},{
text:'Cancel'
}]
});

simple.render(document.body);


/*
* ================ Form 2 =======================
*/
bd.createChild({tag:'h2', html: 'Form 2 - Adding fieldsets'});

varfsf = new Ext.FormPanel({
labelWidth: 75,// label settings here cascade unless overridden
url:'save-form.php',
frame:true,
title:'Simple Form with FieldSets',
bodyStyle:'padding:5px 5px 0',
width: 350,

items: [{
xtype:'fieldset',
checkboxToggle:true,
title:'User Information',
autoHeight:true,
defaults: {width: 210},
defaultType:'textfield',
collapsed:true,
items :[{
fieldLabel:'First Name',
name:'first',
allowBlank:false
},{
fieldLabel:'Last Name',
name:'last'
},{
fieldLabel:'Company',
name:'company'
}, {
fieldLabel:'Email',
name:'email',
vtype:'email'
}
]
},{
xtype:'fieldset',
title:'Phone Number',
collapsible:true,
autoHeight:true,
defaults: {width: 210},
defaultType:'textfield',
items :[{
fieldLabel:'Home',
name:'home',
value:'(888) 555-1212'
},{
fieldLabel:'Business',
name:'business'
},{
fieldLabel:'Mobile',
name:'mobile'
},{
fieldLabel:'Fax',
name:'fax'
}
]
}],

buttons: [{
text:'Save'
},{
text:'Cancel'
}]
});

fsf.render(document.body);

/*
* ================ Form 3 =======================
*/
bd.createChild({tag:'h2', html: 'Form 3 - A little more complex'});


vartop = new Ext.FormPanel({
labelAlign:'top',
frame:true,
title:'Multi Column, Nested Layouts and Anchoring',
bodyStyle:'padding:5px 5px 0',
width: 600,
items: [{
layout:'column',
items:[{
columnWidth:.5,
layout:'form',
items: [{
xtype:'textfield',
fieldLabel:'First Name',
name:'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel:'Company',
name:'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout:'form',
items: [{
xtype:'textfield',
fieldLabel:'Last Name',
name:'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel:'Email',
name:'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'htmleditor',
id:'bio',
fieldLabel:'Biography',
height:200,
anchor:'98%'
}],

buttons: [{
text:'Save'
},{
text:'Cancel'
}]
});

top.render(document.body);


/*
* ================ Form 4 =======================
*/
bd.createChild({tag:'h2', html: 'Form 4 - Forms can be a TabPanel...'});



vartabs = new Ext.FormPanel({
labelWidth: 75,
border:false,
width: 350,

items: {
xtype:'tabpanel',
activeTab: 0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType:'textfield',

items: [{
fieldLabel:'First Name',
name:'first',
allowBlank:false,
value:'Jack'
},{
fieldLabel:'Last Name',
name:'last',
value:'Slocum'
},{
fieldLabel:'Company',
name:'company',
value:'Ext JS'
}, {
fieldLabel:'Email',
name:'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType:'textfield',

items: [{
fieldLabel:'Home',
name:'home',
value:'(888) 555-1212'
},{
fieldLabel:'Business',
name:'business'
},{
fieldLabel:'Mobile',
name:'mobile'
},{
fieldLabel:'Fax',
name:'fax'
}]
}]
},

buttons: [{
text:'Save'
},{
text:'Cancel'
}]
});

tabs.render(document.body);



/*
* ================ Form 5 =======================
*/
bd.createChild({tag:'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});

vartab2 = new Ext.FormPanel({
labelAlign:'top',
title:'Inner Tabs',
bodyStyle:'padding:5px',
width: 600,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout:'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel:'First Name',
name:'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel:'Company',
name:'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout:'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel:'Last Name',
name:'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel:'Email',
name:'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType:'textfield',

items: [{
fieldLabel:'First Name',
name:'first',
allowBlank:false,
value:'Jack'
},{
fieldLabel:'Last Name',
name:'last',
value:'Slocum'
},{
fieldLabel:'Company',
name:'company',
value:'Ext JS'
}, {
fieldLabel:'Email',
name:'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType:'textfield',

items: [{
fieldLabel:'Home',
name:'home',
value:'(888) 555-1212'
},{
fieldLabel:'Business',
name:'business'
},{
fieldLabel:'Mobile',
name:'mobile'
},{
fieldLabel:'Fax',
name:'fax'
}]
},{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
}]
}],

buttons: [{
text:'Save'
},{
text:'Cancel'
}]
});

tab2.render(document.body);
});