fieldset多列展示 示例
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后就可以正常渲染了.