ExtJs之带图片的下拉列表框插件

189 阅读 0 评论 125 点赞

我是靠谱客的博主纯情烤鸡，最近开发中收集的这篇文章主要介绍ExtJs之带图片的下拉列表框插件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在ExtJs的官方网站上有一个带图片的下拉列表，其中扩展了ExtJs的Combo，名称叫做IconCombox，官方地址为：
     http://www.extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese
     但是这个IconComboBox有个缺点，就是显示的图片不能按比例变化。如果图片太大，就会出现覆盖了Combobox中的字，或者出现Icon显示不全种种问题，后来读了IconComboBox的源代码，修改了其中的问题：
     在Ext.ux.IconCombo.js这个文件中：

复制代码代码如下:

 
/** 
* Ext.ux.IconCombo Extension Class 
* 
* @author Jozef Sakalos 
* @version 1.0 
* 
* @class Ext.ux.IconCombo 
* @extends Ext.form.ComboBox 
* @constructor 
* @param {Object} config Configuration options 
*/ 
Ext.ux.IconCombo = function(config) { 
// call parent constructor 
Ext.ux.IconCombo.superclass.constructor.call(this, config); 
this.tpl = config.tpl || 
'<div class="x-combo-list-item x-icon-combo-item {' 
+ this.iconClsField 
+ '}">{' 
+ this.displayField 
+ '}</div>' 

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' 
}); 
}} 
}); 
} // end of Ext.ux.IconCombo constructor 
// extend 
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(); 
} 
}); // end of extend 
// end of file 

这个文件扩展了Ext.form.ComboBox，其中主要包含了两句代码：
第17到23行，这是设置了ComboBox的显示下拉内容，将原来的显示文字修改成了显示图片加文字，这个没有什么问题，但是如果图片太大，就需要修改CSS了。
第25到34行，这里设置了ComboBox中显示的内容方式，ExtJs使用了一个很好的方式，Ext.DomHelper.append，这个是ExtJs的一个Dom API，主要对Html的Dom进行操作，这个代码的意思就是使用Dom在wrap这个单元中添加一个新的标记，这个标记的tag是div，并且使用了position:absolute这个样式。这就是问题出现的原因。对于现在的浏览器来说，对于div的背景图片是没有办法修改的。于是我将其修改为img，通过这个来修改图片的大小，这样就可以了。具体的效果如下：