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实现输入框获取焦点消失文字
Apr 27 Javascript
纯JS实现动态时间显示代码
Feb 08 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
RequireJs的使用详解
Feb 19 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
layui表格数据重载
Jul 27 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删除目录及目录下所有文件的方法详解
2013/06/06 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP类的反射用法实例
2014/11/03 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
laravel model 两表联查示例
2019/10/24 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
python绘制简单折线图代码示例
2017/12/19 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python之修改图片像素值的方法
2019/07/03 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
个人廉洁自律承诺书
2014/03/27 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL