继上一节内容，我们在表单里加了个一个单选组，一个复选组:
1.代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!--ExtJs框架开始-->
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<!--
<script type="text/javascript" src="study/helloWorld.js"></script>
<script type="text/javascript" src='study/window.js'></script>
<script type="text/javascript" src='study/formPanel.js'></script>
<script type="text/javascript" src='study/textField.js'></script>
<script type="text/javascript" src='study/button.js'></script>
<script type="text/javascript" src='study/login.js'></script>
-->
<!--调用/study/radioGroup_checkBoxGroup.js 实现登陆页面内的日期/数字/单选按钮/复选框的调用 -->
<script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js-->
<script type="text/javascript" src='study/radioGroup_checkBoxGroup.js'></script>
<style type="text/css">
.loginicon
{
background-image: url(study/login.gif) !important;
}
</style>
<style type='text/css'>
.x-form-unit
{
height:22px;
line-height:22px;
padding-left:2px;
display:inline-block;
display:inline;
}
</style>
</head>
<body>
<br>
</body>
</html>
2. radioGroup_checkBoxGroup.js 代码如下：
//----------------------这部分是针对身高后面的厘米cm单位 对formField进行重写----------------------//
Ext.override(Ext.form.TextField, {
unitText: '',
onRender: function (ct, position) {
Ext.form.TextField.superclass.onRender.call(this, ct, position);
// 如果单位字符串已定义 则在后方增加单位对象
if (this.unitText != '') {
this.unitEl = ct.createChild({
tag: 'div',
html: this.unitText
});
this.unitEl.addClass('x-form-unit');
// 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况
this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2);
// 同时修改错误提示图标的位置
this.alignErrorIcon = function () {
this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]);
};
}
}
});
//**注意，这个属性并非 Extjs文本框自带的属性，因为我们要在“身高”的后面加上
//**单位，所以在23行---43行对文本框进行了重写，重写时添加了属性"unitText"，并且在样式表中加了样式"x-form-unit"。
//----------------------------重写结束---------------不太懂，没重写过----------------------------//
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
new Ext.Window({
width:447,
height:263,
iconCls:'loginicon',
items:[new Ext.form.FormPanel({
frame:true,
style:'margin:15px',
bodyStyle:'padding:9px 0px 0px 5px',
labelWidth:55, //调整Label文字与input输入框的距离
items:[
//---------------文本字段_Name_开始------------------//
new Ext.form.TextField({
fieldLabel:'Name',
allowBlank:false,
blankText:'The name field is required..'
}),
//---------------文本字段_Name_结束------------------//
//---------------文本字段_Password_开始--------------//
new Ext.form.TextField({
fieldLabel:'Pass',
allowBlank:false,
blankText:'The pass field is required..'
}),
//---------------文本字段_Password_结束--------------//
//---------------数字字段_Stature_开始--------------//
new Ext.form.NumberField({
fieldLabel:'Stature',
unitText: ' cm',
width:64
}),
//---------------数字字段_Stature_结束--------------//
//---------------日期字段_Date_开始------------------//
new Ext.form.DateField({
fieldLabel:'Date',
format:'Y-m-d',
editable:false,
allowBlank:false,
blankText:'This date field is required..'
}),
//---------------日期字段_Date_结束------------------//
//---------------按钮组字段_sex_开始-----------------//
new Ext.form.RadioGroup({ //创建一个新的单选按钮组。
fieldLabel:'Radio',
width:130,
items:[
new Ext.form.Radio({
name:'sex', //单选按钮组是按照 name 属性来区分的
boxLabel:'man', //同一组中的单选按钮才能单选， 如果name属性设置错误，该按钮将会被认为是其他组。
inputValue:'0' //选择框的值
}),
{
name:'sex',
boxLabel:'woman',
inputValue:'1',
checked:true
}
]
}),
//---------------按钮组字段_sex_结束------------------//
//---------------复选框字段_CheckBox_开始-------------//
new Ext.form.CheckboxGroup({
fieldLabel:'CheckBox',
width:200,
items:[
new Ext.form.Checkbox({
name:'check',
boxLabel:'Yo-yo',
inputValue:'0'
}),
new Ext.form.Checkbox({
name:'check',
boxLabel:'Guitar',
inputValue:'1'
}),
new Ext.form.Checkbox({
name:'check',
boxLabel:'Piano',
inputValue:'2'
})
]
})
//---------------复选框字段_CheckBox_结束-------------//
]
})
]
}).show();
});
3. 效果如下：
相关推荐
16. checkboxgroup - xtype: 'checkboxgroup', 描述: 编组的多选框（Since 2.2） 17. displayfield - xtype: 'displayfield', 描述: 仅显示，不校验/不被提交的文本框 18. radiogroup - xtype: 'radiogroup', 描述: ...
CheckboxGroup允许用户在一个组合框内选择多个选项，与单选按钮组RadioGroup相反，它是多个复选框的集合。然而，与普通的Ext.form.Field组件不同，CheckboxGroup实际上是一个容器形式的组件，它继承自Ext.form.Field...
- `CheckboxGroup`：复选框组，允许用户从多个复选框中选择一项或多项。 - `ComboBox`：下拉列表框，提供一个可展开的选项列表供用户选择。 - `DateField`：时间框，让用户选择日期或时间。 - `HtmlEditor`：富...
- **复选框组 (`Ext.form.field.CheckboxGroup`)**：一组复选框。 - **单选按钮组 (`Ext.form.field.RadioGroup`)**：一组单选按钮。 - **下拉组合框 (`Ext.form.field.ComboBox`)**：结合列表和输入框的功能。 ...
在Extjs中，使用`checkboxgroup`组件： ```javascript { xtype: 'checkboxgroup', name: 'hobbies', fieldLabel: '兴趣爱好', items: [ { boxLabel: '阅读', name: 'hobbies', inputValue: 'reading' }, { ...
- `Ext.form.CheckboxGroup` 和 `Ext.form.RadioGroup`：用于组合复选框和单选框。 - `Ext.form.field.Trigger`：触发字段，常用于下拉搜索框。 - `Ext.form.field.Spinner`：用于数字的微调。 - `Ext.form....
- `checkboxgroup`: 多选框组，用于管理一组关联的多选框。 - `displayfield`: 只读字段，用于显示信息，不能编辑。 - `radiogroup`: 单选按钮组，用于管理一组关联的单选按钮。 6. **图表组件**（只列出部分）...
- 表单控件：FormPanel可以包含各种表单元素，如文本框`textfield`、密码框`passwordfield`、选择框`checkbox`、复选框组`checkboxgroup`、单选框`radiogroup`、下拉框`combobox`、日期选择器`datefield`等。...
- `checkboxgroup`：`Ext.form.CheckboxGroup`，自2.2版本起，用于组织多个多选框的组件。 - `displayfield`：`Ext.form.DisplayField`，只读显示，不参与验证和提交的文本字段。 - `radiogroup`：`Ext.form....
**Ext.form.CheckboxGroup** - **描述**: 编组的多选框，可以同时管理多个多选框。 - **用途**: 创建一组相关联的多选框，如兴趣爱好选择。 **Ext.form.DisplayField** - **描述**: 仅显示，不校验/不被提交的...
5.2.7 CheckboxGroup复选框组布局 5.2.8 Column列布局 5.2.9 Table表格布局 5.2.1 0Border边框布局 5.2.1 1Box盒布局 5.3 使用ViewPort 5.4 Ext.tab.Panel页签 5.5 本章小结 第6章 常用工具类与函数 6.1 ...