擴展EXT組件

2024-07-21 02:14:04

字體：大中小

來源：轉載

供稿：網友

要創建的擴展是一個在文字前面能夠顯示圖標的這么一個Ext.form.Combobox。將其中一個功能舉例來說，就是要在一塊選擇里，國家名稱連同國旗一并出現。

我們先給擴展起個名字，就叫Ext.ux.IconCombo。

文件的創建

首要的步驟是準備好開發中將會使用的文件。需下列文件：

iconcombo.html: 新擴展將會使用的 html markup
iconcombo.js: 程序javascript代碼
Ext.ux.IconCombo.js: 擴展的javascript文件
Ext.ux.IconCombo.css: 擴展樣式表

iconcombo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="Ext.ux.IconCombo.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="Ext.ux.IconCombo.js"></script>
<script type="text/javascript" src="iconcombo.js"></script>
<!-- A Localization Script File comes here -->
<script type="text/javascript">Ext.onReady(iconcombo.init, iconcombo);</script>
<title>Ext.ux.IconCombo Tutorial</title>
</head>
<body>
<div style="position:relative;width:300px;top:24px;left:64px;font-size:11px">
  <div>Icon combo:</div>
  <div id="combo-ct"></div>
</div>
</body>
</html>
 
該文件來自教程Ext程序規劃入門 的輕微修改。
iconcombo.js
/**
  * Ext.ux.IconCombo Tutorial
  * by Jozef Sakalos, aka Saki
  * http://extjs.com/learn/Tutorial:Extending_Ext_Class
  */
// 引用本地空白文件
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif'; // 創建程序
iconcombo = function() { // 公共空間
    return { // public properties, e.g. strings to translate
        // public methods
        init: function() {
            var icnCombo = new Ext.ux.IconCombo({
                store: new Ext.data.SimpleStore({
                    fields: ['countryCode', 'countryName', 'countryFlag'],
                    data: [['US', 'United States', 'x-flag-us'], ['DE', 'Germany', 'x-flag-de'], ['FR', 'France', 'x-flag-fr']]
                }),
                valueField: 'countryCode',
                displayField: 'countryName',
                iconClsField: 'countryFlag',
                triggerAction: 'all',
                mode: 'local',
                width: 160
            });
            icnCombo.render('combo-ct');
            icnCombo.setValue('DE');
        }
    };
} (); // end of app
// end of file
我們在這個文件中創建IconCombo，以便可以進行擴展和測試。
Ext.ux.IconCombo.js
// Create創建用戶的擴展（User eXtensions namespace (Ext.ux)）
Ext.namespace('Ext.ux');
/**
  * Ext.ux.IconCombo 擴展類
  *
  * @author Jozef Sakalos, aka Saki
  * @version 1.0
  * @class Ext.ux.IconCombo
  * @extends Ext.form.ComboBox
  * @constructor
  * @param {Object} config 配置項參數
  */
Ext.ux.IconCombo = function(config) { // 調用父類的構建函數
    Ext.ux.IconCombo.superclass.constructor.call(this, config);
} // Ext.ux.IconCombo構建器的底部
// 進行擴展
Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {}); // 擴展完畢
// 文件底部
運行到這一步，實際這是一個沒有對Ext.form.ComboBox新加任何東西的空擴展。我們正是需要這個完成好的空擴展，再繼續下一步。
Ext.ux.IconCombo.css
.x-flag-us { 

background-image: url(../img/flags/us.png); 

} 

.x-flag-de { 

background-image: url(../img/flags/de.png); 

} 

.x-flag-fr { 

background-image: url(../img/flags/fr.png); 

}
路徑可能根據你所在的國旗放置目錄有所不同。國旗的資源可在here下載。
Let's go
So far so good！如果你瀏覽iconcombo.html應該會發現一個包含三個選項的標準combo,而德國的那個是選中的...是吧？不過還沒有圖標...
現在正是開始工作。在調用父類構建器之后加入下列行：
this.tpl = config.tpl || 

'<div class="x-combo-list-item">' 

'<table><tbody><tr>' 

'<td>' 

'<div class="{' this.iconClsField '} x-icon-combo-icon"></div></td>' 

'<td>{' this.displayField '}</td>' 

'</tr></tbody></table>' 

'</div>' 

;
在這一步，我們將默認combox box的模版重寫為iconClsField模版。
現在加入Ext.ux.IconCombo.css中的樣式文件：
.x-icon-combo-icon { 

background-repeat: no-repeat; 

background-position: 0 50%; 

width: 18px; 

height: 14px; 

}
不錯！可以測試一下了，刷新的頁面，還好吧！？嗯，列表展開時那些漂亮的圖標就出來了。。還有。。我們不是要在關閉時也出現圖標的嗎？
在構建器中加入創建模版的過程：
this.on({ 

render:{scope:this, fn:function() { 

var wrap = this.el.up('div.x-form-field-wrap'); 

this.wrap.applyStyles({position:'relative'}); 

this.el.addClass('x-icon-combo-input'); 

this.flag = Ext.DomHelper.append(wrap, { 

tag: 'div', style:'position:absolute' 

}); 

}} 

});
加入 事件render的偵聽器，用于調整元素樣式和創建國旗的div容器。如后按照下列方式進行擴展：
// 進行擴展Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, { 


setIconCls: function() { 

var rec = this.store.query(this.valueField, this.getValue()).itemAt(0); 

if(rec) { 

this.flag.className = 'x-icon-combo-icon ' rec.get(this.iconClsField); 

} 

}, 



setValue: function(value) { 

Ext.ux.IconCombo.superclass.setValue.call(this, value); 

this.setIconCls(); 

} 



}); // 擴展完畢
新增 setIconCls函數并重寫setValue函數。我們還是需要父類的setValue的方法來調用一下，接著再調用setIconCls的函數。最后，我們應該在文件Ext.ux.IconCombo.css加入下列代碼：

.x-icon-combo-input { 

padding-left: 26px; 

} 

.x-form-field-wrap .x-icon-combo-icon { 

top: 3px; 

left: 6px; 

}
完成
最后再刷新一下，如果一切順利，那這個就是新的Ext.ux.IconCombo擴展！ 希望你能在此基礎上擴展更多的組件！