Ext表单组件之checkbox
这个组件都比较简单，要配置的参数很少
radio和checkbox设置基本一样，就几个属性(checked,handler,boxLabel,inputValue),俩个的配置一样的可以比较着进行学习，checkboxgroup和radiogroup设置也是完全一样的，他们的属性主要包括:columns和vertical
运行代码就知道有多么容易了
checkbox.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>register.html</title>
<style type="text/css">
body{background-color:#777777}
#form-cb{width: 700px;margin-left: auto;margin-right: auto;}
</style>
<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
<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="checkbox.js"></script>
</head>
<body>
<div id="form-cb"></div>
</body>
</html>
checkbox.js
Ext.onReady(function() {
var form = new Ext.FormPanel({
title : 'checkbox应用',
width : 600,
autoHeight : true,
renderTo : 'form-cb',
bodyStyle : "padding:2px",
border : false,
frame : true,
items : [{
autoHeight : true,
xtype : 'fieldset',
collapsible :true,
collapsed :true,
layout : 'form',
title:'复选框',
items:[{
xtype : 'checkbox',
fieldLabel : '复选框',
inputValue : '1',//选中值
checked :true,//是否被选中
handler :function(){Ext.Msg.alert('提示','你被选中了')},
name : 'b1',
boxLabel : 'box1'
},{
xtype : 'checkboxgroup',
fieldLabel : '复选组autolayout',
items :[{
inputValue : 'song',
boxLabel : '唱歌',
name : 'gb'
},{
inputValue : 'dance',
boxLabel : '跳舞',
checked :true,//是否被选中
name : 'gb'
},{
inputValue : 'swing',
boxLabel : '游泳',
name : 'gb'
}]
},{
xtype : 'checkboxgroup',
fieldLabel : '复选组单列layout',
columns: 1,//设置显示的列数
items :[{
inputValue : 'song',
boxLabel : '唱歌',
name : 'gb1'
},{
inputValue : 'dance',
boxLabel : '跳舞',
name : 'gb1'
},{
inputValue : 'swing',
checked :true,//是否被选中
boxLabel : '游泳',
name : 'gb1'
}]
},{
xtype : 'checkboxgroup',
fieldLabel : '复选组多列layout',
columns: 2,//设置显示的列数
items :[{
inputValue : 'song',
boxLabel : '唱歌',
name : 'gb2'
},{
inputValue : 'dance',
checked :true,//是否被选中
boxLabel : '跳舞',
name : 'gb2'
},{
inputValue : 'swing',
checked :true,//是否被选中
boxLabel : '游泳',
name : 'gb2'
},{
inputValue : 'play',
boxLabel : '打球',
name : 'gb2'
},{
inputValue : 'film',
checked :true,//是否被选中
boxLabel : '看电影',
name : 'gb2'
}]
},{
xtype : 'checkboxgroup',
fieldLabel : '复选组多列layout(vertical=true)',
columns: 2,//设置显示的列数
vertical :true,//表示组件分布方向是否为垂直方向，默认为false即水平方向
items :[{
inputValue : 'song',
boxLabel : '唱歌',
name : 'gb3'
},{
inputValue : 'dance',
checked :true,//是否被选中
boxLabel : '跳舞',
name : 'gb3'
},{
inputValue : 'swing',
checked :true,//是否被选中
boxLabel : '游泳',
name : 'gb3'
},{
inputValue : 'play',
boxLabel : '打球',
name : 'gb3'
},{
inputValue : 'film',
checked :true,//是否被选中
boxLabel : '看电影',
name : 'gb3'
}]
}]
},{
autoHeight : true,
xtype : 'fieldset',
collapsible :true,
collapsed :false,
title:'单选框',
layout : 'form',
items:[{
xtype : 'radio',
fieldLabel : '单选框',
inputValue : '1',//选中值
checked :true,//是否被选中
handler :function(){Ext.Msg.alert('提示','你被选中了')},
name : 'b1',
boxLabel : 'box1'
},{
xtype : 'radiogroup',
fieldLabel : '单选组autolayout',
items :[{
inputValue : 'song',
boxLabel : '唱歌',
name : 'rb'
},{
inputValue : 'dance',
boxLabel : '跳舞',
checked :true,//是否被选中
name : 'rb'
},{
inputValue : 'swing',
boxLabel : '游泳',
name : 'rb'
}]
},{
xtype : 'radiogroup',
fieldLabel : '单选组单列layout',
columns: 1,//设置显示的列数
items :[{
inputValue : 'song',
boxLabel : '唱歌',
name : 'rb1'
},{
inputValue : 'dance',
boxLabel : '跳舞',
name : 'rb1'
},{
inputValue : 'swing',
checked :true,//是否被选中
boxLabel : '游泳',
name : 'rb1'
}]
},{
xtype : 'radiogroup',
fieldLabel : '单选组多列layout',
columns: 2,//设置显示的列数
items :[{
inputValue : 'song',
boxLabel : '唱歌',
name : 'rb2'
},{
inputValue : 'dance',
checked :true,//是否被选中
boxLabel : '跳舞',
name : 'rb2'
},{
inputValue : 'swing',
checked :true,//是否被选中
boxLabel : '游泳',
name : 'rb2'
},{
inputValue : 'play',
boxLabel : '打球',
name : 'rb2'
},{
inputValue : 'film',
checked :true,//是否被选中
boxLabel : '看电影',
name : 'rb2'
}]
},{
xtype : 'radiogroup',
fieldLabel : '单选组多列layout(vertical=true)',
columns: 2,//设置显示的列数
vertical :true,//表示组件分布方向是否为垂直方向，默认为false即水平方向
items :[{
inputValue : 'song',
boxLabel : '唱歌',
name : 'rb3'
},{
inputValue : 'dance',
checked :true,//是否被选中
boxLabel : '跳舞',
name : 'rb3'
},{
inputValue : 'swing',
checked :true,//是否被选中
boxLabel : '游泳',
name : 'rb3'
},{
inputValue : 'play',
boxLabel : '打球',
name : 'rb3'
},{
inputValue : 'film',
checked :true,//是否被选中
boxLabel : '看电影',
name : 'rb3'
}]
}]
}],
buttons : [{
text : '提交',
scope : this,
handler : function() {
alert(Ext.encode(form.form.getValues()));
}
}, {
text : '重置'
}]
})
})
源代码在下面，IE7.0和FF都没问题