Extjs NumberField后面加单位，UnitText

最新推荐文章于 2022-02-06 14:35:38 发布

hyb_jackson

最新推荐文章于 2022-02-06 14:35:38 发布

阅读量293

点赞数

分类专栏： Extjs NumberField后面加单位，UnitText 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/hyb_jackson/article/details/83974998

版权

Extjs NumberField后面加单位，UnitText 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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 : ' 元'
   });