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 相关文章推荐
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
Vue自定义指令拖拽功能示例
Feb 17 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 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
JAVA/JSP学习系列之二
2006/10/09 PHP
在php MYSQL中插入当前时间
2008/04/06 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
心理健康教育心得体会
2013/12/29 职场文书
啤酒节策划方案
2014/05/28 职场文书
应聘教师求职信
2014/07/19 职场文书
导师鉴定意见
2015/06/05 职场文书
大学生党课心得体会
2016/01/07 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android