logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

Extjs----form实例

 I_T_馆 2012-04-10
本实例的模板是extjs官方文档的examples/form下的例子
这里有一个样式,来自shared/examples.css,在做东西时导入这个文件,可以更好地布局整个页面
页面效果:
 
 
 
 
 
 
 
 
-------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<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"/>
<link rel="stylesheet" type="text/css" href="../../shared/examples.css"/>
<script type="text/javascript" src="../../shared/examples.js"></script>

<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var bd=Ext.getBody();
/*
*======================Form 1=========================
*/
bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
bd.createChild({html: '单击load按钮,加载数据'});
 
var reader=new Ext.data.JsonReader({},[
{
name:'firstName'
},
{
name:'lastName'
},
{
name:'company'
},
{
name:'email'
},
{
name:'time'
}
]);
var simple=new Ext.form.FormPanel({
frame:true,
title:'simple form',
        bodyStyle:'padding:10px 10px 0',
labelWidth:75,
defaults:{width:230},
width:350,
labelAlign:'right',
defaultType:'textfield',
reader:reader,
items:[
{
fieldLabel:'first name',
name:'firstName',
allowBlank:false
},
{
fieldLabel:'last name',
name:'lastName',
allowBlank:false
},
{
fieldLabel:'company',
name:'company',
allowBlank:false
},
{
   fieldLabel:'email',
name:'email',
allowBlank:false,
vtype:'email'
},
{
fieldLabel:'time',
name:'time',
allowBlank:false,
xtype:'timefield',
minValue:'8:00 am',
maxValue:'6:00 pm',
}
],
buttons:[
{
text:'Save'
},
{
text:'Load',
handler:function(){
simple.getForm().load({url:'simple.txt'});
}
}
]
});
 
simple.render(document.body);
/*
*===========================Form 2=========================
*/
bd.createChild({tag:'h2',html:'Form2 - Adding fieldset'});
var fsf=new Ext.form.FormPanel({
labelWidth:75,
labelAlign:'left',
frame:true,
bodyStyle:'padding:5px 5px 0',
width:350,
title:'Simple form width fieldset',
items:[{
xtype:'fieldset',
checkboxToggle:true,
            title: 'User Information',
collapsed: true,
defaults:{width:210},
defaultType:'textfield',
items:[
{
fieldLabel:'first name',
name:'firstName',
allowBlank:false
},
{
fieldLabel:'last name',
name:'lastName',
allowBlank:false
},
{
fieldLabel:'company',
name:'company',
allowBlank:false
},
{
fieldLabel:'email',
name:'email',
allowBlank:false,
vtype:'email'
}   
]
},{
xtype:'fieldset',
            title: 'Phone Number',
collapsible: true,
defaults:{width:210},
autoHeight:true,
defaultType:'textfield',
items:[
{
fieldLabel:'Home',
name:'Home',
value:'021-123456'
},
{
fieldLabel:'Business',
name:'business'
},
{
fieldLabel:'Model',
name:'model'
},
{
fieldLabel:'Fax',
name:'fax'
}
]
}],
buttons:[
{
text:'Save',
},
{
text:'Cancel',
}
]
});
fsf.render(document.body);
 
/*
 *===========================Form 3===================================
 */
bd.createChild({tag:'h2',html:'Form3 - A little more complex'});
var top=new Ext.form.FormPanel({
title:'A little more complex',
frame:true,
width:600,
labelWidth:75,
labelAlign:'top',
bodyStyle:'padding:5px 5px 0',
items:[
{
layout:'column',
items:[
{
columnWidth:.5,
layout:'form',
items:[
{
fieldLabel:'First Name',
name:'firstName',
xtype:'textfield',
anchor:'90%'
},
{
fieldLabel:'Last Name',
name:'lastName',
xtype:'textfield',
anchor:'90%'
}
]
},{
columnWidth:.5,
layout:'form',
defaultType:'textfield',
items:[
{
fieldLabel:'Company',
name:'company',
xtype:'textfield',
anchor:'90%',
},{
fieldLabel:'Email',
vtype:'email',
name:'email',
anchor:'90%'
}   
]
}
]
},new Ext.form.HtmlEditor({
fieldLabel:'htmlEditor',
anchor:'98%'
 
})
]   
});
top.render(document.body);
/*
 *===========================Form 4===================================
 *这里frame:false
 */
bd.createChild({tag:'h2',html:'Form can be a tabpanel....'});
var tabs=new Ext.FormPanel({
labelWidth: 75,
        border:false,
//frame:true,
        width: 350,
//title:'Form can be a tabpanel',
items:[
{
xtype:'tabpanel',//注意tabpanel只是一种类型,不是布局方式
activeTab:0,
defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
items:[
{
title:'Personal Detail',
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 Number',
defaults:{width:230},
defaultType:'textfield',
layout:'form',
items:[
{
fieldLabel:'Home',
name:'Home'
},
{
fieldLabel:'Businiess',
name:'business'
},
{
fieldLabel:'Mobel',
name:'mobel'
},
{
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)'});
 
var tab2=new Ext.form.FormPanel({
title:'inner tabs',
frame:true,
width:600,
items:[
{
layout:'column',
labelAlign:'top',
labelWidth:75,
items:[
{
layout:'form',
columnWidth:.5,
defaultType:'textfield',
items:[
{
fieldLabel:'First Name',
name:'firstName',
anchor:'90%'
},{
fieldLabel:'Company',
name:'company',
anchor:'90%'
}
]
},{
layout:'form',
columnWidth:.5,
defaultType:'textfield',
items:[
{
fieldLabel:'Last Name',
name:'lastName',
anchor:'90%'
},{
fieldLabel:'email',
name:'email',
anchor:'90%'
}   
]
}   
]
},{
xtype:'tabpanel',
activeTab:0,
defaults:{autoHeight:true,bodyStyle:'padding:10px'},
items:[
{
layout:'form',
title:'Personal Detail',
defaults:{width:430},
defaultType:'textfield',
labelAlign:'top',
items:[
{
fieldLabel:'First Name',
name:'firstName'
},
{
fieldLabel:'Last Name',
name:'lastName'
},
{
fieldLabel:'Company',
name:'company'
},
{
fieldLabel:'Email',
name:'email',
vtype:'email'
}
]
},{
layout:'form',
title:'Phone Number',
defaults:{width:430},
defaultType:'textfield',
items:[
{
fieldLabel:'Home',
name:'home'
},{
fieldLabel:'Business',
name:'business',
},{
fieldLabel:'Mobile',
name:'mobile'
},{
fieldLabel:'Fax',
name:'fax'
}   
]
},{
layout:'fit',
title:'biography',
labelAlign:'top',
defaultType:'textfield',
width:590,
items:[
new Ext.form.HtmlEditor({
})  
]
}   
]
}
]
});
tab2.render(document.body);
});



</script>
</head>

<body>
<div>用于显示基本的form表单实例,该实例在extjs官方文档中有,只是作为例子实践</div>
</body>
</html>

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： I_T_馆 > 《ExtJS》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多