强大的EXT最新使用手册（中文）(7)

? iconcombo.js: 程序javascript代码

? Ext.ux.IconCombo.js: 扩展的javascript文件 ? Ext.ux.IconCombo.css: 扩展样式表

iconcombo.html

Icon combo: 该文件来自教程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 || '' + '' + '' + '' ; 在这一步，我们将默认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; }