[Stable 1.0] LovCombo - Simple List of Values Combo

[xjpmauricio]

Nice component. What about a check/uncheck all function?

[dirkc]

I like this component very much!
However for some reason it is not displaying my values in the box, but instead it is displaying undefined.
As I am just starting with Ext js and javascript I am sure it's my mistake.

Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.ns('Example');
Example.version = '1.0';

Ext.override(Ext.ux.form.LovCombo, {
    beforeBlur: Ext.emptyFn
});

// application entry point
Ext.onReady(function() {
    Ext.QuickTips.init();

    var lc = new Ext.ux.form.LovCombo({
         id:'lovcombo'
        //,renderTo:'lovcomboct'
        ,width:300
        ,hideOnSelect:false
        ,maxHeight:200
        ,valueField : 'val'
        ,displayField : 'name'
        ,store:[
             [1, 'Personnel []']
            ,[11, 'Finance (33)']
            ,[5, 'Door']
            ,[6, 'Door Panel']
            ,[2, 'Management !77']
            ,[38, 'Hello<br>There']
            ,[25, 'Production']
            ,[3, 'Users']
            ,[20, 'Window']
            ,[21, 'Window Panel']
            ,[22, 'Form Panel']
            ,[23, 'Grid Panel']
            ,[24, 'Data View Panel']
        ]
        ,triggerAction:'all'
        ,mode:'local'
    });

    var tf = new Ext.form.TextField({
         //renderTo:'textct'
         id:'tf'
        ,width:300
        ,selectOnFocus:false
        ,listeners:{
            focus:function() {this.setValue(lc.getValue());}
        }
    });

    // window with grid
    var win = new Ext.Window({
         width:600
        ,id:'agwin'
        ,height:400
        ,layout:'fit'
        ,border:false
        ,plain:true
        ,closable:true
        //,title:Ext.get('page-title').dom.innerHTML
        ,items:[lc, tf]
    });
    win.show();
}); 

[dirkc]

I like this component very much!
However for some reason it is not displaying my values in the box, but instead it is displaying undefined.
As I am just starting with Ext js and javascript I am sure it's my mistake.

Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.ns('Example');
Example.version = '1.0';

Ext.override(Ext.ux.form.LovCombo, {
    beforeBlur: Ext.emptyFn
});

// application entry point
Ext.onReady(function() {
    Ext.QuickTips.init();

    var lc = new Ext.ux.form.LovCombo({
         id:'lovcombo'
        //,renderTo:'lovcomboct'
        ,width:300
        ,hideOnSelect:false
        ,maxHeight:200
        ,valueField : 'val'
        ,displayField : 'name'
        ,store:[
             [1, 'Personnel []']
            ,[11, 'Finance (33)']
            ,[5, 'Door']
            ,[6, 'Door Panel']
            ,[2, 'Management !77']
            ,[38, 'Hello<br>There']
            ,[25, 'Production']
            ,[3, 'Users']
            ,[20, 'Window']
            ,[21, 'Window Panel']
            ,[22, 'Form Panel']
            ,[23, 'Grid Panel']
            ,[24, 'Data View Panel']
        ]
        ,triggerAction:'all'
        ,mode:'local'
    });

    var tf = new Ext.form.TextField({
         //renderTo:'textct'
         id:'tf'
        ,width:300
        ,selectOnFocus:false
        ,listeners:{
            focus:function() {this.setValue(lc.getValue());}
        }
    });

    // window with grid
    var win = new Ext.Window({
         width:600
        ,id:'agwin'
        ,height:400
        ,layout:'fit'
        ,border:false
        ,plain:true
        ,closable:true
        //,title:Ext.get('page-title').dom.innerHTML
        ,items:[lc, tf]
    });
    win.show();
}); 

Meanwhile I was able to fix it by changing the valuefield to 'field1' and the displayField to 'field2'.

Thanks & Regards

[docsnyder]

hi,

I was trying out this with Ext 3.3 and noticed that the list of values was empty, after the ComboBox lost focus. I googled myself this code http://extjs.com.br/forum/index.php?...e;topic=2705.0 and it works.

Is it ok to use this code? Or is there any newer/better patch for my problem?

[hazimdikenli]

I am using this w/ 3.3.1
and I included
Ext.ux.form.LovCombo.css,
Ext.ux.util.js,
Ext.ux.form.LovCombo.js

I am not seeing any checkboxes do I need to include anything more? What could be the reason for not seeing the checkboxes.

SOLVED:
ok it seems the css paths were not correct for me.

.ux-lovcombo-icon-checked {
background: transparent url('../images/default/menu/checked.gif');
}
.ux-lovcombo-icon-unchecked
{
background: transparent url('../images/default/menu/unchecked.gif');
}

[i.stojanovic]

How to organize lovcombo list as tree?
I need list with categories (bold or some other style) and subcategories (left padding 20px).
I try to set html tags on element (category work with<b> tag), but if I check element, input field show html source (<b>category name</b>).

please help.

[i.stojanovic]

How to organize lovcombo list as tree?
I need list with categories (bold or some other style) and subcategories (left padding 20px).
I try to set html tags on element (category work with<b> tag), but if I check element, input field show html source (<b>category name</b>).

please help.

Hi again,
I found solution:

1. in Ext.ux.form.LovCombo.css add this
.ux-lovcombo-level--1 { font-weight:bold; } /* category level */
.ux-lovcombo-level-0 { padding-left:0px; } /* defult level */
.ux-lovcombo-level-1 { padding-left:30px; } /* subcategory level */
...


2. in Ext.ux.form.LovCombo.js add this, after checkField:'checked'
,levelField:'0'
and line
+'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>'
change to
+'<div class="ux-lovcombo-item-text ux-lovcombo-level-{' + this.levelField + '}">{' + (this.displayField || 'text' )+ '}</div>'


3. in PHP script or JSON structure add third parameter for level, example:
fields: ['id', 'name', 'level']
store: [['1', 'category', '-1'], ['11', 'subcategory1', '1'], ['12', 'subcategory2', '1']]

4. in lovcombo configuration define levelField, example:
lc_reg = new Ext.ux.form.LovCombo({
id : 'lovcombo_reg',
renderTo : 'regioni',
width : 310,
hideOnSelect : false,
multiple : true,
store : lista_regiona,
valueField : 'id',
displayField : 'name',
levelField : 'level',
triggerAction : 'all',
mode : 'local'
});

and voila,



I houp this is useful.

[hallow]

I've got an interesting situation with IE. I've made a small tweak so that the user can type their list in. Values that are typed will be selected, if they exist in the list.

It works perfectly in firefox. IE (8) however, insits on moving the cursor to the beginning of the text box after the first item is entered (if it matches something in the store). I haven't been able to track down why this is. If I start the field with a comma, it leaves the cursor alone. Once I'm past the first value, the problem doesn't come up (so ,X,Y,Z works). This appears to happen only inside of Form's - inside a grid cell editor, IE works the same as firefox.

This is driving me insane!

[jsakalos]

Once I've solved the similar problem and IIRC it included creating some textRanges, moving cursor, etc. Quite complex...

[gtegos]

When using LovCombo as Column editor in GridPanel, and selecting multiple values in the combo box, the grid cell value is only the first item in the selection. The problem dissapears if removing the space after this.separator in function getCheckedDisplay.

	,getCheckedDisplay:function() {
		var re = new RegExp(this.separator, "g");
		return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');