EXT-Ext.form.FieldSet _Web前端

EXT--Ext.form.FieldSet

Ext.form.FieldSet 扩展自Ext.container.Container组件，是一个标准的字段容器，默认布局为‘anchor’ ，也可以指定为其他布局。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>字段集</title> 
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script> 
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function(){ 
Ext.create('Ext.form.Panel', 
{ 
  title:'Ext.form.FieldSet示例', 
  labelWidth:40, 
  width:200, 
  frame:true, 
  renderTo:Ext.getBody(), 
  bodyPadding:5, 
  items:[{ 
   title:'产品信息', 
   xtype:'fieldset', 
   collapsible:true,//显示切换展开收缩状态的切换按钮   collapsible用来设置字段集是否可以折叠 
   bodyPadding:5, 
   defaults:{ 
    labelSeparator:':', 
    labelWidth:50, 
    width:160 
    }, 
    defaultType:'textfield', 
    items:[{ 
     fieldLabel:'产地' 
     }, 
     { 
      fieldLabel:'售价' 
      }] 
        }, 
     { 
      title:'产品描述', 
      xtype:'fieldset', 
      bodyPadding:5, 
      checkboxToggle:true,//显示切换展开收缩状态的复选框 
//（ checkboxToggle 设置是否显示字段集的checkbox选择框，可以实现隐藏或显示字段集的功能） 
      checkboxName:'description', //提交数据时复选框对应的name 
      labelSeparator:':', 
      items:[{ 
        fieldLabel:'简介', 
        labelSeparator:':', 
        labelWidth:50, 
        width:160, 
        xtype:'textarea' 
       }] 
     } 
     ] 
  } 
); 
}); 
</script> 
</head> 

<body> 
</body> 
</html>