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.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
VUEX-action可以修改state吗
Nov 19 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操作mysqli(示例代码)
2013/10/28 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
javascript iframe编程相关代码
2009/12/28 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
简单谈谈Python流程控制语句
2016/12/04 Python
Python 含参构造函数实例详解
2017/05/25 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
名片管理系统python版
2018/01/11 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Python短信轰炸的代码
2020/03/25 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
如何利用Python识别图片中的文字
2020/05/31 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
《维生素c的故事》教学反思
2014/02/18 职场文书
洗发水广告词
2014/03/13 职场文书
导游词欢迎词
2015/02/02 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
婚育证明样本
2015/06/16 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
Python数据分析入门之数据读取与存储
2021/05/13 Python
Python中第三方库Faker的使用详解
2022/04/02 Python