日期:2014-05-16 浏览次数:20782 次
<html>
<head>
<title>04.form</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
labelAlign: 'right',
title: 'form',
labelWidth: 50,
frame:true,
url: 'form2.jsp',
width: 280,
items: [
{//单选按钮组
xtype: 'fieldset',
title: '单选',
autoHeight:true,
defaultType: 'radio',
hideLabels: true,
items: [
{ boxLabel: '单选一', name: 'R1', inputValue: '1', checked: true},
{ boxLabel: '单选二', name: 'R1', inputValue: '2' },
{ boxLabel: '单选三', name: 'R1', inputValue: '3' }
]
},
{//多选按钮组
xtype: 'fieldset',
title: '多选',
autoHeight: true,
//defaultType: 'checkbox', 可以设置默认,也可以分别设置xtype属性
hideLabels: true,
items: [
{ boxLabel: '多选一', name: 'C1', id: 'cbox1', inputValue: '1', xtype: 'checkbox', checked: true },
{ boxLabel: '多选二', name: 'C1', id: 'cbox2', inputValue: '2', xtype: 'checkbox' },
{ boxLabel: '多选三', name: 'C1', id: 'cbox3', inputValue: '3', xtype: 'checkbox' }
]
}],
buttons: [{
text: '多选getGroupValue',
handler: function() {
//Ext.form.Checkbox 的取值比较麻烦,下面是取值的方法之一
Ext.Msg.alert('信息', "多选按钮第一项的选择状态为: " + Ext.get("cbox1").dom.checked);
}
}, {
text: '单选getGroupValue',
handler: function() {
Ext.Msg.alert('信息', form.getForm().findField('R1').getGroupValue());
}
}]
});
form.render("form");
});
</script>
</head>
<body>
<div id="form" style="margin:100px;"></div>
</body></html>