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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Nov 24 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
PHP静态新闻列表自动生成代码
2007/06/14 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
js实现动态改变字体大小代码
2014/01/02 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
JS验证不重复验证码
2017/02/10 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
Webpack path与publicPath的区别详解
2018/05/03 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python判断Abundant Number的方法
2015/06/15 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python 类的特殊成员解析
2018/06/20 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
django认证系统 Authentication使用详解
2019/07/22 Python
Python的条件锁与事件共享详解
2019/09/12 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
《分一分》教学反思
2014/04/13 职场文书
六一亲子活动总结
2014/07/01 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
工程部岗位职责范本
2015/04/11 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
Python基础之条件语句详解
2021/06/16 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js