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