insert icon dynamically and conditionally

[gordis gmbh]

I am trying to insert an icon dynamically only to COMBOBOXES but the icon gets inserted to all the textboxes, dateboxes as well.
Also, the onLoadSuccess for combobox gets called twice.

Please see the attached screenshot and the problem-demo here: http://jsfiddle.net/tk19zpd0/14/

What am I doing wrong?

Thanks.

[stworthy]

The icons should be cloned before creating the combobox. Please look at this updated example http://jsfiddle.net/tk19zpd0/16/. It works fine.

Code:

var icons = $.extend([],opts.icons);
icons.unshift({
	iconCls:'icon-reload',
	handler: function(e){
		console.log('reload combobox..');
	}
});
$(cb).combobox({icons:icons});

[gordis gmbh]

OK, thanks very much for the clone tipp.

How can I extend the combobox plugin to get this refresh icon added by default to all the comboboxes including combobox-editors but EXCLUDING comboboxes in filter panel?



The idea is to have an event which will be called when reload icon is clicked. I have the event already defined:

Code:

$.fn.combobox.defaults = $.extend({}, $.fn.combobox.defaults, {
	onReloadIconClicked: function(cb) {
		$(cb).combobox('reload');
	}
});

// currently I am inserting the icon manually with the handler as follows:
function _insertRefreshIcon(cb) {
    var opts = cb.combobox('options');
  if(cb.hasClass('combobox-f') && opts.addRefreshIcon == true) {
	if(cb.parent().hasClass('datagrid-filter-c')) {
		return; // don't add refresh icon for filter comboboxes! 
  	}
    if(opts.icons.length == 0 || (opts.icons[0] && opts.icons[0].iconCls != 'icon-reload')) {
      	var icons = $.extend([],opts.icons);
    	icons.unshift({
    		iconCls:'icon-reload',
    		handler: function(e){
    			opts.onReloadIconClicked.call(this, cb);
    		}
    	});
    	$(cb).combobox({icons:icons});
    }
  }
}

[gordis gmbh]

When an icon is inserted in 'icons' array as shown above in function '_insertRefreshIcon', the combobox-data (locally or remote via url) gets loaded again.

Is there an alternate way to define the icons other than "$(cb).combobox({icons:icons});" so that the reloading of data can be avoided?

Thanks for looking into it.

[stworthy]

Please try to add this code to your page.

Code:

<style>
.datagrid-filter-c .combo .icon-reload{
    display: none;
}
</style>
<script type="text/javascript">
$.extend($.fn.combobox.defaults, {
    icons:[{
        iconCls: 'icon-reload',
        handler: function(){
            var combo = $(this).closest('.combo').prev();
            combo.combobox('reload');
        }
    }]
})
</script>