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 sudoku 数独智力游戏生成代码
Mar 27 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
node.js中的emitter.emit方法使用说明
2014/12/10 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
利用Python批量生成任意尺寸的图片
2016/08/29 Python
Python 中的with关键字使用详解
2016/09/11 Python
详解python的数字类型变量与其方法
2016/11/20 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python 读取数据库并绘图的实例
2019/12/03 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
StringBuilder和String的区别
2015/05/18 面试题
J2EE面试题
2016/03/14 面试题
奶茶专卖店创业计划书
2014/01/18 职场文书
村抢险救灾方案
2014/05/09 职场文书
校长创先争优承诺书
2014/08/30 职场文书
校园安全广播稿范文
2014/09/25 职场文书
被告代理词范文
2015/05/25 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
68句权威创业名言
2019/08/26 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
python 中yaml文件用法大全
2021/07/04 Python
Go语言安装并操作redis的go-redis库
2022/04/14 Golang