Extjs NumberField后面加单位实现思路
更新时间：2013年07月30日 15:59:34 作者：
本文为大家介绍下在NumberField后面加单位，具体实现如下，感兴趣的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
UnitText.js
=======================
// 输入框textfield后面放字unitText定义:
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]); }});
将UnitText.js放入到jsp文件中，加上css样式，如下：
<style>
.x-form-unit{
height:22px;
line-height:22px;
padding-left:2px;
display:inline-block;
display:inline; </style>
<script type="text/javascript"src="http://9i0i.com/pic.php?p=UnitText.js"></script>
这样就可以用了，使用方法如下：
var jine = new Ext.form.NumberField({
id: 'je',
fieldLabel: '金额',
allowDecimals: true, // 允许小数点？
allowNegative: false, // 允许负数？
width: 100,
style: 'text-align:right',
unitText: ' 元'
});
=======================
复制代码 代码如下:
// 输入框textfield后面放字unitText定义:
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]); }});
将UnitText.js放入到jsp文件中，加上css样式，如下：
复制代码 代码如下:
<style>
.x-form-unit{
height:22px;
line-height:22px;
padding-left:2px;
display:inline-block;
display:inline; </style>
<script type="text/javascript"src="http://9i0i.com/pic.php?p=UnitText.js"></script>
这样就可以用了，使用方法如下：
复制代码 代码如下:
var jine = new Ext.form.NumberField({
id: 'je',
fieldLabel: '金额',
allowDecimals: true, // 允许小数点？
allowNegative: false, // 允许负数？
width: 100,
style: 'text-align:right',
unitText: ' 元'
});
您可能感兴趣的文章:
- javascript FormatNumber函数实现方法
- javascript parseInt与Number函数的区别
- Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
- JS中不为人知的五种声明Number的方式简要概述
- js类型转换与引用类型详解(Boolean_Number_String)
- js中将String转换为number以便比较
- JavaScript中的object转换成number或string规则介绍
- JavaScript中string转换成number介绍
- JavaScript中number转换成string介绍
- Javascript之Number对象介绍
相关文章
这篇文章主要介绍了extJS中常用的4种Ajax异步提交方式,需要的朋友可以参考下2014-03-03
Exitjs DataView中图片文件名获取实现代码。2009-11-11
这篇文章主要介绍了extjs 时间范围选择自动判断的实现代码,需要的朋友可以参考下2014-06-06
这篇文章主要为大家介绍了Extjs实现下拉树的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-04
extjs grid设置某列背景颜色和字体颜色的实现步骤，需要的朋友可以参考下。2010-09-09
记录一下ExtJS的一些简单使用的方法.备忘2010-10-10
Ext对基本类型的扩展 ext,extjs,format，学习extjs的朋友可以参考下。2010-12-12
Extjs的FileUploadField文件上传出现了两个上传按钮
Extjs的FileUploadField文件上传在页面中出现了两个上传按钮，这个是和ext的本身css的样式有关系，所以要将样式修改下2014-04-04
最近开始自学ExtJs，下载了些视频和上网搜了些相关文章和文档准备好好学学，今晚第一次接触ExtJs的事件机制，刚开始感觉有点晕，和以前所接触的VB或是纯的JAVASCRIPT的实现方式有些区别。根据一个例子，来分析和总结一下这个流程吧。2010-10-10
面版表示页面上的一块相对独立的区域，利用传统的html+css要构建灵活统一的区域并非易事。2010-01-01
最新评论