ExtJs之带图片的下拉列表框插件_Javascript教程-查字典教程网
ExtJs之带图片的下拉列表框插件
ExtJs之带图片的下拉列表框插件
发布时间:2016-12-30 来源:查字典编辑
摘要:在ExtJs的官方网站上有一个带图片的下拉列表,其中扩展了ExtJs的Combo,名称叫做IconCombox,官方地址为:http://w...

在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

+ 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,通过这个来修改图片的大小,这样就可以了。具体的效果如下:

完整代码如下 http://xiazai.jb51.net/201003/yuanma/iconcombo.rar

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类