ExtJs--FormPanel的checkboxToggle属性效果

lixue150

浏览: 78421 次
性别:
来自: 合肥

最近访客更多访客>>

sxl1001

我...

根号九加一

dreamhappens

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJs学习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FormPanel fieldset应用</title>
<link href="ext/resources/css/ext-all.css" type="text/css"
	rel="stylesheet" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {
		new Ext.FormPanel({
			renderTo : Ext.getBody(),
			bodyStyle : 'padding:5px 5px 0',
			title : 'FormPanel fieldset',
			frame : true,
			width : 330,
			items : [ {
				xtype : 'fieldset',
				title : '个人信息',
				collapsible : true,
				autoHeight : true,
				width : 300,
				defaults : {
					width : 150
				},
				defaultType : 'textfield',//容器的默认类型
				items : [ {
					fieldLabel : '爱好',
					name : 'hobby',
					value : 'www.cnblogs.com'//字段初始化的值（默认为undefined）
				}, {
					xtype : 'combo',
					name : 'sex',
					store : [ "男", "女", "保密" ],//该组合框绑定的数据仓库（默认为undefined）
					fieldLabel : '性别',
					emptyText : '请选择性别。'//空字段中显示的文本（默认为null）
				} ]
			}, {
				xtype : "fieldset",
				checkboxToggle : true,//关键参数，其他和以前的一样,使得选择复选框后，内容显示出来，否则不显示,默认为false，不显示复选框
				title : "选填信息",
				defaultType : 'textfield',
				width : 300,
				autoHeight : true,//使自适应展开排版
				items : [ {
					fieldLabel : "UserName",
					name : "user",
				}, {
					fieldLabel : "PassWord",
					inputType : "password",//密码文本
					name : "pass",
				} ]
			} ]
		});
	});
</script>
</head>
<body>

</body>
</html>

效果

未选择的效果