Extjs NumberField后面加单位实现思路


Posted in Javascript onJuly 30, 2013

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="UnitText.js"></script>

这样就可以用了,使用方法如下:
var jine = new Ext.form.NumberField({ 
id: 'je', 
fieldLabel: '金额', 
allowDecimals: true, // 允许小数点? 
allowNegative: false, // 允许负数? 
width: 100, 
style: 'text-align:right', 
unitText: ' 元' 
});
Javascript 相关文章推荐
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
javascript异常处理实现原理详解
Feb 17 Javascript
Js中获取frames中的元素示例代码
Jul 30 #Javascript
js中的屏蔽的使用示例
Jul 30 #Javascript
使用js正则控制input标签只允许输入的值
Jul 29 #Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 #Javascript
js保留两位小数使用toFixed实现
Jul 29 #Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 #Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 #Javascript
You might like
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
javascript 快速排序函数代码
2012/05/30 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
[02:51]DOTA2 Supermajor小组分组对阵抽签仪式
2018/06/01 DOTA
Python矩阵常见运算操作实例总结
2017/09/29 Python
简单谈谈python基本数据类型
2018/09/26 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
航空大学应届生求职信
2013/11/10 职场文书
社区学习十八大感想
2014/01/22 职场文书
爱心捐款活动总结
2015/05/09 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
2019军训心得体会
2019/06/27 职场文书
java泛型通配符详解
2021/07/25 Java/Android
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang