无废话ExtJs 教程九[单选组:RadioGroup、复选组:CheckBoxGroup]

继上一节内容,我们在表单里加了个一个单选组,一个复选组:

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. 效果如下:


无废话ExtJs 教程九[单选组:RadioGroup、复选组:CheckBoxGroup]_第1张图片
 

你可能感兴趣的:(checkbox)