[Stable 1.0] LovCombo - Simple List of Values Combo

[nassaja-rus]

Forgive me, it is complex to state ideas in foreign language in five oclock of mornings, after ten hours of programming =)

I spoke about a new option which allow to show long lines in the dropping out list and short when i check some long items:

|[X] Long Name1 - Long Description1 |
|[ ] Long Name2 - Long Description3 |
|[X] Long Name3 - Long Description3 |
-------------------------------------

And when I shall choose some elements, they will be shown as:

[ Short Name1, Short Name3 |V|]

Typycal record from combo-store conteins: id, long_name, short_name

And now we have displayField:long_name for items in dropdown list, selectedFieldhort_name for checked items in checkbox field

[jsakalos]

Oh, I see. Have you also modified beforequery code? The original plays nicely with typing and subsequent dropdown filtering. If you haven't then you deprive yourself, and your users, of convenient keyboard input.

Any demo/code I can test?

[mabello]

Hi Saki,

I like your lovcombo, it's really good extension, thanks for sharing

I've found some issues, maybe you have already fixed them or maybe it's my fault, I have to admit that I haven't check the source code too much...

First example that does not work for me, if I do not specify valueField, I can not select values (maybe it's a feature):

var lc = new Ext.ux.form.LovCombo({
         id:'lovcombo'
        ,renderTo:'lovcomboct'
        ,width:300
        ,hideOnSelect:false
        ,store:new Ext.data.SimpleStore({
             fields:[{name:'id'}]
            ,data:[
                 ['1 ()']
                ,['11 ()']
                ,['2']
                ,['22']
                ,['3']
            ]
        })
        ,triggerAction:'all'
        ,displayField:'id'
        ,mode:'local'
    }); 

2)If then I add the valueField to the config, I have problem selecting the data containing "()"...

var lc = new Ext.ux.form.LovCombo({
         id:'lovcombo'
        ,renderTo:'lovcomboct'
        ,width:300
        ,hideOnSelect:false
        ,store:new Ext.data.SimpleStore({
             fields:[{name:'id'}]
            ,data:[
                 ['1 ()']
                ,['11 ()']
                ,['2']
                ,['22']
                ,['3']
            ]
        })
        ,triggerAction:'all'
        ,valueField:'id'
        ,displayField:'id'
        ,mode:'local'
    }); 

I'd like only to know if I'm doing something wrong

Thanks for your help and for this beautifull extension.

[jsakalos]

Re 1: You need both valueField and displayField.
Re 2: You need 2d array, e.g. [[1, '1 ()'],[11, '11 ()']]

[jsakalos]

http://lovcombo.extjs.eu/source.php?file=lovcombo.js

[malord]

hey I just found your site (extjs.eu) today and I am really liking these additions to ExtJS. I found a problem with the onRealBlur event for the LovCombo though. Due to the RegExp matching in that function, if you have an unclicked option that is contained inside a clicked option (e.g. 'no' is inside 'another') then when you blur, the unclicked option will suddenly appear in the value list.

                var re = new RegExp(r.get(this.displayField));
                if(v.match(re)) {
                    va.push(r.get(this.valueField));
                } 

[jsakalos]

Post please a showcase so I can debug it. Or you have a proposed patch?

[mabello]

Hi Saki,
I wanted to use your lovcombo instead a normal combobox, and I could not change the data for the store in my code, because the same data are used in different context (store load data from server).

1) So I've tried to make it works also with simple data like the following:

var data = [
                 ['15 (prova)']
                ,['11 ()']
                ,['2']
                ,['22']
                ,['3']
            ]; 

2) and without specify the valueField (so that if not specified, I suppose that the valueField is the same of the displayField.)

For me it works, but I have not tested a lot, and I have some problem in case the store is loaded remotely and you want to preset a value in the combo, the first time you expand the combo, the preselected element it does not appear checked (I have a workaround in my code, in the load event of the store, I change the mode of the lovcombo instance from remote to local and then I call setValue()).

