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樣式，如下：
<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, // 允許小數(shù)點(diǎn)？
allowNegative: false, // 允許負(fù)數(shù)？
width: 100,
style: 'text-align:right',
unitText: ' 元'
});
=======================
復(fù)制代碼 代碼如下:
// 輸入框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: ' 元'
});
您可能感興趣的文章:
- javascript FormatNumber函數(shù)實(shí)現(xiàn)方法
- javascript parseInt與Number函數(shù)的區(qū)別
- Javascript Boolean、Nnumber、String 強(qiáng)制類型轉(zhuǎn)換的區(qū)別詳細(xì)介紹
- JS中不為人知的五種聲明Number的方式簡要概述
- js類型轉(zhuǎn)換與引用類型詳解(Boolean_Number_String)
- js中將String轉(zhuǎn)換為number以便比較
- JavaScript中的object轉(zhuǎn)換成number或string規(guī)則介紹
- JavaScript中string轉(zhuǎn)換成number介紹
- JavaScript中number轉(zhuǎn)換成string介紹
- Javascript之Number對象介紹
相關(guān)文章
對gridPanel中的stroe數(shù)據(jù)進(jìn)行過濾，所以有時(shí)候總是導(dǎo)致gridPanel自身所帶的scrollbar失效，好了，現(xiàn)在來說說怎么解決scrollbar失效2014-09-09
extjs_02_grid顯示本地?cái)?shù)據(jù)、顯示跨域數(shù)據(jù)
這篇文章主要介紹了extjs_02_grid顯示本地?cái)?shù)據(jù)、顯示跨域數(shù)據(jù)的具體實(shí)現(xiàn),需要的朋友可以參考下2014-06-06
ExtJs使用總結(jié)(非常詳細(xì))，需要的朋友可以參考下2012-03-03
Extjs中的GridPanel隱藏列會顯示在menuDisabled中解決方法
在Extjs中的GridPanel會有這樣的情況，隱藏列會顯示在menuDisabled中,但是這個(gè)一般沒有什么用處，只是用于后臺取值的作用,感興趣的朋友可以了解下啊，希望本文對你有所幫助2013-01-01
ExtJS中的表格功能非常強(qiáng)大，包括了排序、緩存、拖動、隱藏某一列、自動顯示行號、列匯總、單元格編輯等實(shí)用功能。2010-05-05
ext下布局的實(shí)現(xiàn)代碼。2009-04-04
Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁面的代碼分享
鍵盤上的F5或者退格鍵等按鍵一般來說會觸發(fā)頁面的后退或者刷新事件,然而這些在前端用代碼是可以給屏蔽掉的,這里我們就來看一下Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁面的代碼分享2016-06-06
extjs 的權(quán)限問題 要求控制的對象是 菜單，按鈕，URL
這兩天在解決extjs 的權(quán)限問題。要求控制的對象是 菜單，按鈕，URL2010-03-03
Iframe 有的時(shí)候還是須要的，比如在Tab中嵌入報(bào)表、嵌入其它系統(tǒng)的界面。下面代碼是項(xiàng)目中一段。希望對用ExtJS開發(fā)的兄弟做個(gè)參考。2010-03-03
Extjs實(shí)現(xiàn)進(jìn)度條的兩種便捷方式
后臺程序往往可能要執(zhí)行一段時(shí)間才能得到返回結(jié)果，加入進(jìn)度條可以提高客戶體驗(yàn)度，在本文為大家介紹兩種便捷的實(shí)現(xiàn)方式，感興趣的朋友可以了解下2013-09-09