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

所属分类: 网络编程 / JavaScript 阅读数: 919
收藏 0 赞 0 分享
在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,通过这个来修改图片的大小,这样就可以了。具体的效果如下:
    
完整代码如下 http://xiazai.jb51.net/201003/yuanma/iconcombo.rar
更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多