Extending Ext2 Class (擴展EXT2組件類)

目錄：
1 實現的目的
2 A note for those who were used to Ext 1.x
3 文件的創建
3.1 iconcombo.html
3.2 iconcombo.js
3.3 Ext.ux.IconCombo.js
3.4 Ext.ux.IconCombo.css
4 相關理論
5 開始囉
6 完成的代碼

預計實現的效果圖：

實現的目的

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

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

A note for those who were used to Ext 1.x
Extending Ext classes has not been difficult in Ext 1.x but it is even easier in Ext 2.x and the whole matter has not dramatically changed. You can even use the same procedure in Ext 2.x as you have used in Ext 1.x. However, every line of code you don't need to type contributes to code maintainability, readability and reduces number of possible bugs. Therefore, I'll show the easiest, simplest and shortest method here.

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

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

iconcombo.html

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css" mce_href="extjs-2.0/resources/css/ext-all.css"> <mce:script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js" mce_src="extjs-2.0/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../extjs-2.0/ext-all-debug.js" mce_src="extjs-2.0/ext-all-debug.js"></mce:script> <mce:script type="text/javascript" src="Ext.ux.IconCombo.js" mce_src="Ext.ux.IconCombo.js"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .ux-flag-us { background-image:url(../img/flags/us.png) ! important; } .ux-flag-de { background-image:url(../img/flags/de.png) ! important; } .ux-flag-fr { background-image:url(../img/flags/fr.png) ! important; } .ux-icon-combo-icon { background-repeat: no-repeat; background-position: 0 50%; width: 18px; height: 14px; } .ux-icon-combo-input { padding-left: 25px; } .x-form-field-wrap .ux-icon-combo-icon { top: 3px; left: 5px; } .ux-icon-combo-item { background-repeat: no-repeat ! important; background-position: 3px 50% ! important; padding-left: 24px ! important; } </style> <mce:script type="text/javascript"></mce:script> <title>Icon Combo Ext 2.0 Extension Class Example</title> </head> <body> </body> </html>

該文件來自教程 Ext程序規劃入門的輕微修改。

iconcombo.js

// vim: ts=4:sw=4:nu:fdc=2:nospell /** * Ext.ux.IconCombo Extension Class for Ext 2.x Library * * @author Ing. Jozef Sakalos * @version $Id: Ext.ux.IconCombo.js 617 2007-12-20 11:29:56Z jozo $ * * @class Ext.ux.IconCombo * @extends Ext.form.ComboBox */ Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, { initComponent:function() { // call parent initComponent Ext.ux.IconCombo.superclass.initComponent.call(this); } // end of function initComponent }); // register xtype Ext.reg('iconcombo', Ext.ux.IconCombo); // 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); }

路徑可能根據你所在的國旗放置目錄有所不同。國旗的資源可在這裏下載

相關理論
To extend an Ext class we do not need to create a constructor function. We just need to assign the return value of Ext.extend call to a variable in our name space. Ext.extend takes the original class and a config object as arguments and returns our extension.

All tasks that were done in a custom constructor function in Ext 1.x are now done in initComponent function that we almost always override. initComponent is called early from the parent constructor function.

However, initComponent of the original class contains useful code that needs to be executed. You can see how we can call initComponent of the parent class in the above code. The pattern of calling parent functions is same for any other functions we may override.

Registering an xtype for your extension is not mandatory but it is very good idea as you can then use your extension just by typing one word of its xtype. It's also the way it is used in this tutorial.

開始囉
So far so good！如果你瀏覽iconcombo.html應該會發現一個包含三個選項的標準combo,而德國的那個是選中的...是吧？不過還沒有圖標...

現在正是開始工作。在調用父類構建器之後加入下列行：

Ext.apply(this, {
            tpl:  '<tpl for=".">'
                + '<div class="x-combo-list-item ux-icon-combo-item '
                + '{' + this.iconClsField + '}">'
                + '{' + this.displayField + '}'
                + '</div></tpl>'
        });

在這一步，我們將默認combox box的模版重寫爲iconClsField模版。

現在加入Ext.ux.IconCombo.css中的樣式文件：

.x-icon-combo-icon {
    background-repeat: no-repeat;
    background-position: 0 50%;
    width: 18px;
    height: 14px;
}

不錯！可以測試一下了，刷新的頁面，還好吧！？嗯，列表展開時那些漂亮的圖標就出來了。。還有。。我們不是要在關閉時也出現圖標的嗎？

在構建器中加入創建模版的過程：

加入事件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;
}

完成的代碼
這裏是 IconCombo擴展的完整的代碼，以備你參考用：

// vim: ts=4:sw=4:nu:fdc=2:nospell
/**
  * Ext.ux.IconCombo Extension Class for Ext 2.x Library
  *
  * @author  Ing. Jozef Sakalos
  * @version $Id: Ext.ux.IconCombo.js 617 2007-12-20 11:29:56Z jozo $
  *
  * @class Ext.ux.IconCombo
  * @extends Ext.form.ComboBox
  */
Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, {
    initComponent:function() {
 
        Ext.apply(this, {
            tpl:  '<tpl for=".">'
                + '<div class="x-combo-list-item ux-icon-combo-item '
                + '{' + this.iconClsField + '}">'
                + '{' + this.displayField + '}'
                + '</div></tpl>'
        });
 
        // call parent initComponent
        Ext.ux.IconCombo.superclass.initComponent.call(this);
 
    }, // end of function initComponent
 
    onRender:function(ct, position) {
        // call parent onRender
        Ext.ux.IconCombo.superclass.onRender.call(this, ct, position);
 
        // adjust styles
        this.wrap.applyStyles({position:'relative'});
        this.el.addClass('ux-icon-combo-input');
 
        // add div for icon
        this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
            tag: 'div', style:'position:absolute'
        });
    }, // end of function onRender
 
    setIconCls:function() {
        var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
        if(rec) {
            this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
        }
    }, // end of function setIconCls
 
    setValue: function(value) {
        Ext.ux.IconCombo.superclass.setValue.call(this, value);
        this.setIconCls();
    } // end of function setValue
});
 
// register xtype
Ext.reg('iconcombo', Ext.ux.IconCombo);
 
// end of file

引用自： http://extjs.com/learn/Tutorial:Extending_Ext2_Class_%28Chinese%29

Extending Ext2 Class (擴展EXT2組件類)

constructor與initComponent

Extending Ext2 Class (擴展EXT2組件類)

Writing a Big Application in Ext

擴展Ext.Component，擴展Ext中的組件

組件模型 Component Model

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結