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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jquery if条件语句的写法
May 19 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
SVG实现时钟效果
Jul 17 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
js实现随机8位验证码
Jul 24 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对称加密算法示例
2014/05/07 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
原生JavaScript实现五子棋游戏
2020/11/09 Javascript
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
Python中functools模块函数解析
2017/03/12 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python 字符串只保留汉字的方法
2018/11/16 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
社团文化节邀请函
2014/01/10 职场文书
高中微机老师自我鉴定
2014/02/16 职场文书
给领导的检讨书
2014/02/16 职场文书
陈欧的广告词
2014/03/18 职场文书
幼儿发展评估方案
2014/06/11 职场文书
2015年试用期工作总结
2014/12/12 职场文书
实习证明模板
2015/06/16 职场文书
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技