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 each()源代码
Feb 14 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
使用Javascript简单计算器
Nov 17 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
vue实现多组关键词对应高亮显示功能
Jul 25 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 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
Protoss建筑一览
2020/03/14 星际争霸
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP 变量定义和变量替换的方法
2009/07/30 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
brook javascript框架介绍
2011/10/10 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
封装好的js判断操作系统与浏览器代码分享
2015/01/09 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
python求众数问题实例
2014/09/26 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python读写docx文件的方法
2018/05/08 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
使用Pyhton 分析酒店针孔摄像头
2020/03/04 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
中专生职业生涯规划书范文
2013/12/29 职场文书
教师个人自我评价范文
2014/04/13 职场文书
计算机专业求职信
2014/06/02 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL