Ext.ux.LovComboImage

[tobiu]

hi together,

this is a small extension to sakis fabolous LovCombo.

@saki: if you like this modifications of your extension, feel free to include them.

i will only post the added / modified parts of the original source:

Ext.ux.form.LovCombo.css:


.ux-lovcombo-image {
width:16px;
height:16px;
float:left;
background-position: -1px -1px ! important;
background-repeat:no-repeat ! important;
margin-left:2px;
margin-right:5px;
}



Ext.ux.form.LovCombo.js:


Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {

// {{{
// configuration options
/**
* @cfg {String} checkField name of field used to store checked state.
* It is automatically added to existing fields.
* Change it only if it collides with your normal field.
*/
checkField:'checked'

/**
* @cfg {String} iamge-url to use between checkboxes and itemtexts
*/
,imageField:false

/**
* @cfg {String} separator separator to use between values and texts
*/
,separator:','

/**
* @cfg {String/Array} tpl Template for items.
* Change it only if you know what you are doing.
*/
// }}}
// {{{
,initComponent:function() {

// template with checkbox
if(!this.tpl) {
this.tpl =
'<tpl for=".">'
+'<div class="x-combo-list-item">'
+'<img src="' + Ext.BLANK_IMAGE_URL + '" '
+'class="ux-lovcombo-icon ux-lovcombo-icon-'
+'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
+'<tpl if="' + this.imageField +' != false">'
+'<img class="ux-lovcombo-image" src="../images/icons/{' + this.imageField + '}">'
+'</tpl>'
+'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>'
+'</div>'
+'</tpl>'
;
}

// call parent
Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);
...


you can use the imageField-config to use a store field for image-urls.
if you dont use this config, the LovCombo looks like the original one.
if you use it, make sure all entries got an image-url (use blank-images if needed).


kind regards, tobiu

here a screenshot, how it looks:

[jsakalos]

Yes, I like it. One picture says more than 1000 words...

Anyway, I'd like better if the image was implemented as background image with css - that would be much more universal w/o hardcoded paths. The idea is to have s.gif (blank image, or even an empty div) sized to, let's say 16x16 px with a css class bound to imageField (or clsField).

That way the code of LovCombo doesn't need any change as images would be configured outside of it.

What do you think?

[tobiu]

hi saki,

i am a bit short in time right now, but will have a closer look this weekend.
i chose images, because the checkboxes left to the content-images are img-tags as well. so it might make sense to change both.



'<tpl for=".">'
+'<div class="x-combo-list-item">'
+'<img


if i get you right, you would just replace the image-tags with div-tags using background images. this change should be quite easy, but i would like to test it a bit. so, the next update will be here at the weekend ;)

another idea is to add an additional config-param:
useImages: boolean

it would be more clear than checking if there is a field specified and if yes always use images. with that param, we can add blank images or better just sized divs, if the record entry of imageField is empty.

cu and thanks for your feedback, tobiu

[jsakalos]

You're right, also useImages (or imgCls, or something similar would do). Checkboxes are img but source is BLANK_IMAGE_URL + background-image cls.


if(!this.tpl) {
this.tpl =
'<tpl for=".">'
+'<div class="x-combo-list-item">'
+'<img src="' + Ext.BLANK_IMAGE_URL + '" '
+'class="ux-lovcombo-icon ux-lovcombo-icon-'
+'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
+'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>'
+'</div>'
+'</tpl>'
;
}