论坛首页 入门技术论坛

fieldset多列展示 示例

浏览 3015 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-02-23   最后修改:2009-03-10

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后就可以正常渲染了.

论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics