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-ui中自动完成实现方法
Jun 10 Javascript
JSON 数据格式介绍
Jan 13 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
jquery实现轮播图效果
Feb 13 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
js实现三角形粒子运动
Sep 22 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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提示undefined index的几种解决方法
2012/05/21 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
vue实现虚拟列表功能的代码
2020/07/28 Javascript
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
python中count函数简单用法
2020/01/05 Python
文秘专业大学生求职信
2013/11/10 职场文书
欢迎领导标语
2014/06/27 职场文书
应届大学生求职信
2014/07/20 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
单位更名证明
2015/06/18 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
MySQL库表名大小写的选择
2021/06/05 MySQL
灵能百分百第三季什么时候来?
2022/03/15 日漫
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL