`
houyongbo03
  • 浏览: 31977 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

Extjs NumberField后面加单位,UnitText

 
阅读更多
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 : ' 元'
   });
分享到:
评论
4 楼 menghuannvxia 2018-06-21  
我用了不管用啊,单位没出来
3 楼 bovxiu2 2012-08-22  
浏览器下都不行啊  请教 我QQ 632249106
2 楼 bovxiu2 2012-08-22  
我在谷歌下 怎么不能用啊
1 楼 wangemperor 2011-11-01  
ie下不好用

相关推荐

    Extjs NumberField后面加单位实现思路

    UnitText.js ======================= 代码如下: // 输入框textfield后面放字unitText定义: Ext.override(Ext.form.TextField, { unitText : ”, onRender : function(ct, position) { Ext.form.TextField....

    ExtJs 文本框后附件单位

    在使用ExtJS进行界面开发的过程中,常常会遇到需要在文本框后面附加单位的情况。例如,在输入数量时需要显示“个”、“人”等单位。这样的设计不仅提高了用户体验,还使得数据的含义更加清晰明确。然而,默认情况下...

    包含各种类型的extjs小图标,Extjs4小图标

    - 图标通常分为不同的类别,如操作图标(比如加、减、编辑、保存等)、状态图标(如成功、警告、错误等)、导航图标(如箭头、返回、前进等)和通用图标(如文件、打印机、帮助等)。这些图标在ExtJS 4中被设计为可...

    extjs中的xtype的所有类型介绍

    11. numberfield - xtype: 'numberfield', 描述: 数字编辑器 12. radio - xtype: 'radio', 描述: 单选按钮 13. textarea - xtype: 'textarea', 描述: 多行文本框 14. textfield - xtype: 'textfield', 描述: 表单...

    extjs 必填项目加*

    extjs 必填项目加*

    extjs加水印

    "extjs加水印"这一主题涉及到如何在EXTJS框架构建的系统中添加水印功能,以增强数据的安全性,防止敏感信息非法传播。EXTJS是一个强大的JavaScript库,用于构建富客户端的Web应用程序,而水印则是一种有效的方法,...

    ExtJS4ExtJS5MD5 加密

    适用于ExtJS4、ExtJS5 MD5加密算法!

    extjs 2.0 教程加源码

    extjs 2.0 教程加源码 extjs 2.0 教程加源码

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    Extjs密码加密文件包

    该js包粘贴到工程Extjs包下,在jsp中引用该文件路径即可。

    ExtJs 日期控件加时间

    NULL 博文链接:https://azzg2008.iteye.com/blog/446367

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...

    Extjs 2.2 Extjs 3.21 js

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...

    ExtJS 7.6 SDK trial

    ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...

    Extjs4.1 小例子(适合extjs初学者学习使用)

    ExtJS 是一个强大的JavaScript前端框架,用于构建富客户端应用程序。版本4.1是该框架的一个重要里程碑,提供了许多新功能和改进。对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs...

    ExtJS经典皮肤集合

    ExtJS是一款功能强大的JavaScript前端框架,它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...

Global site tag (gtag.js) - Google Analytics