Combobox record icons [solved]

[devnull]

I have added a icon to the combo records which works just fine, but how can I show the icon when the record is selected ?

Code:

  $('#xxx').combobox({
    panelHeight:'auto',
    
    data:[
      {text:'My Documents',value:'n',selected:true,iconCls:'folder_user'},
      {text:'All Documents',value:'y',iconCls:'folder_share'}
    ],
    
    formatter: function(row){
      return '<span style="background: url(../icons/'+row.iconCls+'.png) no-repeat left center;padding-left:22px;">'+row.text+'</span>'  
    },
    
  })

[devnull]

Hi;

I have managed to get it to work using the onSelect event, but how can I do this without using up the onSelect event as I would like to make it a global feature that can be applied to any combobox ?

Code:

  $('#xxx').combobox({
    panelHeight:'auto',
    
    data:[
      {text:'My Documents',value:'n',selected:true,iconCls:'folder_user'},
      {text:'All Documents',value:'y',iconCls:'folder_share'}
    ],
    
    formatter: function(rec){
      return '<span style="background: url(../icons/'+rec.iconCls+'.png) no-repeat left center;padding-left:22px;">'+rec.text+'</span>'  
    },
        
    onSelect:function(rec){
      $(this).combobox('textbox').css({'padding-left':'26px','background':'url(../icons/'+rec.iconCls+'.png) no-repeat 4px 2px'});
    },
   
    onResize: function(){
    var me = $(this);
    setTimeout(function(){
      var rec = me.combobox('getRec');
      if(rec && rec.iconCls) me.combobox('textbox').css({'padding-left':'24px','background':'url(../icons/'+rec.iconCls+'.png) no-repeat 4px 3px','background-size':'14px'});        
    });
  }   
  })

[stworthy]

You can override the $.fn.combobox.defaults to make all combobox components get this feature.

Code:

<style>
	.tb-icon{
		display: inline-block;
		width: 16px;
		height: 16px;
		vertical-align: middle;
	}
	.textbox .tb-hasicon{
		background-position: 4px center;
		padding-left: 20px;
	}
</style>
<script type="text/javascript">
	$.extend($.fn.combobox.defaults, {
	    formatter: function(row){
	    	return '<span class="tb-icon '+row.iconCls+'"></span>'+row.text;
	    },
	    onSelect: function(row){
	    	var tb = $(this).combobox('textbox');
	    	tb.attr('class', 'textbox-text validatebox-text');
	    	if (row.iconCls){
	    		tb.addClass(row.iconCls + ' tb-hasicon');
	    	}
	    }		
	});
</script>

Code:

$('#cc').combobox({
    data:[
      {text:'My Documents',value:'n',selected:true,iconCls:'icon-save'},
      {text:'All Documents',value:'y',iconCls:'icon-cut'}
    ]
})

[devnull]

Thanks, but that's not really what I am after, as if I do that then the onSelect event will not be available to do other more important things.

Is there a way of achieving this WITHOUT using the onselect() event and preferably not using the formatter() as well ?

I am looking to add this as a global configurable option whilst still allowing the combobox to perform normally.

 

[stworthy]

The 'showItemIcon' property will be added to support this feature.

Code:

$('#cc').combobox({
    showItemIcon: true,
    data:[
      {text:'My Documents',value:'n',selected:true,iconCls:'icon-save'},
      {text:'All Documents',value:'y',iconCls:'icon-cut'}
    ]
})

Make sure to download the patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.4-patch.zip.

[devnull]

That's great, I was not expecting it to be integrated as a standard feature, thanks so much.

Will this plugin also work in 1.4.1 ?

[stworthy]

This patch only works for version 1.4.4

[devnull]

Understood, thanks so much