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 注意事项与常用语法小结
Jun 07 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
js数组Array sort方法使用深入分析
Feb 21 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
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的字符串用法小结
2010/06/08 PHP
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
javascript实现框架高度随内容改变的方法
2015/07/23 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
解决vue 绑定对象内点击事件失效问题
2018/09/05 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
python实现xml转json文件的示例代码
2020/12/30 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
环保倡议书500字
2014/05/15 职场文书
应届生求职信范文
2014/05/26 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
人事任命通知书
2015/04/21 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL