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实现的链表数据结构实例
Apr 02 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
详解原生js实现offset方法
Jun 15 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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的配置文件php.ini
2006/10/09 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
php面向对象重点知识分享
2019/09/27 PHP
读jQuery之五(取DOM元素)
2011/06/20 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
python-str,list,set间的转换实例
2018/06/27 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
美国最大点评网站:Yelp
2018/02/14 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
销售行政专员职责
2014/01/03 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
户外活动总结范文
2014/04/30 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
公司董事任命书
2015/09/21 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
四年级作文之植物
2019/09/20 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
PYTHON InceptionV3模型的复现详解
2022/05/06 Python