확장 이미지 포함 Ext combobobox

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

} 

});

 



	

	

	

	

	Ext.onReady(function (){

	 // 

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

	var icnCombo = new Ext.ux.IconCombo({

        store: new Ext.data.SimpleStore({

            fields: ['iconCode', 'iconName', 'iconCSS'],

            data: [        

                ['china', ' ', 'china'],

                ['USA', ' ', 'USA'],

                ['Russia', ' ', 'Russia']

            ]

        }),

        valueField: 'iconCode',

        displayField: 'iconName',

        iconClsField: 'iconCSS',

        triggerAction: 'all',

        fieldLabel : ' ',

        hiddenName : "menu.iconCls",

        name : "menu.iconCls",

        editable:false,

        mode: 'local',

        id: 'iconCombo',

        width: 160

    });

	icnCombo.render('combo-ct');

	icnCombo.setValue('china');

	});

	







 , 

.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