This is the code changes:

 ,charsToEscape: ['(',')','[', ']', '^', '|', '?', '*', '+', '{', '}']//to complete

,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"' + ']}">'
                +'<div class="ux-lovcombo-item-text">{' + this.displayField + '}</div>'
                +'</div>'
                +'</tpl>'
            ;
        }
//************************
        if(!this.valueField)
            this.valueField = this.displayField;
//************************
        // call parent
        Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);

        // install internal event handlers
        this.on({
             scope:this
            ,beforequery:this.onBeforeQuery
            ,blur:this.onRealBlur
        });

        // remove selection from input field
        this.onLoad = this.onLoad.createSequence(function() {
            if(this.el) {
                var v = this.el.dom.value;
                this.el.dom.value = '';
                this.el.dom.value = v;
            }
        });
        
    } // e/o function initComponent

    ,onRealBlur:function() {
        this.list.hide();
        var v = this.getRawValue();
        var va = [];
        this.store.clearFilter();
        this.store.each(function(r) {
//***********************
            var innerRe= this.escapeStringValue(r.get(this.displayField));
//***********************
            var re = new RegExp(innerRe);
            if(v.match(re)) {
                va.push(r.get(this.valueField));
            }
        }, this);
        this.setValue(va.join(this.separator));
    } // eo function onRealBlur

,setValue:function(v) {
        if(v) {
            v = '' + v;
            if(this.valueField) {
                this.store.clearFilter();
                this.store.each(function(r) {
//*****************************
                    var stringValue = this.escapeStringValue(r.get(this.valueField));
                    var checked = !(!v.match('(^|' + this.separator + ')' + stringValue +'(' + this.separator + '|$)'));
//******************************
                    r.set(this.checkField, checked);
                }, this);
                this.value = this.getCheckedValue();
                this.setRawValue(this.getCheckedDisplay());
                if(this.hiddenField) {
                    this.hiddenField.value = this.value;
                }
            }
            else {
                this.value = v;
                this.setRawValue(v);
                if(this.hiddenField) {
                    this.hiddenField.value = v;
                }
            }
        }
        else {
            this.clearValue();
        }
    } // eo function setValue

,escapeStringValue: function(stringValue) {
        for(var i = 0; i < this.charsToEscape.length; i++) {
            var charToEscape = this.charsToEscape[i];
            var replaceWith = "\\" + charToEscape;
            stringValue = '' + stringValue;
            stringValue = stringValue.replace(charToEscape, replaceWith);
        }
        return stringValue;
    } 

This is the complete code:
[PHP]
// vim: ts=4w=4:nu:fdc=4:nospell
/**
* Ext.ux.form.LovCombo, List of Values Combo
*
* @author Ing. Jozef Sak

[mabello]

Fix:

,escapeStringValue: function(stringValue) {
        for(var i = 0; i < this.charsToEscape.length; i++) {
            var charToEscape = this.charsToEscape[i];
            var replaceWith = "\\" + charToEscape;
            stringValue = '' + stringValue;
            stringValue = stringValue.replace(charToEscape, replaceWith);
        }
        return stringValue;
    } 

Now it works also with your example
(Updated my prevoius post)

[jsakalos]

Function to escape regular expression special characters doesn't belong to this extension in fact as it is more general. I was playing a bit with it and this is what I came out with:

RegExp.escape = function(s) {
    if('string' !== typeof s) {
        return s;
    }
    // see attached image for line that should come here. Forum strips backslashes
}; // eo function escape 

It defines static method escape of RegExp object and is called as:

var s = RegExp.escape('1 ()'); 

Play please a bit with it; I'm not 100% sure if I've included all RegExp special characters.

As to, valueField: I wouldn't hard code it in the extension as other users may have reversed preferences. It can be configured from outside anyway.