一个小例子
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>secospace</title>
<link rel="stylesheet" type="text/css" media="all" href="./ext/resources/css/ext-all.css" />
</head>
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all.js"></script>
<body>
<div id="form-ct"></div>
</body>
</html>
<script language="javascript">
<!-- Ext fieldset的用例 -->
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
var fp = new Ext.FormPanel({
frame: true,
title:'Check/Radio Groups',
labelWidth: 110,
autoWidth: true,
renderTo:'form-ct',
bodyStyle: 'padding:0 10px 0;',
items: [{
xtype:'fieldset',
title: '匿名认证',
autoHeight: true,
items: [{
xtype: 'radiogroup',
fieldLabel: '匿名认证设置',
columns: [100,100],
vertical: true,
items: [
{boxLabel: '启用', name: 'rb-custwidth', inputValue: 1},
{boxLabel: '禁用', name: 'rb-custwidth', inputValue: 2, checked: true}
]
},{
xtype: 'checkboxgroup',
fieldLabel: '认证类型',
// Specify exact column widths (could also include float values for %)
columns: [100, 100,100],
vertical: true,
items: [
{boxLabel: 'Web', name: 'cb-custwidth', inputValue: 1},
{boxLabel: 'Agent', name: 'cb-custwidth', inputValue: 3,checked: true},
{boxLabel: 'Activex', name: 'cb-custwidth', inputValue: 5}
]
}]
}],
buttons: [{
text: 'Save',
handler: function(){
if(fp.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
fp.getForm().getValues(true).replace(/&/g,', '));
}
}
},{
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});
});
</script>
