快捷導(dǎo)航

Extjs中DisplayField的日期或者數(shù)字格式化擴(kuò)展

更新時(shí)間：2010年09月03日 22:17:52 作者：

在用Extjs的時(shí)候，有時(shí)需要對(duì) Ext.form.DisplyField 進(jìn)行格式化。

使用 Ext.form.FormPanel 來(lái)處理數(shù)據(jù)時(shí)候，某些字段是需要只讀的。當(dāng)然我們可以使用 Ext.form.TextField，然后設(shè)置成 ReadOnly，不過(guò)這樣子的顯示效果不是很好，因?yàn)槭冀K會(huì)有個(gè)輸入框。所以我們必須使用 Ext.form.DisplayField，但是 Ext.form.DisplayField 沒(méi)有一個(gè)format的屬性，也不具備 renderer 這個(gè)事件，比如日期字段

var form = new Ext.form.FormPanel({
frame: true,
renderTo: 'form-div',
items: [{

xtype: 'displayfield',

fieldLabel: 'Date',

value: new Date()

}]
});

那它顯示的就有點(diǎn)不正確了

那么我們可以重寫一下 Ext.form.DisplayField，讓他支持 format 屬性

Ext.override(Ext.form.DisplayField, {
  getValue: function () {
    return this.value;
  },
  setValue: function (v) {
    this.value = v;
    this.setRawValue(this.formatValue(v));
    return this;
  },
  formatValue: function (v) {
    if (this.dateFormat && Ext.isDate(v)) {
      return v.dateFormat(this.dateFormat);
    }
    if (this.numberFormat && typeof v == 'number') {
      return Ext.util.Format.number(v, this.numberFormat);
    }
    return v;
  }
});

我們給 Ext.form.DisplayField 加了兩個(gè)屬性： dateFormat 和 numberFormat，然后我們將上面的 FormPanel 改一下

var form = new Ext.form.FormPanel({

　　　　frame: true,

　　　　renderTo: 'form-div',

　　　　items: [{

　　　　　　xtype: 'displayfield',

　　　　　　fieldLabel: 'Date',

　　　　　　value: new Date(),

　　　　　　dateFormat: 'm/d Y'

　　　　}]

});

應(yīng)該還是比較 perfect 的，哈哈哈

您可能感興趣的文章:

相關(guān)文章

Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁(yè)面的代碼分享
鍵盤上的F5或者退格鍵等按鍵一般來(lái)說(shuō)會(huì)觸發(fā)頁(yè)面的后退或者刷新事件,然而這些在前端用代碼是可以給屏蔽掉的,這里我們就來(lái)看一下Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁(yè)面的代碼分享
2016-06-06
ExtJs縱坐標(biāo)值重復(fù)問(wèn)題的解決方法
做圖表的時(shí)候縱坐標(biāo)很多值都是一樣的，無(wú)意中發(fā)現(xiàn)下面的解決方法，其他版本沒(méi)測(cè)試過(guò)。有興趣的朋友可以自己測(cè)試
2014-02-02
學(xué)習(xí)ExtJS table布局
ExtJS table布局使用說(shuō)明，需要的朋友可以參考下。
2009-10-10
ExtJS判斷IE瀏覽器類型的方法
這篇文章主要介紹了ExtJS判斷IE瀏覽器類型的方法,需要的朋友可以參考下
2014-02-02
Ext GridPanel加載完數(shù)據(jù)后進(jìn)行操作示例代碼
Ext GridPanel加載完數(shù)據(jù)后進(jìn)行操作，比如load數(shù)據(jù)之后選定某些行數(shù)據(jù),下面有個(gè)示例，需要的朋友可以參考下
2014-06-06
Extjs中TabPane如何嵌套在其他網(wǎng)頁(yè)中實(shí)現(xiàn)思路及代碼
Extjs中TabPane在一些特殊用途時(shí)把其嵌在其他的網(wǎng)頁(yè)中，很多新手朋友可能對(duì)此不是很熟悉，小編就在本文章中詳細(xì)的介紹一下，感興趣的你可不要錯(cuò)過(guò)了啊，希望本文對(duì)你有所幫助
2013-01-01
Ext 表單布局實(shí)例代碼
ext下布局的實(shí)現(xiàn)代碼。
2009-04-04
extJs 常用到的增，刪，改，查操作代碼
剛剛參加完公司的項(xiàng)目，第一次使用extjs編寫用戶界面還是有點(diǎn)頭痛，現(xiàn)在小花整理好了，希望為初學(xué)者做個(gè)參考。
2009-12-12
ExtJS的拖拽效果示例
拖拽效果想必大家都有見(jiàn)到過(guò)吧，實(shí)現(xiàn)方式大同小異，在接下來(lái)的文章中為大家詳細(xì)介紹下使用ExtJS是如何做到的
2013-12-12
Extjs gridpanel 出現(xiàn)橫向滾動(dòng)條問(wèn)題的解決方法
Extjs gridpanel 出現(xiàn)橫向滾動(dòng)條問(wèn)題的解決方法，在gridpanel中加入以下代碼即可。
2011-07-07