fieldset多列展示示例

最新推荐文章于 2024-05-30 21:38:39 发布

crabdave

最新推荐文章于 2024-05-30 21:38:39 发布

阅读量640

点赞数

分类专栏： ExtJS 文章标签： EXT JavaScript HTML ViewUI

ExtJS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

fieldset多列展示示例

效果：

HTML源码：

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