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


Posted in Javascript onMarch 04, 2010

在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,通过这个来修改图片的大小,这样就可以了。具体的效果如下:
ExtJs之带图片的下拉列表框插件    
完整代码如下 http://xiazai.3water.com/201003/yuanma/iconcombo.rar

Javascript 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 #Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 #Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 #Javascript
JavaScript类和继承 constructor属性
Mar 04 #Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 #Javascript
js 编写规范
Mar 03 #Javascript
jquery validation插件表单验证的一个例子
Mar 03 #Javascript
You might like
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP静态成员变量
2017/02/14 PHP
PHP 断点续传实例详解
2017/11/11 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
python pdb调试方法分享
2014/01/21 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
Python管理Windows服务小脚本
2018/03/12 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
电大自我鉴定
2013/10/27 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
辩论赛主持词
2014/03/18 职场文书
服务理念标语
2014/06/18 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
市场营销计划书范文
2015/01/16 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
python解析json数据
2022/04/29 Python
解决 redis 无法远程连接
2022/05/15 Redis