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

      

转载于:https://www.cnblogs.com/zhjp11/archive/2010/03/03/1677394.html