ExtJs之带图片的下拉列表框

     ExtJs是一个非常好的客户端JavaScript,他的很多空间都可以自定义而且也可以扩展。

     在ExtJs的官方网站上有一个带图片的下拉列表,其中扩展了ExtJs的Combo,名称叫做IconCombox,官方地址为:

     http://www.extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese

     但是这个IconComboBox有个缺点,就是显示的图片不能按比例变化。如果图片太大,就会出现覆盖了Combobox中的字,或者出现Icon显示不全种种问题,后来读了IconComboBox的源代码,修改了其中的问题:

     在Ext.ux.IconCombo.js这个文件中:

 1 /**
 2   * Ext.ux.IconCombo Extension Class
 3   *
 4   * @author  Jozef Sakalos
 5   * @version 1.0
 6   *
 7   * @class Ext.ux.IconCombo
 8   * @extends Ext.form.ComboBox
 9   * @constructor
10   * @param {Object} config Configuration options
11   */
12 Ext.ux.IconCombo = function(config) {
13  
14     // call parent constructor
15     Ext.ux.IconCombo.superclass.constructor.call(this, config);
16  
17     this.tpl = config.tpl ||
18           '<div class="x-combo-list-item x-icon-combo-item {' 
19         + this.iconClsField 
20         + '}">{' 
21         + this.displayField 
22         + '}</div>'
23     ;
24  
25     this.on({
26         render:{scope:this, fn:function() {
27             var wrap = this.el.up('div.x-form-field-wrap');
28             this.wrap.applyStyles({position:'relative'});
29             this.el.addClass('x-icon-combo-input');
30             this.flag = Ext.DomHelper.append(wrap, {
31                 tag: 'div', style:'position:absolute'
32             });
33         }}
34     });
35 // end of Ext.ux.IconCombo constructor
36  
37 // extend
38 Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {
39  
40     setIconCls: function() {
41         var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
42         if(rec) {
43             this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField);
44         }
45     },
46  
47     setValue: function(value) {
48         Ext.ux.IconCombo.superclass.setValue.call(this, value);
49         this.setIconCls();
50     }
51  
52 }); // end of extend
53  
54 // 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,通过这个来修改图片的大小,这样就可以了。具体的效果如下:

                

      完整代码如下:iconcombo

      

posted @ 2010-03-03 17:43 萧萧空间 阅读(...) 评论(...) 编辑 收藏