fieldset多列展示 樣本
效果：
HTML源碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<script type="text/javascript" src="js/jsloader.js"></script>
<script type="text/javascript" src="js/assets.js"></script>
<style>
</style>
<script>
Ext.onReady(function(){
var tabs = new Ext.Panel({
title:'fieldset多列展示',
labelWidth:70,
width:580,
border:false,
frame:true,
renderTo:document.body,
items:[
{
xtype:'fieldset',
title:'form資訊',
collapsible:true,
height:80,
layout:'column',
items:[
{
columnWidth:.5,layout:'form',id:'multFieldSet',
items:[
{xtype:'textfield',fieldLabel:'登入名稱',name:'loginName',size:20},
{xtype:'textfield',fieldLabel:'使用者名稱',name:'userName',size:20}
]
},
{
columnWidth:.5,layout:'form',
items:[
{xtype:'textfield',fieldLabel:'密碼',name:'password',size:20},
{xtype:'textfield',fieldLabel:'確認密碼',name:'conformPassword',size:20}
]
}
]
}
]
});
});
</script>
</head>
<body>
</body>
</html>
備忘:
在使用fieldSet實現多列展示時最好給它加上個id (如:,id:'multFieldSet'),本人在項目開發過程中發現,在一個面板中使用多個fieldSet實現多個不同的多列展示(一個兩列展示/一個三列展示等)時,出現不能正常渲染的問題(如果都是兩列或三列,則可以正常渲染),加上id後就可以正常渲染了.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
