【ExtJS】關於自定義組件(一)

 

---

---

一、目的：

　　ExtJS中提供了下拉日期選擇控件Ext.form.field.Date與下拉時間選擇控件Ext.form.field.Time。不過沒有一個在選擇日期時選擇時間的控件datetimefield。目的就是運用自定義組件的方法，來擴展下拉日期選擇控件Ext.form.field.Date，在下拉框中添加時間選擇的組件。目標效果：

       

---

---

二、一些知識的梳理:

　　當自定義創建一個新類時，最好根據需要繼承一個功能相近的基類，這是因為Ext JS 提供的自動化生命周期管理將會被合適的布局管理器管理並且在從容器中移除時會自動銷毀。這樣很簡單就能寫一個新的組件類，並且它能夠在組件層次結構中占有一席之地，而不是一個包含Ext JS 組件的新類，還必須在外部對它進行渲染和管理。

　　接下來有兩個知識點需要弄清楚：

　　1、模版Template和XTemplate:

　　　　模板就是按預前給定的模樣生產出來。這個預前給定的模樣就是模板。

　　　　1.1 Ext.Template:

　　　　　　代表一個HTML片段模板。

　　　　　　基本格式:

　　　　　　　　{name[:][format][(params)]}

　　　　　　其中，name為傳入對象的屬性名稱，format為調用的格式函數及參數（可選）。

　　　　　　格式函數有：

　　　　　　　　ellipsis(length) – 對大於指定長度部分的字符串，進行裁剪，增加省略號（“…”）的顯示。適用於只顯示前N位的字符，然后提供詳細頁面的場合。
　　　　　　　　undef -檢查一個值是否為underfined，如果是的轉換為空值
　　　　　　　　htmlEncode – 轉換(&, <, >, and ‘) 字符
　　　　　　　　trim – 對一段文本的前后多余的空格裁剪
　　　　　　　　substr(start, length) – 返回一個從指定位置開始的指定長度的子字符串。
　　　　　　　　lowercase – 返回一個字符串，該字符串中的字母被轉換為小寫字母。
　　　　　　　　uppercase – 返回一個字符串，該字符串中的字母被轉換為大寫字母。
　　　　　　　　capitalize – 返回一個字符串，該字符串中的第一個字母轉化為大寫字母，剩余的為小寫。
　　　　　　　　usMoney – 格式化數字到美元貨幣。如：$10.97
　　　　　　　　date[(format)] – 將一個日期解析成為一個特定格式模式的日期。如日期字符串不輸入，默認為“月/日/年”
　　　　　　　　stripTags – 剝去變量的所有HTML標簽

　　　　　　格式函數也可以根據實際應用調用自己實現的函數，調用方式{name:this.your_function_name[params]}。

　　　　1.2 Ext.XTemplate:

　　　　　　Ext.Template的子類，支持高級功能的模板類，支持功能有：

　　　　　　　　自動數組輸出、子模板;

　　　　　　　　條件判斷運算;

　　　　　　　　基礎數學運行;

　　　　　　　　執行特殊內建模板變量的任意內聯代碼;

　　　　　　　　常用的功能方法;

　　　　　　　　許多特殊的標簽和內置的運算符在API中都沒有定義，但是在模板類中可以被創建;　

---

　　2、渲染Render:

　　　　渲染是指含有 ExtJS 程序的頁面下載完畢后在瀏覽器中完全展現出來的一個過程。作為普通的Html頁面也有渲染的過程，即Html與CSS代碼開始裝載進瀏覽器到整個頁面根據Html與CSS規則完全顯示出來的過程。但是在ExtJS中有完全不同於Html與CSS渲染過程的地方，雖然ExtJS的界面最終也是以Html與CSS來展現，但是這些Html與CSS不是從服務器下載而來，而完全是由ExtJS的引擎動態生成而來。所以ExtJS的渲染實際上是一個動態生成的過程，而非靜態載入的過程。

　　　　renderTpl，renderData和renderSelector

　　　　Ext JS 的所有組件都會被渲染成一個帶有id的div元件和基類組件（cls、cmpCls和ui）。如果創建一個組件需要額外的元件，那么它將通過 XTemplate (renderTpl)來處理。XTemplate所需的數據將通過 renderData對象讀取，並在組件實例中通過renderSelectors方法創建一個Ext.Element對象。 renderSelector使用標准的css選擇器，其作用范圍是基本的div元件。這些Ext.Element對象將作為組件生命周期的一部分，直到組件被銷毀時才自動銷毀。

---

---

三、一個簡單例子：

Ext.define('My.ux.Image', {
    extend: 'Ext.Component', 
    alias: 'widget.managedimage', 
 
    autoEl: {
        tag: 'img',
        src: Ext.BLANK_IMAGE_URL,
        cls: 'my-managed-image'
    },
 
   
    onRender: function() {
        this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
        this.callParent(arguments);
    },
 
    setSrc: function(src) {
        if (this.rendered) {
            this.el.dom.src = src;
        } else {
            this.src = src;
        }
    },
 
    getSrc: function(src) {
        return this.el.dom.src || this.src;
    }
});

Ext.onReady(function(){
    var image = Ext.create('My.ux.Image');
 
    Ext.create('Ext.panel.Panel', {
        title: 'Image Panel',
        width: 400,
        border: true,
        height: 200,
        renderTo: Ext.getBody(),
        items: [ image ]
    });
     
    image.setSrc('http://www.sencha.com/img/sencha-large.png');
});

 

效果：

其中：

　 alias :

　　　相當於別名一樣,可以起多個,可以通過xtype和Ext.widget()創建實例。

　autoEl:

　　　一個標簽名或者 DomHelper 描述，用來創建 Element ，它將封裝當前組件。對於基類 Ext.Component 和 Ext.container.Container, 此值默認為 'div'。 越復雜的sencha類使用越復雜的DOM結構， 這些是由它們自己的renderTpl方法創建的。這被設計用來允許開發者創建針對特定應用的 工具組件，這些組件由不同的DOM元素封裝而成。 

　onRender:

　　　render 是定義在Component類中的一個方法，它對初始化組件的呈現階段生命周期負責。render不能被重寫，但是可以調用onRender方法在處理子類實現的時候可以調用來實現自己的特有屬性方法。每一個onRender方法必須調用父類的onRender方法在貢獻自己額外邏輯的時候。