Extjs NumberField后面加單位實(shí)現(xiàn)思路

更新時(shí)間：2013年07月30日 15:59:34 作者：

本文為大家介紹下在NumberField后面加單位，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下

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放入到j(luò)sp文件中，加上css樣式，如下：

復(fù)制代碼代碼如下:

 
<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> 

這樣就可以用了，使用方法如下：

復(fù)制代碼代碼如下:

 
var jine = new Ext.form.NumberField({ 
id: 'je', 
fieldLabel: '金額', 
allowDecimals: true, // 允許小數(shù)點(diǎn)？ 
allowNegative: false, // 允許負(fù)數(shù)？ 
width: 100, 
style: 'text-align:right', 
unitText: ' 元' 
}); 

您可能感興趣的文章:

相關(guān)文章

ExtJS中設(shè)置下拉列表框不可編輯的方法
這篇文章主要介紹了ExtJS中設(shè)置下拉列表框不可編輯的方法,需要的朋友可以參考下
2014-05-05
學(xué)習(xí)ExtJS form布局
ExtJS form布局使用說明，需要的朋友可以參考下。
2009-10-10
Ext中下拉列表ComboBox組件store數(shù)據(jù)格式用法介紹
本文為大家詳細(xì)介紹下Ext中下拉列表ComboBox組件store數(shù)據(jù)格式的基本用法，感興趣的朋友可以參考下哈，希望對大家有所幫助
2013-07-07
ExtJs擴(kuò)展之GroupPropertyGrid代碼
這幾天做一個(gè)Web項(xiàng)目，使用了ExtJs，其中有個(gè)像設(shè)計(jì)器一樣的界面，選擇界面上的內(nèi)容，可以直接編輯內(nèi)容的屬性，這個(gè)原本來說對于使用ExtJs還是很簡單的。
2010-03-03
ExtJS4利根據(jù)登錄后不同的角色分配不同的樹形菜單
這篇文章主要介紹了ExtJS4利根據(jù)登錄后不同的角色分配不同的樹形菜單,需要的朋友可以參考下
2014-05-05
extjs 如何給column 加上提示
本節(jié)主要介紹了extjs 如何給column 加上提示,需要的朋友可以參考下
2014-07-07
基于ExtJs在頁面上window再調(diào)用Window的事件處理方法
下面小編就為大家?guī)硪黄贓xtJs在頁面上window再調(diào)用Window的事件處理方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
ExtJs默認(rèn)的字體大小改變的幾種方法(自己整理)
本文列出網(wǎng)上收集的幾種方法，希望對大家有用，并且做了下瀏覽器兼容，感興趣的朋友可以參考下哈
2013-04-04
ExtJS擴(kuò)展垂直tabLayout實(shí)現(xiàn)代碼
最近在做一個(gè)項(xiàng)目時(shí)，項(xiàng)目中使用了ExtJS，有些內(nèi)容要分頁簽顯示，而出于項(xiàng)目要求，頁簽只能垂直分布
2009-06-06
Extjs grid添加一個(gè)圖片狀態(tài)或者按鈕的方法
extjs的grid中我們經(jīng)常需要添加一個(gè)圖片狀態(tài)或者按鈕，下面將自己用過的一些方法與大家分享下
2014-04-04