扩展的带图片的Ext combobox

//Create   (User eXtensions namespace (Ext.ux))

Ext.namespace('Ext.ux');

/**

  *Ext.ux.IconCombo  

  *

  *@author Steve.yang

  *@version 1.0

  *

  *@class Ext.ux.IconCombo

  *@extends Ext.form.ComboBox

  *@constructor

  *@param{Object} config 

  *

  */  

   //引用本地空白文件

   Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

	 Ext.ux.IconCombo = function(config) {

     Ext.ux.IconCombo.superclass.constructor.call(this, config);

     this.tpl = config.tpl ||  

        ''

        +'
' 

+ '' 

+ '' 

+ '' 

+ '
' 

+ '
{' + this.displayField + '}
' 

+ ''    

   ;

    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'

            });

        }}

    });

}

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(); 

} 

});

 



	

	

	

	







珍爱生命,远离上帝

.china{ 

background-image:url(../img/china.jpg) ;

}

.USA{ 

background-image:url(../img/usa.jpg) ;

}

.Russia{ 

background-image:url(../img/Russia.jpg);



}

.x-icon-combo-icon {

    background-repeat: no-repeat;

    background-position: 0 50%;

    width: 18px;

    height: 14px;

    }

.x-icon-combo-input { 

padding-right: 200px; 

} 

.x-form-field-wrap .x-icon-combo-icon { 

top: 3px; 

left: 40px; 

} 

				 



	 参考网站  http://hi.baidu.com/j2me/blog/item/caad513d3c3e39eb3c6d9762.html

                   http://sanlin0523.javaeye.com/blog/169708