继上一节内容,我们在表单里加了个一个单选组,一个复选组:
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. 效果如下: