擴展Ext.form.DateField實現定義日期面板默認展示日期

用了這麼久的EXT,感覺Ext的功能是很全很強了,但任何東西都不能涵蓋所有的需求,好在Ext爲我們提供了書寫擴展的接口,通過做一些擴展便可輕鬆是Ext組件滿足我們的特殊需求。

Ext的date組件就不能滿足我們這麼一個需求:我們希望當日期框內容爲空時,我們點擊日期輸入框後面的圖標顯示日期選擇面板時,展示的默認日期不是當前日期的年月,而是我們自己設定的一個默認日期。

查看Ext.form.DateField的屬性列表沒有看到提供這麼一個參數可以讓我們設置默認展示日期。

因此這就需要我們自己去擴展下了。查看了Ext.form.DateField的onTriggerClick方法,發現面板的默認日期是在這裏設定的。
Ext設定的是this.getValue() || new Date(),也就是先取輸入框的值,如果不存在則使用當前日期。

ok,來擴展吧,我們自己再setValue一下就可以了。

 Ext.form.myDateField=Ext.extend(Ext.form.DateField,{
            onTriggerClick:function(){
                Ext.form.myDateField.superclass.onTriggerClick.call(this);   //先執行一下父類的函數內容,否則下面的this.menu找不到
                this.menu.picker.setValue(this.getValue()||this.defaultDate);     //調用menuPicker的setValue方法設定一下值
            }
        });
        Ext.reg('myDateField',Ext.form.myDateField);  //註冊一個類型,便於使用
        //使用我們自己擴展myDateField,直接new一個對象
        var date=new Ext.form.myDateField({
            renderTo:document.body,
            defaultDate:new Date(2008,7,8)    //這個defaultDate就是我們擴展的一個屬性
        });
        //通過xtype引用
        var panel=new Ext.Panel({
            width:200,
            height:200,
            items:{
                xtype:'myDateField',   //通過我們註冊的xtype來引用
                defaultDate:new Date(2008,7,8)
            },
            renderTo:document.body
        });

 

發佈了40 篇原創文章 · 獲贊 0 · 訪問量 1632
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章