PDA

View Full Version : [Stable 1.0] LovCombo - Simple List of Values Combo



Pages : [1] 2 3

jsakalos
16 Apr 2008, 11:29 AM
Hi all,

I needed this control for my project. I know that madrabaz has written nice LOV field but that was an overkill as the primary usage should be simple selection of membership of users in several groups.

Give it a try at http://lovcombo.extjs.eu and let me know what you think.

Thanks,

SxOrpheus
16 Apr 2008, 1:05 PM
any change it can transform a normal multiple select list and set the values from the select list (combo)

jsakalos
16 Apr 2008, 1:08 PM
Try transform option of combo, however, I recommend against it. If your server can generate markup it can generate static data for simple store as well.

galdaka
16 Apr 2008, 11:10 PM
Very useful field!!

Lotus Notes developers appreciate it!!

Excellent work Saki!!

wm003
17 Apr 2008, 3:57 AM
very nice widget as always, saki ;)
Thanks again for sharing

JorisA
17 Apr 2008, 4:41 AM
Looks great but I can't open the example page
nslookup results in [...] can't find lovcombo.extjs.eu: Non-existent domain

fabrizim
17 Apr 2008, 4:47 AM
Great extension!

Thanks for sharing, I was just about to start writing something similar. I'm going to use this in a project I'm currently working on. I'll post back if I come across anything.

Best Regards-
Mark

jsakalos
17 Apr 2008, 5:05 AM
Looks great but I can't open the example page
nslookup results in [...] can't find lovcombo.extjs.eu: Non-existent domain
Backup DNS server hadn't correct record - it's corrected now.

mholyszko
17 Apr 2008, 5:08 AM
Hi,

Thanks for great extension.
One thing didn't work for me - selected values were not written to a hidden field given by hiddenName option (as in normal Combo) - and so the field was submitted with empty value. I added following lines at the end of setValue method:



if(this.hiddenField){
this.hiddenField.value = this.value;
}


Regards,
mh

jsakalos
17 Apr 2008, 5:16 AM
You're right. I've corrected it and uploaded.

JorisA
17 Apr 2008, 5:23 AM
Backup DNS server hadn't correct record - it's corrected now.

Thnx works fine now :)
Great extension!

smagen
17 Apr 2008, 8:29 AM
Works nice. But don't work correctly with paging. Values list empty when switch the pages.

jsakalos
17 Apr 2008, 9:10 AM
Do you mean that last values are not retained when you reload page? If so, then it is correct as state management has not been activated on the demo page.

cmendez21
17 Apr 2008, 2:29 PM
Looks pretty nice ..!
but i have a case maybe for future features:

I have a combo which loads by a store (php server side) so i select multiple employees (Oh Oh, the combo has pagination cause there are about 400 employees) can it be possible to remind the selected even if they are in multiple pages or o have to create a simple combo without checkboxes ?


(i think more factible to use it with or without checkboxes just plain value selecction adition not remainder)

1.- Also kinda [2.x] Ext.ux.MultiSelectTextField (outlook/gmail style 'to' field) used to do but last code is long lost
2.- On madrabaz LOV field was too messy cause to remind fields on a grid WOW i have to make a mod in my own but was a mess of code just to make it work

Gonna give a long try on yours :D
By the way congrats for another cool extension =D>

If there's anything i can do to help you just tell me with confidence

jsakalos
17 Apr 2008, 4:44 PM
Looks pretty nice ..!
but i have a case maybe for future features:

I have a combo which loads by a store (php server side) so i select multiple employees (Oh Oh, the combo has pagination cause there are about 400 employees)

LovCombo won't work with pagination - it uses store to keep checked items and each paging erases the original data. That would require different approach.

nkohari
18 Apr 2008, 7:58 AM
This is great! Exactly what I need in my current project. I was going to write one myself, but instead I'll use this. Please continue to develop it!

mholyszko
21 Apr 2008, 5:08 AM
Items are erroneously checked when there are many of them indexed by id (eg. selecting an item with a value of 1 causes an unwanted selection of items with ids of 10, 11... etc.)

A quick&dirty fix:


@@ -208,5 +208,5 @@
this.store.clearFilter();
this.store.each(function(r) {
- var checked = !(!v.match(r.get(this.valueField)));
+ var checked = !(!v.match('(^|' + this.separator + ')' + r.get(this.valueField) + '(' + this.separator + '|$)'));
r.set(this.checkField, checked);
}, this);

jsakalos
21 Apr 2008, 12:21 PM
Maybe quick, sure not dirty and, most important, working.

Thank you very much. Updated, uploaded.

nassaja-rus
21 Apr 2008, 3:24 PM
I'm quicky add selectedField option to config, it is very convenient for me. In dropdown list it show long strings, when I checked items - it show short strings in field body.

jsakalos
21 Apr 2008, 4:15 PM
I'm quicky add selectedField option to config, it is very convenient for me. In dropdown list it show long strings, when I checked items - it show short strings in field body.
Can you rephrase it or post some pictures? I don't get it...

nassaja-rus
21 Apr 2008, 10:25 PM
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, selectedField:short_name for checked items in checkbox field

jsakalos
22 Apr 2008, 12:50 AM
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
6 May 2008, 9:32 AM
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
6 May 2008, 9:36 AM
Re 1: You need both valueField and displayField.
Re 2: You need 2d array, e.g. [[1, '1 ()'],[11, '11 ()']]

jsakalos
6 May 2008, 9:37 AM
http://lovcombo.extjs.eu/source.php?file=lovcombo.js

malord
6 May 2008, 4:01 PM
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
6 May 2008, 4:55 PM
Post please a showcase so I can debug it. Or you have a proposed patch?

mabello
7 May 2008, 5:55 AM
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=4:sw=4:nu:fdc=4:nospell
/**
* Ext.ux.form.LovCombo, List of Values Combo
*
* @author Ing. Jozef Sak

mabello
7 May 2008, 6:26 AM
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
7 May 2008, 6:57 AM
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.

Dumbledore
8 May 2008, 2:53 AM
Wow, really usefull extension!!!!

Any change to get a singleselect property?



Bye, Dumbledore

mabello
8 May 2008, 3:02 AM
Hi Dumbledore,
if for single select you mean what I mean in my previous post, my code just works, but I'm sure Saki is going to integrate my modifies in its code.
But if you are in a hurry, you can try the code I've posted, I think it will work also for you
Cheers

jsakalos
8 May 2008, 11:27 AM
Wow, really usefull extension!!!!

Any change to get a singleselect property?



Bye, Dumbledore
You don't need LovCombo if you want single select. That is fully handled by normal Combo.

jsakalos
8 May 2008, 11:29 AM
Hi Dumbledore,
if for single select you mean what I mean in my previous post, my code just works, but I'm sure Saki is going to integrate my modifies in its code.
But if you are in a hurry, you can try the code I've posted, I think it will work also for you
Cheers

Play a bit with my escape function please; if it works fine I'll incorporate it in code to avoid special characters triggering RegExp functionalities.

mabello
8 May 2008, 1:59 PM
Hi Saki,
your function does not work with somethink like this:

RegExp.escape('Finance

jsakalos
8 May 2008, 2:12 PM
My function doesn't escape ! and =. Are these special RegExp chars? If so I just add 'em...

Anyway, I'll take a look myself.

jsakalos
8 May 2008, 2:26 PM
Yes, ! and = are specials as per http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Objects:RegExp I'm adding them and ? as well - this I've forgotten in the first place.

So the final version is:

jsakalos
8 May 2008, 2:33 PM
Even simpler:

mabello
8 May 2008, 2:38 PM
What about this:


return str.replace(/([.*+?^=!:${}()|[]/])/g, '\\$1');

jsakalos
8 May 2008, 2:44 PM
Yes, that is the final result. (I think that you have all special escaped with \ in the code you posted, right?)

mabello
8 May 2008, 2:50 PM
Maybe what I have found in the previous thread


RegExp.escape = function(text) {

if (!arguments.callee.sRE) {

var specials = [

'/', '.', '*', '+', '?', '|',

'(', ')', '[', ']', '{', '}', '\\', '^', '$', '!', '='

];

arguments.callee.sRE = new RegExp(

'(\\' + specials.join('|\\') + ')', 'g'

);

}

return text.replace(arguments.callee.sRE, '\\$1');

}

could have best performance, following the discussion of the thread I have suggested...not tested yet

jsakalos
8 May 2008, 2:53 PM
I don't care about performance - I'm not going to run that function intensively. Simplicity, resulting in maintainability counts. I'll stick with the last one I've posted.

mabello
8 May 2008, 2:55 PM
And in my previous post, I've simpy used /.../ so that I used a regular expression instead of string and g to enable global property of the regular expression

jsakalos
8 May 2008, 3:01 PM
That last picture I've posted is what we both came to, right?

mabello
8 May 2008, 3:05 PM
Actually no, the return I have proposed is the following:


return str.replace(/([.*+?^=!:${}()|[]/])/g, '\\$1');

It is a little bit simplier, but both solutions work well so far.

jsakalos
8 May 2008, 3:10 PM
It doesn't work because of unescaped [].

jsakalos
8 May 2008, 3:11 PM
BEWARE: Forum Editor strips some backslashes - therefore I've posted pictures.

mabello
8 May 2008, 3:19 PM
Thanks man, you are right! That's the image:

jsakalos
8 May 2008, 3:23 PM
Yeah, I'm buying yours ;) The simpler, the better.

mabello
8 May 2008, 3:30 PM
You have been really kind Saki, thanks again for the extension.
I'm going to work with it, so likely we are going to get in touch again :)
Have a good night (or day).
Marco

jsakalos
8 May 2008, 3:33 PM
Almost same TZ as yours... I'll integrate it to the code tomorrow. Good night.

chalu
9 May 2008, 3:14 AM
Thanks for this great extension. I'll also like u to consider these features :

1. Since we are dealing with a list of values it would be useful to have some config param to determine a minimum as well as maximum selection, perhaps with the combobox minLength and maxLength configs so that when required the user can be made to select a subset of the options by config constraints.

2. Since the extension depends greatly on the valueField and displayField config, we therfore cannot utilize the Ext 2.1 combo store array initializer ability. Thus a lovcombo code like this :


xtype: 'lovcombo',
fieldLabel:'Countries',
hiddenName: 'country',
store:[['us', 'United States'], ['de', 'Germany'], ['fr', 'France'], ['ng', 'Nigeria']],
triggerAction:'all',
mode:'local'


displays nothing for the options since no displayField is specified.

3. I tried adding a 'select all' option to the lovcombo extension code by adding a new Ext.data.Record record as the first selection option but decided against it because of the displayField constraint. Actually because one cannot tell (in the extension, if I am correct) the structure of the records in the store so one cannot know how to format the 'select all' all option in advance.

jsakalos
9 May 2008, 5:13 AM
Re 1: Do you mean that we would set, let's say 2, and user would have to select at least 2 values for LovCombo to become valid?

Re 2: Updated - now you can use Ext 2.1 style of store definition.

chalu
9 May 2008, 5:37 AM
Yes, exactly. With a minLenght of 2 the user has to make at least 2 selections for the input to be valid, and a maxLength of 5 means the user cannot select more the 5 options.

I also tried to add a 'select all' option by inserting a Ext.data.Record record for it into index 0 of the options but it had some issues:

1. The text never shows up, surely because of the displayField constraint (will download the new version now)
2. This seems difficult to do because I don't know if not knowing the 'pattern' of records / fields in the combos store in advance will break things if we just implement our 'select all' option as an array (['all', 'select all']). Unless we will have to provide some config param to allow this and let the implementation decide how this 'select all' option is to be represented internally and textually.
3. I provided hanler for beforeselect event and if the selected option is the 'select all' option then I set the checked stated of all the other options to true and return false if it not the 'select all' option, but need a way to update the UI to reflect this checked state for the other options. The reverse should be done when
the 'select all' option is deselected too.

I have attached a picture of how it originally rendered, also, any suggestions as to why the drop down list is not as wide as the combo textfield (not from lovcombo though, just can't figure why all the combos in that window are like that)

mabello
9 May 2008, 6:32 AM
Hi Saki,
I have integrated the RegExp.escape in your code, I have fixed this.applyEmptyText() that now is called in clearValue and in setValue function I have also added (when I think we need it)


this.el.removeClass(this.emptyClass);


Besides, I have adde the two function selectAll and deselectAll:



,selectAll: function(){
this.store.each(function(record){
// toggle checked field
record.set(this.checkField, true);

}, this);
//display full list
this.doQuery(this.allQuery);
this.setValue(this.getCheckedValue());
}
,deselectAll: function(){
this.store.each(function(record) {
// toggle checked field
record.set(this.checkField, false);

}, this);
// display full list
this.doQuery(this.allQuery);
this.setValue(this.getCheckedValue());
}


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

chalu
9 May 2008, 7:24 AM
Thanks ya'll, Mabello, can this update you just provided handle Ext 2.1 combo store array initializers, saki has added this feature in the download. So I can start using the, 'select all', 'deselect all' and array stores at once.
Thanks again.

mabello
9 May 2008, 7:58 AM
Thanks chalu to keep me up to date :), and thanks Saki to update the code, I will try it.

selectAll and deselectAll works for me, but I'm calling "brutally" doQuery (maybe it could be better only to clear the filter for the store with clearFilter()), also because doQuery in some case actually expand the combo (and I do not know if it is good or not, I would say no).

Besides, selectAll and deselectAll maybe need some beforeselec/deselecttall (that you can cancel) and select/deselectall events...these two methods are just born :)

jsakalos
9 May 2008, 7:58 AM
I've updated the code (with some tweaks); take a look please.

As to mode:'remote' - I didn't even think about it... Possibly I will...

jsakalos
9 May 2008, 7:59 AM
@chalu,

I've just incorporated mabello's code into it.

jsakalos
9 May 2008, 8:02 AM
Thanks chalu to keep me up to date :), and thanks Saki to update the code, I will try it.

selectAll and deselectAll works for me, but I'm calling "brutally" doQuery (maybe it could be better only to clear the filter for the store with clearFilter()), also because doQuery in some case actually expand the combo (and I do not know if it is good or not, I would say no).

Besides, selectAll and deselectAll maybe need some beforeselec/deselecttall (that you can cancel) and select/deselectall events...these two methods are just born :)
I think there is no need to complicate it with beforeallselect events. Only if doQuery really expands list (I've tested briefly and it didn't) we need to comment it out.

Also, I've simplified deselectAll by simply calling clearValue.

chalu
9 May 2008, 8:10 AM
Thanks Mabello, the selectAll and deselectAll additions work very well. I implemented mine by editing the lovcombo example thus:


var lc = new Ext.ux.form.LovCombo({
id:'lovcombo'
,renderTo:'lovcomboct'
,width:300
,hideOnSelect:false
,store:[
[0, 'All'],
[1, 'Personnel']
,[11, 'Finance']
,[2, 'Management']
,[22, 'Production']
,[3, 'Users']
]
,triggerAction:'all'
,mode:'local'
,listeners:{
'beforeselect': function(combo, record, index){
var allowSelect = true;
var myAllOption = combo.store.data.items[0].data;
if((index != 0) && (myAllOption.checked == true)){
allowSelect = false;
}
return allowSelect;
},
'select': function(combo, record, index){
if((index == 0) && (record.data.checked == true)){
combo.selectAll();
}else if((index == 0) && (record.data.checked != true)){
combo.deselectAll();
}
}
}
});


A quick one again, It would be lovely if the 'all' selection option can be implemented such that :
1. We have all options visually selected but only the 'value' of the 'all' option is actually set so that the server code can detect this single value and know that the user indicated all of the options. OR

2. We have all options visually selected and the values of all the now selected options are set as the value of the combo except the 'value' of the 'all' option.

We should not say 'all' and set the value of the combo to both 'all' and the other options values AT THE SAME TIME. I got us a snapshot of the combo too.

Thanks very much again, this is very very useful for what I am developing right now.

mabello
9 May 2008, 8:12 AM
@Saki
Yeah, doQuery actually expands the combo if only and only if this.mode='remote' for the lovcombo instance, but with the workaround I have suggetsed (change the mode from remote to local after the store is loaded) everything works fine.

jsakalos
9 May 2008, 8:22 AM
@chalu,

do you already have a code for that? I'd put it in but there must be a possibility to switch it off and it should be switched off by default.

johnathanhebert
10 May 2008, 7:10 AM
The extension works great, but a minor problem... if I scroll down the list of values and check one, it resets the scrollbar and shows me the top of the list again...

Also, is it possible to set the delimiter because it is not working (the text in the box goes to blank on blur) if my displayFields have a comma in them... thanks

jsakalos
10 May 2008, 10:00 AM
Delimiter (separator) is configurable. Any showcase of the other issue?

johnathanhebert
11 May 2008, 6:19 AM
I believe you will see the problem if you just use your lovcombo example and add about 15 more items to the store so that a scrollbar appears in the dropdown list. Then scroll down to the bottom and check an item... you will see that the lovcombo resets the scrollbar back to the top and thus the item you just checked is back out of sight...

TwystNeko
12 May 2008, 11:59 PM
So, this plugin is exactly what I needed for my application - but I've run into some confusion. I'd like to use it in a EditorGridPanel, and replace the standard ComboBox. I just want to have a list of days - ['mon', 'Monday'] ['tue','Tuesday'] and so forth. I'm pulling this data from an XML file, so I need to initialize it, obviously.

But I'm confused. :((

the current definition is just this:


{
header: 'Days Worked',
dataIndex: 'work',
width: 150,
editor: new Ext.form.TextField({
allowBlank: false
})
}


There's not really a 'renderTo' target, as it's dynamically generated.

The data will be coming in as "mon,tue,wed,thu,fri,sat,sun", or any combination of those.

I realize I'll need to set up a Store to make the correlation between "mon" and "Monday", but how do I populate it? (I'm a relative noob to ExtJS... :)) )

jsakalos
13 May 2008, 1:07 AM
I'd use SimpleStore with static data same as it is in example application of LovCombo at http://lovcombo.extjs.eu (take a look at the source).

sigaref
14 May 2008, 1:33 AM
Hi,

I have the problem, that everytime I open the dropdown and select an item for the first time,
all the checkboxes are flashing =>ON=>OFF (0.1sec or so). This is caused by the setValue method:


this.store.each(function(r) {
var checked = !(!v.match(
'(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))
+'(' + this.separator + '|$)'))
;

r.set(this.checkField, checked); // THIS
}, this);

I think most of the time it is not necessary, to "reset" all the checkboxes, so I have changed the above line to:


if (checked == true)
{
r.set(this.checkField, checked);
}

This has solved the the flashing problem for me, although I am not 100% that this is not causing any strange problems somewhere else :)

Any other ideas for getting rid of the flashing in a more "robust" way?

EDIT: With this "fix" the checks are not resetted when reopening the form. So we need a better solution to solve this :)

mabello
14 May 2008, 2:09 AM
I think though that with your new code then, if you want to call setValue('a','b','c') to check more than one checkbox it won't work, that's my guess, I have not tried...what do you think?

sigaref
14 May 2008, 2:14 AM
I think though that with your new code then, if you want to call setValue('a','b','c') to check more than one checkbox it won't work, that's my guess, I have not tried...what do you think?

That could be possible. I am not using setValue, only checking with mouse. I still have to do some deeper code/functionality research.

mabello
14 May 2008, 2:22 AM
I would suggest you something like this to try:

1)When for a record is called record.set, is called store.afterEdit(this); (Record.js)
2)Method afterEdit of the store, fires "update" event, so I think that for each updated record, the the internal DataView of the LovCombo is refreshed, so you have that behaviour you are describing.
3)To fix the problem (one possible solution), before call store.each, you can suspend the events and then resume the events



this.store.suspendEvents();
this.store.each(function(r) {
var checked = !(!v.match(
'(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))
+'(' + this.separator + '|$)'))
;

r.set(this.checkField, checked); // THIS
}, this);
this.store.resumeEvents();

Now the problem is that after the resumeEvents, you need to find a way so that the store can fire the event "update" that I think it is used by the internal DataView of the LovCombo to refresh the list of values.
EDIT:
you can call after store.resumeEvents() something like:


if(this.view)
this.view.refresh();

jsakalos
14 May 2008, 7:31 AM
Hi,

I have the problem, that everytime I open the dropdown and select an item for the first time,
all the checkboxes are flashing =>ON=>OFF (0.1sec or so).

Could you please post a showcase? I've never see any flashing.

jsakalos
14 May 2008, 7:33 AM
I would suggest you something like this to try:

1)When for a record is called record.set, is called store.afterEdit(this); (Record.js)
2)Method afterEdit of the store, fires "update" event, so I think that for each updated record, the the internal DataView of the LovCombo is refreshed, so you have that behaviour you are describing.
3)To fix the problem (one possible solution), before call store.each, you can suspend the events and then resume the events



this.store.suspendEvents();
this.store.each(function(r) {
var checked = !(!v.match(
'(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))
+'(' + this.separator + '|$)'))
;

r.set(this.checkField, checked); // THIS
}, this);
this.store.resumeEvents();

Now the problem is that after the resumeEvents, you need to find a way so that the store can fire the event "update" that I think it is used by the internal DataView of the LovCombo to refresh the list of values.
EDIT:
you can call after store.resumeEvents() something like:


if(this.view)
this.view.refresh();

Looks like elegant solution. Have you tested it? Does it work fine?

mabello
14 May 2008, 7:56 AM
Saki,
it's only a guess, so I have not tested yet :)

sigaref
14 May 2008, 8:21 AM
Could you please post a showcase? I've never see any flashing.

For testing just replace the LovCombo contructor in your lovcombo.js called from lovcombo.html with the code below.

Problem 1: Firefox2: =>ON=>OFF Flashing on all checkbox when dropdown is opened and first check is done for the first time

Problem 2: IE6: When scrollbar is visible, on every element-mouseover-change the scrollbar gets "recalculated" => short "flashing" again

Thx for this nice Addon, I like it a lot !!!



var store = new Ext.data.SimpleStore({
fields:['name', 'code'],
data: [
[ 'All Countries' , 'ALL' ],

[ 'Germany' , 'DE' ],
[ 'Austria' , 'AT' ],
[ 'Switzerland' , 'CH' ],
[ 'France' , 'FR' ],
[ 'Italy' , 'IT' ],
[ 'Spain' , 'ES' ],
[ 'United Kingdom' , 'GB' ],
[ 'United States' , 'US' ],


[ 'Afghanistan' , 'AF' ],
[ 'Albania' , 'AL' ],
[ 'Algeria' , 'DZ' ],
[ 'American Samoa' , 'AS' ],
[ 'Andorra' , 'AD' ],
[ 'Angola' , 'AO' ],
[ 'Anguilla' , 'AI' ],
[ 'Antarctica' , 'AQ' ],
[ 'Antigua and Barbuda' , 'AG' ],
[ 'Argentina' , 'AR' ],
[ 'Armenia' , 'AM' ],
[ 'Aruba' , 'AW' ],
[ 'Australia' , 'AU' ],
[ 'Azerbaijan' , 'AZ' ],
[ 'Bahamas' , 'BS' ],
[ 'Bahrain' , 'BH' ],
[ 'Bangladesh' , 'BD' ],
[ 'Barbados' , 'BB' ],
[ 'Belarus' , 'BY' ],
[ 'Belgium' , 'BE' ],
[ 'Belize' , 'BZ' ],
[ 'Benin' , 'BJ' ],
[ 'Bermuda' , 'BM' ],
[ 'Bhutan' , 'BT' ],
[ 'Bolivia' , 'BO' ],
[ 'Bosnia and Herzegovina' , 'BA' ],
[ 'Botswana' , 'BW' ],
[ 'Bouvet Island' , 'BV' ],
[ 'Brazil' , 'BR' ],
[ 'British Indian Ocean Territory' , 'IO' ],
[ 'Brunei Darussalam' , 'BN' ],
[ 'Bulgaria' , 'BG' ],
[ 'Burkina Faso' , 'BF' ],
[ 'Burundi' , 'BI' ],
[ 'Cambodia' , 'KH' ],
[ 'Cameroon' , 'CM' ],
[ 'Canada' , 'CA' ],
[ 'Cape Verde' , 'CV' ],
[ 'Cayman Islands' , 'KY' ],
[ 'Central African Republic' , 'CF' ],
[ 'Chad' , 'TD' ],
[ 'Chile' , 'CL' ],
[ 'China' , 'CN' ],
[ 'Christmas Island' , 'CX' ],
[ 'Cocos (Keeling) Islands' , 'CC' ],
[ 'Colombia' , 'CO' ],
[ 'Comoros' , 'KM' ],
[ 'Congo' , 'CG' ],
[ 'Congo, Democratic Republic' , 'CD' ],
[ 'Cook Islands' , 'CK' ],
[ 'Costa Rica' , 'CR' ],
[ 'Cote d\'Ivoire' , 'CI' ],
[ 'Croatia' , 'HR' ],
[ 'Cuba' , 'CU' ],
[ 'Cyprus' , 'CY' ],
[ 'Czech Republic' , 'CZ' ],
[ 'Denmark' , 'DK' ],
[ 'Djibouti' , 'DJ' ],
[ 'Dominica' , 'DM' ],
[ 'Dominican Republic' , 'DO' ],
[ 'East Timor' , 'TL' ],
[ 'Ecuador' , 'EC' ],
[ 'Egypt' , 'EG' ],
[ 'El Salvador' , 'SV' ],
[ 'Equatorial Guinea' , 'GQ' ],
[ 'Eritrea' , 'ER' ],
[ 'Estonia' , 'EE' ],
[ 'Ethiopia' , 'ET' ],
[ 'Falkland Islands (Malvinas)' , 'FK' ],
[ 'Faroe Islands' , 'FO' ],
[ 'Fiji' , 'FJ' ],
[ 'Finland' , 'FI' ],
[ 'French Guiana' , 'GF' ],
[ 'French Polynesia' , 'PF' ],
[ 'French Southern Territories' , 'TF' ],
[ 'Gabon' , 'GA' ],
[ 'Gambia' , 'GM' ],
[ 'Georgia' , 'GE' ],
[ 'Ghana' , 'GH' ],
[ 'Gibraltar' , 'GI' ],
[ 'Greece' , 'GR' ],
[ 'Greenland' , 'GL' ],
[ 'Grenada' , 'GD' ],
[ 'Guadeloupe' , 'GP' ],
[ 'Guam' , 'GU' ],
[ 'Guatemala' , 'GT' ],
[ 'Guinea' , 'GN' ],
[ 'Guinea-Bissau' , 'GW' ],
[ 'Guyana' , 'GY' ],
[ 'Haiti' , 'HT' ],
[ 'Heard and McDonald Islands' , 'HM' ],
[ 'Honduras' , 'HN' ],
[ 'Hong Kong' , 'HK' ],
[ 'Hungary' , 'HU' ],
[ 'Iceland' , 'IS' ],
[ 'India' , 'IN' ],
[ 'Indonesia' , 'ID' ],
[ 'Iran' , 'IR' ],
[ 'Iraq' , 'IQ' ],
[ 'Ireland' , 'IE' ],
[ 'Israel' , 'IL' ],
[ 'Jamaica' , 'JM' ],
[ 'Japan' , 'JP' ],
[ 'Jordan' , 'JO' ],
[ 'Kazakhstan' , 'KZ' ],
[ 'Kenya' , 'KE' ],
[ 'Kiribati' , 'KI' ],
[ 'Kuwait' , 'KW' ],
[ 'Kyrgyzstan' , 'KG' ],
[ 'Lao People\'s Democratic Republic' , 'LA' ],
[ 'Latvia' , 'LV' ],
[ 'Lebanon' , 'LB' ],
[ 'Lesotho' , 'LS' ],
[ 'Liberia' , 'LR' ],
[ 'Libya' , 'LY' ],
[ 'Liechtenstein' , 'LI' ],
[ 'Lithuania' , 'LT' ],
[ 'Luxembourg' , 'LU' ],
[ 'Macau' , 'MO' ],
[ 'Macedonia' , 'MK' ],
[ 'Madagascar' , 'MG' ],
[ 'Malawi' , 'MW' ],
[ 'Malaysia' , 'MY' ],
[ 'Maldives' , 'MV' ],
[ 'Mali' , 'ML' ],
[ 'Malta' , 'MT' ],
[ 'Marshall Islands' , 'MH' ],
[ 'Martinique' , 'MQ' ],
[ 'Mauritania' , 'MR' ],
[ 'Mauritius' , 'MU' ],
[ 'Mayotte' , 'YT' ],
[ 'Mexico' , 'MX' ],
[ 'Micronesia' , 'FM' ],
[ 'Moldova' , 'MD' ],
[ 'Monaco' , 'MC' ],
[ 'Mongolia' , 'MN' ],
[ 'Montserrat' , 'MS' ],
[ 'Morocco' , 'MA' ],
[ 'Mozambique' , 'MZ' ],
[ 'Myanmar' , 'MM' ],
[ 'Namibia' , 'NA' ],
[ 'Nauru' , 'NR' ],
[ 'Nepal' , 'NP' ],
[ 'Netherlands' , 'NL' ],
[ 'Netherlands Antilles' , 'AN' ],
[ 'New Caledonia' , 'NC' ],
[ 'New Zealand' , 'NZ' ],
[ 'Nicaragua' , 'NI' ],
[ 'Niger' , 'NE' ],
[ 'Nigeria' , 'NG' ],
[ 'Niue' , 'NU' ],
[ 'Norfolk Island' , 'NF' ],
[ 'North Korea' , 'KP' ],
[ 'Northern Mariana Islands' , 'MP' ],
[ 'Norway' , 'NO' ],
[ 'Oman' , 'OM' ],
[ 'Pakistan' , 'PK' ],
[ 'Palau' , 'PW' ],
[ 'Palestinian Territory' , 'PS' ],
[ 'Panama' , 'PA' ],
[ 'Papua New Guinea' , 'PG' ],
[ 'Paraguay' , 'PY' ],
[ 'Peru' , 'PE' ],
[ 'Philippines' , 'PH' ],
[ 'Pitcairn' , 'PN' ],
[ 'Poland' , 'PL' ],
[ 'Portugal' , 'PT' ],
[ 'Puerto Rico' , 'PR' ],
[ 'Qatar' , 'QA' ],
[ 'Reunion' , 'RE' ],
[ 'Romania' , 'RO' ],
[ 'Russian Federation' , 'RU' ],
[ 'Rwanda' , 'RW' ],
[ 'Saint Kitts and Nevis' , 'KN' ],
[ 'Saint Lucia' , 'LC' ],
[ 'Saint Vincent and the Grenadines' , 'VC' ],
[ 'Samoa' , 'WS' ],
[ 'San Marino' , 'SM' ],
[ 'Sao Tome and Principe' , 'ST' ],
[ 'Saudi Arabia' , 'SA' ],
[ 'Senegal' , 'SN' ],
[ 'Seychelles' , 'SC' ],
[ 'Sierra Leone' , 'SL' ],
[ 'Singapore' , 'SG' ],
[ 'Slovakia' , 'SK' ],
[ 'Slovenia' , 'SI' ],
[ 'Solomon Islands' , 'SB' ],
[ 'Somalia' , 'SO' ],
[ 'South Africa' , 'ZA' ],
[ 'South Georgia and The South Sandwich Islands' , 'GS' ],
[ 'South Korea' , 'KR' ],
[ 'Sri Lanka' , 'LK' ],
[ 'St. Helena' , 'SH' ],
[ 'St. Pierre and Miquelon' , 'PM' ],
[ 'Sudan' , 'SD' ],
[ 'Suriname' , 'SR' ],
[ 'Svalbard and Jan Mayen Islands' , 'SJ' ],
[ 'Swaziland' , 'SZ' ],
[ 'Sweden' , 'SE' ],
[ 'Syria' , 'SY' ],
[ 'Taiwan' , 'TW' ],
[ 'Tajikistan' , 'TJ' ],
[ 'Tanzania' , 'TZ' ],
[ 'Thailand' , 'TH' ],
[ 'Togo' , 'TG' ],
[ 'Tokelau' , 'TK' ],
[ 'Tonga' , 'TO' ],
[ 'Trinidad and Tobago' , 'TT' ],
[ 'Tunisia' , 'TN' ],
[ 'Turkey' , 'TR' ],
[ 'Turkmenistan' , 'TM' ],
[ 'Turks and Caicos Islands' , 'TC' ],
[ 'Tuvalu' , 'TV' ],
[ 'Uganda' , 'UG' ],
[ 'Ukraine' , 'UA' ],
[ 'United Arab Emirates' , 'AE' ],
[ 'United States Minor Outlying Islands' , 'UM' ],
[ 'Uruguay' , 'UY' ],
[ 'Uzbekistan' , 'UZ' ],
[ 'Vanuatu' , 'VU' ],
[ 'Vatican' , 'VA' ],
[ 'Venezuela' , 'VE' ],
[ 'Vietnam' , 'VN' ],
[ 'Virgin Islands (British)' , 'VG' ],
[ 'Virgin Islands (U.S.)' , 'VI' ],
[ 'Wallis and Futuna Islands' , 'WF' ],
[ 'Western Sahara' , 'EH' ],
[ 'Yemen' , 'YE' ],
[ 'Yugoslavia' , 'CS' ],
[ 'Zambia' , 'ZM' ],
[ 'Zimbabwe' , 'ZW']
]});


var lc = new Ext.ux.form.LovCombo({
id:'lovcombo'
,renderTo:'lovcomboct'
,width:300
,hideOnSelect:false
,store: store
,displayField : 'name'
,valueField : 'code'
// ,store:new Ext.data.SimpleStore({
// id:0
// ,fields:[{name:'id',type:'int'}, 'privGroup']
// ,data:[
// [1, 'Personnel']
// ,[11, 'Finance']
// ,[2, 'Management']
// ,[22, 'Production']
// ,[3, 'Users']
// ]
// })
,triggerAction:'all'
// ,valueField:'id'
// ,displayField:'privGroup'
,mode:'local'
});

jsakalos
14 May 2008, 8:24 AM
Thanks guys, I'll take a look during weekend; have another things to do until then...

graveyardfashions
15 May 2008, 12:28 PM
Okay, now I really do have a problem.

The field appears, I can check items in it, and can save. Terrific! :) But, when I want to return to the page and display the field with the previously-saved items, I'm having troubles.

Here's my store:


var phoneStore = new Ext.data.SimpleStore({
fields:[{name:'id',type:'int'}, {name:'phone',type:'string'}],
data:[
[0, 'Select All'],
[1, '800-550-6114 x1111'],
[13, '800-550-6114 x1313'],
[14, '800-550-6114 x1414'],
[2, '800-550-6114 x2222'],
[3, '800-550-6114 x3333'],
[4, '800-550-6114 x4444'],
[5, '800-550-6114 x5555'],
[6, '800-550-6114 x6666'],
[10, '800-550-6114 x7100'],
[12, '800-550-6114 x7102'],
[11, '800-550-6114 x7103'],
[7, '800-550-6114 x7777'],
[8, '800-550-6114 x8888'],
[9, '800-550-6114 x9999']
]
});


I've tried each of the following:


// does nothing
lc.setValue('800-550-6114 x1111');
lc.setValue('800-550-6114 x2222');
lc.setValue('800-550-6114 x4444');




// does nothing
lc.setValue('800-550-6114 x1111','800-550-6114 x2222','800-550-6114 x4444');




// selects only the first value
lc.setValue('1');
lc.setValue('2');
lc.setValue('4');




// selects only the last value
lc.setValue('1','2','4');


I've even tried updating the store to have a "checked" column:


var phoneStore = new Ext.data.SimpleStore({
fields:[{name:'id',type:'int'}, {name:'phone',type:'string'}, {name:'checked',type:'bool'}],
data:[
[0, 'Select All'],
[1, '800-550-6114 x1111', true ],
[13, '800-550-6114 x1313', false ],
[14, '800-550-6114 x1414', false ],
[2, '800-550-6114 x2222', true ],
[3, '800-550-6114 x3333', false ],
[4, '800-550-6114 x4444', true ],
[5, '800-550-6114 x5555', false ],
[6, '800-550-6114 x6666', false ],
[10, '800-550-6114 x7100', false ],
[12, '800-550-6114 x7102', false ],
[11, '800-550-6114 x7103', false ],
[7, '800-550-6114 x7777', false ],
[8, '800-550-6114 x8888', false ],
[9, '800-550-6114 x9999', false ]
]
});


I'm hoping this is something extremely simple that I'm just overlooking. Help?

Best wishes,
Cat

jsakalos
15 May 2008, 12:35 PM
Navigate to http://lovcombo.extjs.eu and in FB console type the following:

Ext.getCmp('lovcombo').setValue([1,11,2])
Ext.getCmp('lovcombo').setValue()
Ext.getCmp('lovcombo').setValue('1,11,2')


Now see what is different in your case.

graveyardfashions
15 May 2008, 12:43 PM
Of *course* it is an array and needs brackets. Why did I spend so long on this?? Darn brackets. *kicks the brackets*

I'll leave my post up there in case it helps anyone else.

Thank you, sweetie! Great job on the extension. :)

Best wishes,
Cat

jsakalos
15 May 2008, 12:51 PM
You can also use delimited string '1,2,3,4'

nescha
19 May 2008, 6:18 AM
I'm trying to use mask loading for your component. Is this possible at all?
I attached mask to the store with:


new Ext.LoadMask(lovcomboMenu, {
store: lovcomboMenuStore,
removeMask: true
});

but it won't work.
BTW. Nice component

paparent
27 May 2008, 6:44 AM
Hello,

Nice component. I'm using it in one of my project and plan to use it for many-to-many relation in other projects as well. the only thing is that I miss a point.

I'm now able to save the data from the via save action with the "hiddenName" config. But how can i handle the load action ? I tried different name for the fields (soussections2 for the lovcombo, soussections for the hidden field, and my post.php get the soussections field and my fetch.php send the soussections2 field but it doesn't work.

Any help plz ?



...
,{xtype:'lovcombo',fieldLabel:'Sous-sections',name:'soussections',anchor:'100%',hiddenName:'soussections',hideOnSelect:false,triggerAction:'all',mode:'remote',valueField:'id',displayField:'nom'
,store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'fetch.php',method:'POST'})
,baseParams: {what:'soussections'}
,reader: new Ext.data.JsonReader({root:'rows', totalProperty:'results'}, Fields
})
}
...

jsakalos
27 May 2008, 6:54 AM
Am I right if I say that you have troubles to load the lovcombo's store? If so, can you load stores of normal combos? Just to find out if the problem is lovcombo specific...

paparent
27 May 2008, 7:02 AM
Hi Saki,

No, it's not the store, but the value..

I fill in the form with that:



this.getForm().load({url:'fetch.php', params:{what:'produitinfos',id:id}, scope:this});


It's JSON, all the other field get loaded but not the lovcombo.

jsakalos
27 May 2008, 7:04 AM
You (or underlying Ext) are perhaps trying to setValue before the store is loaded. You should do so from a store's load event listener.

paparent
27 May 2008, 7:25 AM
Hi,

Thanks, it works now. but my solution looks like a big hack! lol

I've a class extending a FormPanel, with a doLoad() function.
so in the caller I do something like that:



t = new App.ProduitForm({id:pre+id,produitid:id,title:g.store.getAt(rowIndex).data['nom']});
t.on('saved', function(q){tpMain.remove(q);}, this);
t.on('loaded', function(){t.doLoad(id);}, this);


Before, I just execute the doLoad outside of the loaded event but now, that event (loaded) is fired by the internal data store for the lovcombo. Yeah I know, dirty hack.

Any idea for a cleaner solution ?

SxOrpheus
28 May 2008, 1:20 AM
Is there allready a solution for the flickering??. When I have many choices +15 and press one of the last choiches. The list seems to reset and sets the bar to the top again.

I tried to figure it out myself but no luck so far.

jsakalos
28 May 2008, 1:51 AM
Not yet, I'm putting it to the todo list.

nebbian
29 May 2008, 12:37 AM
Hi,

Thanks for some great code, it's very useful.

However I've found some problems with it. Here they are:

1) It doesn't behave properly when loading information from a gridPanel that uses mapping and dataIndex. If I use a combo then it works fine. LovCombo initially just has nothing selected, although it saves info just fine.
I've just spent around three hours chasing down what's going on. It appears as if the setValue function is being called initially with the displayField of the underlying record, instead of the valueField. So instead of "1,3,5" getting passed to setValue, it's receiving "Door, Bench, Drawer". However when LovCombo calls setValue, it uses valueFields.
My solution was to put the following into SetValue:



// Set v to something sensible for initializing...
if(this.initializedValue == 'false')
{
this.initializedValue = 'true';

var vArray=v.split(", ");

var va = [];
this.store.clearFilter();
this.store.each(function(r) {
for ( var i in vArray )
{
if(vArray[i] == r.get(this.displayField))
{
va.push(r.get(this.valueField));
};
}
}, this);
v = va.join(this.separator);
}


Of course, for this to work you need to put the following code into the definition:

,initializedValue:'false'
.. and also put this line at the end of onRealBlur:

this.initializedValue = 'false'; // Dirty hack :-(


2) If your data store contains two items that are similar, and you have one of them selected, then LovCombo will select the other one as well when the onRealBlur function is called. For example, if you have two items called "Door End Panel" and "Door", and you select "Door End Panel" then "Door" will be added to the list.

My solution for this is as follows:

Replace the onRealBlur function with this one:


,onRealBlur:function() {
this.list.hide();
var v = this.getRawValue();

var vArray=v.split(", ");

var va = [];
this.store.clearFilter();
this.store.each(function(r) {
for ( var i in vArray )
{
if(vArray[i] == r.get(this.displayField))
{
va.push(r.get(this.valueField));
};
}
}, this);


this.setValue(va.join(this.separator));

this.initializedValue = 'false'; // Dirty hack :-(

} // eo function onRealBlur Note the dirty hack to solve the first problem as well.
Also note that you really shouldn't have commas in any of your display fields. I don't know what would happen then...



Many thanks for your code, it looks like it's working now, except that the tickboxes aren't visible. I think that this is a problem with my setup, not your code though.

jsakalos
29 May 2008, 8:28 AM
Re 1: shouldn't happen once the store is loaded. If grid really contains value (1,2,5) and not display then I do not see any real reason why it shouldn't work. I haven't tested it with grid though.

Re 2: I see the problem. The loop should stop on first match. I'll fix it.

jsakalos
29 May 2008, 8:32 AM
One more thing to 2)... It's not so easy... Now it matches also partial strings user may have typed. I have no solution for "similar (partially) same" items yet.

cojas99
29 May 2008, 10:33 AM
I am trying to use lovCombo inside of a tabPanel. The first(active) Panel Loads fine -the others do not. The combo box is wider than it should be and the drop down list of values is very narrow. I've been reading forum posts all morning and I have found similar issues with normal combobox inside of tabs. I think this problem was solved by using lazyRender, layoutOnTabChange:true or deferredRender: false. I've tried adding these to my tabs without any success. Any help would be greatly appreciated.

jsakalos
29 May 2008, 3:55 PM
http://examples.extjs.eu/?ex=tabsinform

nitznitz
1 Jun 2008, 5:26 AM
Hi!

I loved your LOV :) I have looked for this exact solution and since I am not familiar with JS I could not do it myself.

I am using GWT & GWT-Ext.

Have can I use you JS LOV from GWT/Gwt-Ext/Gwt-ux?


thanks!

jsakalos
1 Jun 2008, 5:27 AM
No idea, I don't use GWT.

Dumbledore
2 Jun 2008, 4:40 AM
Hi Saki,

when use your component i ran into a small problem. I am not sure that the problem is in your code or in Ext.

I have a large list. When pressed the trigger button i have to scroll to see the last item. When i click one of the items the item will be checked and the list will scroll up to the first entry.

How can i stop this behaviour?

Bye, Dumbledore

Dumbledore
2 Jun 2008, 5:25 AM
and another Problem:

when you have following JSON (value= categorie_id, text = categorie_text):


[
{"id":"2","categorie_text":"DSL","categorie_description":"DSL","categorie_id":"2"},
{"id":"3","categorie_text": "DSL-Hardware","categorie_description":"DSL-Hardware oder Netzwerkkomponenten","categorie_id":"3"}
]


And you choose in the LovCombo the id:3 -> DSL-Hardware. After you close the combo the id:2 (DSL) is also checked. There must be a problem when the text-entries begins with the same words...

Any ideas?

Bye, Dumbledore

nebbian
3 Jun 2008, 11:51 PM
Hi Dumbledore,

The following should fix your problem (I was having similar issues with entries called "Door" and "Door Panel"). Use at your own risk though... ;)

Saki:
Many thanks for making this code open source, you have really helped the community with your efforts. You're a legend! =D>

Others:
This code also allows a selector (singleOnly: 'true' ) when creating the LovCombo so that you can get it to only select one value. This makes it behave like an Ext.form.ComboBox, except that it behaves a bit better... I was having trouble with ComboBoxes returning text values instead of the ID of a field if you don't actually select anything and just get it to return what it was initialised with. LovCombo doesn't have this problem.

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

jsakalos
4 Jun 2008, 1:02 AM
@nebbian,

what happens when you type part of the item? The original idea was that LovCombo accepts partially typed items. Also, you split by ", " (comma plus space) but separator is configurable.

jsakalos
4 Jun 2008, 1:05 AM
I've made some fix for "multiple checked values". Can somebody test it please?

nebbian
4 Jun 2008, 5:28 AM
Hi Saki,

Yes I'm not saying that this snippet is up to the standard of the rest of your code, or that it will work for anyone else apart from me... but it might steer someone else in the right direction.

I don't know about typing partial words in, to be honest I never use this. A combo box that doesn't falsely select entries is more useful to me than one that allows autocomplete.

Once again thanks for sharing your code, it's made my project work a lot better B)

jsakalos
4 Jun 2008, 5:33 AM
@nebbian,

could you please test the current version of LovCombo if the issue is fixed? I've sacrificed partially typed texts for non-doubling entries.

Let me please know if it works now.

Cheers,
Saki

nebbian
4 Jun 2008, 5:36 AM
Hi Saki,

I can test it in around 12 hours (away from that machine at the moment). I'll test it and get back to you then.

jsakalos
4 Jun 2008, 5:39 AM
No problem nebbian, no need to hurry... :)

Dumbledore
4 Jun 2008, 10:00 AM
I've made some fix for "multiple checked values". Can somebody test it please?

for me it seems to work. Any change to get a fix for the jump behaviour with IE when checked a item at the end of a long list?

I did not study the source but i know that the IE have this behaviuor when use a '#' in href of a <a> tag.

Bye, Dumbledore

jsakalos
4 Jun 2008, 11:01 AM
To tell truth, I'm quite lame when IE is concerned. Does normal combo behave same if you configure it with onSelect:Ext.emptyFn?

nebbian
4 Jun 2008, 5:07 PM
Hi Saki,

Yes, the multiple values bug is now fixed. When I select "Door end panel" with your old code, it will then select "Door" as well. The new code only selects "Door end panel" which is the correct behaviour.

There are other issues with my implementation though (LovCombo doesn't automatically tick items in the list when bound to a record in a gridPanel), which are 'fixed' in the code I posted.

Thanks mate!

Dumbledore
4 Jun 2008, 9:33 PM
Hi,


To tell truth, I'm quite lame when IE is concerned. Does normal combo behave same if you configure it with onSelect:Ext.emptyFn?

the normal combo runs fine. I figure out that this line is the reason for the behaviour:


// display full list
this.doQuery(this.allQuery);

When i debug with firebug this.allQuery is allways emtpy!? In the moment i comment out the line and it seems that all runs fine :-?

SxOrpheus
4 Jun 2008, 11:09 PM
To tell truth, I'm quite lame when IE is concerned. Does normal combo behave same if you configure it with onSelect:Ext.emptyFn?

The same problem also occurs on firefox.

jsakalos
5 Jun 2008, 1:54 AM
I've made further enhancements that should also fix "scroll to top on select" bug.

Test it now please.

Dumbledore
5 Jun 2008, 3:19 AM
I've made further enhancements that should also fix "scroll to top on select" bug.

Test it now please.

NICE!!!! It works for me!

SxOrpheus
5 Jun 2008, 4:22 AM
I've made further enhancements that should also fix "scroll to top on select" bug.

Test it now please.


Works like a charme tested on firefox only. Thankx a lot for the fix. How did you fix it?

jsakalos
5 Jun 2008, 4:32 AM
Take a look at the source... ;)

SxOrpheus
5 Jun 2008, 4:51 AM
Take a look at the source... ;)

I was so stupid to overwrite the old code, and I don't have any backup of the extensions in use. Which is again stupid:">

But to be complete:

I have tested the extension on firefox 2.0.0.14 and works like it should.
Also tested on Microsoft Internet Explorer 6.0.290 SP2 and works also like it should.

jsakalos
5 Jun 2008, 8:01 AM
Perfect! Thank you all for reporting both bugs and successes. Without you my extensions would never be what they are.

jsakalos
6 Jun 2008, 1:27 AM
Stable ver. 1.0 is out.

After all recent fixes and improvements I've decided to release stable version 1.0 of LovCombo.

Enjoy!

mystix
6 Jun 2008, 8:41 AM
@jsakalos,

congrats on the 1.0 release :)

off-topic: with so many of your extensions floating around, have you considered hosting them in an SVN repository @ extjs.eu?
it'll be a whole lot easier than having to upload each version of a plugin to various forum threads. just a thought ;)

jsakalos
6 Jun 2008, 1:23 PM
I have them in an svn but it is not, and will not be, publicly available. I've solved the uploading with GNU make command so I just issue
make install and in a couple of seconds new *.zip, *.tar.bz2 and *tar.gz are created and they are uploaded to *.extjs.eu. It's no overhead in fact.

Should you be interested in that contact me via PM or skype and I can show you some of Makefiles.

Cheers,
Saki

ntulip
11 Jun 2008, 1:03 PM
This was awesomely easy to implement and saved my "***".

Thank you,
Nick
=;

Hi all,

I needed this control for my project. I know that madrabaz has written nice LOV field but that was an overkill as the primary usage should be simple selection of membership of users in several groups.

Give it a try at http://lovcombo.extjs.eu and let me know what you think.

Thanks,

vlados
12 Jun 2008, 3:49 AM
Hi Saki,
I tried to use your nice extension with store but when i click outside the LovCombo it clears the value of the field

What I am doing wrong?



var propertyType = new Ext.ux.form.LovCombo({
id:'lovcombo',
width:170,
hideLabel:true,
maxHeight:200,
store:stores.type,displayField:"tip",valueField:"id",hiddenName:'tip',typeAhead:true,
triggerAction:'all',mode:'local',emptyText:'Тип на имота'
});

stores.type = new Ext.data.Store({
url: FOLDERS.domainRoot+'data.php?action=get&useQuery=1',
reader: new Ext.data.JsonReader(
{totalProperty: 'totalCount',root: 'data'},
[{name: 'id'},{name: 'tip'}]
)
});
stores.type.load();

ry.extjs
12 Jun 2008, 2:31 PM
When I submit a form with a LovCombo, the value that's getting POST'ed to my PHP url is the display value, not the hidden value. Is there a way around this, or am I missing something?

jsakalos
12 Jun 2008, 2:57 PM
Do you set hiddenName? Same applies for normal combo.

jsakalos
12 Jun 2008, 2:59 PM
Hi Saki,
I tried to use your nice extension with store but when i click outside the LovCombo it clears the value of the field

What I am doing wrong?



var propertyType = new Ext.ux.form.LovCombo({
id:'lovcombo',
width:170,
hideLabel:true,
maxHeight:200,
store:stores.type,displayField:"tip",valueField:"id",hiddenName:'tip',typeAhead:true,
triggerAction:'all',mode:'local',emptyText:'Тип на имота'
});

stores.type = new Ext.data.Store({
url: FOLDERS.domainRoot+'data.php?action=get&useQuery=1',
reader: new Ext.data.JsonReader(
{totalProperty: 'totalCount',root: 'data'},
[{name: 'id'},{name: 'tip'}]
)
});
stores.type.load();



Try to turn off typeAhead. If it doesn't help post a complete showcase please. Also, compare where you code differs from example code http://lovcombo.extjs.eu

vlados
12 Jun 2008, 11:58 PM
I'm sorry. The problem was in the data from the store. After 1 hour in debug I found my error. Sorry for the misunderstanding!

vlados
13 Jun 2008, 6:58 AM
Can you provide some documentation or something or to tell me how is the right way to setValue(). I tried combo.setValue("2,3,4") but it only clears the combo

jsakalos
14 Jun 2008, 3:52 AM
Documentation is in the comments of the source.

wvuong
16 Jun 2008, 3:49 PM
great extension! it works for me pretty well for the most part except in internet explorer 6 where the dropdown's overflow isn't being hidden properly in the case of where the combo's width is smaller than the text involved. renders fine in firefox though, of course.

anyone have any ideas? this is stock ext 2.0.2 css.

jsakalos
17 Jun 2008, 12:40 AM
Doctype in IE? ... I have no other clue ...

wvuong
17 Jun 2008, 7:19 AM
Doctype in IE? ... I have no other clue ...

no doctype specified like what the wiki suggests. this occurs in ie6 and ie7. if you have the time, here's a test case:



<html>
<head>
<title>Example</title>
<script type="text/javascript" src="../ext-2.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-2.0.2/ext-all-debug.js"></script>
<script type="text/javascript" src="../js/contrib/Ext.ux.form.LovCombo.js"></script>

<link rel="stylesheet" type="text/css" href="../ext-2.0.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../css/Ext.ux.form.LovCombo.css" />

<script type="text/javascript">
Ext.onReady(function(){
var attrstore = new Ext.data.SimpleStore({
storeId: 'CGR',
id: 1,
name: 'Cultural Group Categories',
valueType: 'list',
fields: ['label', 'value'],
data: [["African-American","AFR"],["Anglo-American","ANG"],["Arab-American (includes Middle East and N. Africa)","ARB"],["Asian-American (includes Proper and Southeast)","ASN"],["Caribbean-American","CAR"],["Euro-American","EUR"],["Pacific Islander & American Indians","IAI"],["Jewish-Americans","JEH"],["Latino-Americans","LAT"],["Middle Asian-Americans","MAS"],["Mediterranean-Americans","MED"],["Multiethnic","MTE"],["No Cultural Group (No cultural group label has been used in this item)","NCG"]]
});

var dd = new Ext.ux.form.LovCombo({
autoCreate: true,
fieldLabel: 'lovcombo',
store: attrstore,
multiSelect: true,
displayField: 'label',
valueField: 'value',
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
hiddenName: 'dd-hidden',
anchor: '90% -18'
});

var viewport = new Ext.Viewport({
layout:'border',
items: [
new Ext.Panel({region: 'north', html: 'header'}),
new Ext.FormPanel({region: 'west', width: 170, labelAlign: 'top', split: true, items: [dd]}),
new Ext.Panel({id: 'center', region: 'center'}),
new Ext.Panel({region: 'east', html: 'east', width: 170})
]
});
});
</script>
</head>

<body>

</body>

</html>


i'm sure it's just a css overflow issue but i'm having a hard time figuring out all of the ie css quirks and workarounds.

ry.extjs
17 Jun 2008, 7:54 AM
I'm having an issue with initial values not being displayed correctly in the dropdown list, but being correct in the display field. I'm not sure what the deal is. I'm using the same control for another part of the application and it works just fine with multiple initial values.

Check out the attachments to see what I'm talking about.

lovcombo1.jpg (first image) - This shows what I see when the window appears. Looks good...

lovcombo2.jpg (second image)- This is what I see when I click on the trigger. Value shows in field, but not in dropdown. Hmmm.....

lovcombo3.jpg (third image) - After clicking elsewhere in the window and causing the dropdown to hide, this is what I see when I click on the trigger again. Looks fine...

Any help is appreciated.

BTW, I'm using Ext.ux.form.LovCombo.js 285 2008-06-06 09:22:20Z downloaded from your website.

EDIT: Just a FYI, the other LovCombo that works properly is using a local SimpleStore, while the one not working correctly is using a remote JsonStore. The store seems to load initally when the window gets shown, and again when I click on the trigger for the first time. Perhaps this has something to do with it.

mabello
17 Jun 2008, 9:00 AM
I had the same problem time ago.
I'm using a modified version of LovCombo, mine is OUT OF DATE, so be carefull...I had the same problem, but I do not remember how I fixed it...
[PHP]
// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Ext.ux.form.LovCombo, List of Values Combo
*
* @author Ing. Jozef Sak

wvuong
17 Jun 2008, 10:51 AM
ok it seemed that ie didn't like the list-item template that used the tiny s.gif and background image and that caused the overflow not to work properly. this is the template that i used:



var lovtpl =
'<tpl for=".">'
+'<div class="x-combo-list-item ux-lovcombo-icon-'
+ '{[values.' + 'checked' + '?"checked":"unchecked"' + ']}">'
+'<div class="ux-lovcombo-item-text">{label}</div>'
+'</div>'
+'</tpl>';


and this was my styling:



<style>
.ux-lovcombo-icon-checked {
background: transparent url(../ext-2.0.2/resources/images/default/menu/checked.gif) !important;
background-position: -1px -1px ! important;
background-repeat:no-repeat ! important;
}
.ux-lovcombo-icon-unchecked {
background: transparent url(../ext-2.0.2/resources/images/default/menu/unchecked.gif) !important;
background-position: -1px -1px ! important;
background-repeat:no-repeat ! important;
}
.ux-lovcombo-item-text {
margin-left: 16px;
width: 100%;
}

.x-combo-list-item {
width: 100%;
}

.x-combo-selected {
background-color: #DFE8F6 !important;
}
</style>


:"> the code and css looks like crap at the moment but that's the basic gist of my workaround. looks fine in ie6 and firefox at the moment.

jsakalos
18 Jun 2008, 2:20 AM
I'm having an issue with initial values not being displayed...


Most likely the LovCombo store is not loaded yet at the time you (or Ext) call setValue.

bt_bruno
18 Jun 2008, 12:08 PM
I've updated the code (with some tweaks); take a look please.

As to mode:'remote' - I didn't even think about it... Possibly I will...

First of all, congratulations! The extension is soo much usefull that it had been included on my actual project. Just one problem : I only use combo with remote load.

Soo I've tested it. It works. But when I do a query (as you said) the store is cleaned up and new record's are add. All my "checked" records are gone.:((

I thought a way too save the checked records BEFORE they're gone. Something like, save in an object, I don't know.

Any suggestion?

jsakalos
18 Jun 2008, 3:38 PM
Listen to store load event and switch the store to combo to local mode upon first load.

bt_bruno
19 Jun 2008, 3:51 AM
In some cases it would work. But I have situations with 1.000.000 registers and the "combo filter thing" is necessary in this case.

Soo, the remote thing must work. I'm going to work with it today and I'll let you know about my results. :)

Cheers.

jsakalos
19 Jun 2008, 11:04 AM
Well, I'm not sure if you can use LovCombo for this purpose. My basic design premise was that typical usage would be, let's say, for a tagging system, or for adding 2-10 items from out of 10-100 choices. Having 1,000,000 choices calls for typical 1:n:m:1 sql server side relationship.

Efex
19 Jun 2008, 1:50 PM
Hi Saki, hope you can help me on this.

Before your excellent LovCombo I was using a regular one.
When I selected one value of the combo it called an event that filters a SimpleStore of a second combo to show only values related to the first selection on first combo.

I'm trying to do this with the LovCombo but I can't figure it out :(

If I only select one value it filters the SimpleStore just fine, but when I select multiple values, the second combo appear empty :(

I've also tried to run a loop with each, but I guess it also doesn't work because on the first element the Store is filtered and with the second one, it won't find any match.

Can you give me some light to make this work?? Anybody?

Efex
19 Jun 2008, 2:48 PM
Please ignore my request :)

I have just solved my problem.
I did it by using filterBy instead of just filter
Here's the code in case it may help others:



Art_CatStore.filterBy(function(stval){
var el = stval.get('cod_categoria');
var ret = false;
Ext.each(aps, function(val) {
//alert(val);
if(el == val) ret=true;
});
return ret;
});



Don't know if that's the best way to do it so, if somebody has a better way please let me know

jsakalos
19 Jun 2008, 2:51 PM
You will need a custom filtering function for the second combo. LovCombo returns string, e.g. '1,8,32'. You need to parse this string into individual values that would be used in that custom function.

tobiu
19 Jun 2008, 8:52 PM
I had the same problem time ago.
I'm using a modified version of LovCombo, mine is OUT OF DATE, so be carefull...I had the same problem, but I do not remember how I fixed it...


,setValue:function(v) {
if(v) {
v = '' + v;
if(this.valueField) {
this.store.clearFilter();
this.store.each(function(r) {
// var checked = !(!v.match(r.get(this.valueField)));
var stringValue = RegExp.escape(r.get(this.valueField));
var checked = !(!v.match('(^|' + this.separator + ')' + stringValue +'(' + this.separator + '|$)'));//really stupid, I can get rid of the RegExp in this case
r.set(this.checkField, checked);
}, this);
this.value = this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if(this.hiddenField) {
this.hiddenField.value = this.value;
}
}
else {...

I think Saki has not considered to use Lovcombo with remote store...
Let me know


Hi Saki,

a big compliment on this plugin, it is great.
i tried it out quite a bit and hope you will add the code of mabello in some way.

the reason i needed it is the following: i need the box to be loaded like other form-elements.



myForm.getForm().load({params:{id:5}});


that generates a json-string like



{
field1:"test", // just a textField
hiddenNameOfLovCombo: 1,3,4
}


with the original code, only the entry with id 1 gets checked, with mabellos version it is possible to load multiple entries. i think the problem is the regex-parsing that kills the seperators -> here ",".


kind regards, tobiu

jsakalos
20 Jun 2008, 1:37 AM
Wait a min... I still don't get the problem. Load uses setValue to set combo's value and it accepts either string "1,5,3" or array [1,5,3]. If you go to demo page and in FB console execute:

Ext.getCmp('lovcombo').setValue('1,3,5'); // or
Ext.getCmp('lovcombo').setValue([1,3,5]);

you get expected result. If there is a problem, do you have any public link that demonstrates it?

Efex
20 Jun 2008, 11:20 AM
Thank's Saki.
I found the solution as you may have read :)

By the way, could you help me commenting on this wich is regarding your 1:n relationship solution but applying directly to a column?
http://extjs.com/forum/showthread.php?p=184630#post184630

brenda
22 Jun 2008, 11:10 PM
This works great! :D Thanks Saki

I have a little embarrassing moment though.. :">

For the past 20-30min I could not get the checkboxes to be displayed and almost wanted to post a SOS post here...

I decided to do a thorough check on my codes and all before I post a help note and guess what? it turns out that I've a typo error; Ext.ux.form.LoveCombo.css instead of Ext.ux.form.LovCombo.css :">

jsakalos
23 Jun 2008, 2:04 AM
I like that it is your Love Combo. ;)

nescha
25 Jun 2008, 10:06 AM
Nice component, though, very limited options for many purposes.
I have a request to collapse item list when mouse cursor leaves object container.
I tried with every possible combination of mouseout, mousemove, mouseover events, attached to list.shadow.el, view.container, view.el, and getEl() of component itself.
I managed to make it work correctly under FF (with some exceptions handling transitions from list back to input component where it didn't collapse it with mouseout).
Unfortunately, this didn't work in IE.
I also tried with mousemove and handling cursor positions, but this also didn't work properly in IE for left position.
Can you give me any suggestion, solution, proper direction how to achieve this

jsakalos
25 Jun 2008, 11:51 AM
I haven't done it before... Nothing else that you already tried comes to my mind.

BuckBazooka
26 Jun 2008, 4:40 AM
Hi Saki,

This is REALLY nice. It will be very useful for my project. This approach is usable as is for a part of the problems I am trying to solve.

Also few things which, I think, could be very useful:
- allow user to enter a text even if it is not in the datasource
- allow the possibility to use a text area instead of an input field for these list which may give a long result.
- allow the user to edit the text field after he has selected some items. I have noticed in the current implementation that if I delete in the edit box a field which I had selected in the checkbox list the change will not be reflected in the associated checkbox.

One implementation (jquery) I am thinking about is found on this page: http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/

I would need this because I would like my users to enter a list of email addresses. I would like my program to autocomplete emails which it already knows, and records email addresses which I don't yet know.

Thanks for your fantastic work! I love EXTJS.

nescha
26 Jun 2008, 9:16 AM
Nice component, though, very limited options for many purposes.
I have a request to collapse item list when mouse cursor leaves object container.
I tried with every possible combination of mouseout, mousemove, mouseover events, attached to list.shadow.el, view.container, view.el, and getEl() of component itself.
I managed to make it work correctly under FF (with some exceptions handling transitions from list back to input component where it didn't collapse it with mouseout).
Unfortunately, this didn't work in IE.
I also tried with mousemove and handling cursor positions, but this also didn't work properly in IE for left position.
Can you give me any suggestion, solution, proper direction how to achieve this

I implemented one solution for the mentioned problem. This will trigger collapsing lovCombo when you exit the list or leave the input field. This is tested under FF3 and IE7, with some basic parameters.


var expandEventLovComboAutoCollapse: function(lovcombo) {
lovcombo.wasDown = false;
if (('undefined' == typeof(lovcombo.hasMouseEvents)) || !lovcombo.hasMouseEvents) {
var onMouseOutInput = function(e) {
if (lovcombo.isExpanded()) {
if (lovcombo.wasDown) {
lovcombo.wasDown = false;
lovcombo.collapse();
} else {
var inputTop = lovcombo.view.container.dom.offsetTop - lovcombo.wrap.dom.offsetHeight + 2;
var inputRight = lovcombo.view.container.dom.offsetLeft + lovcombo.view.container.dom.offsetWidth - 2;
var inputLeft = lovcombo.view.container.dom.offsetLeft + 2;
if ((e.xy[0] <= inputLeft) || (e.xy[0] >= inputRight) || (e.xy[1] <= inputTop)) {
lovcombo.wasDown = false;
lovcombo.collapse();
} else if (e.xy[1] <= (lovcombo.view.container.dom.offsetTop - 2)) {
lovcombo.wasDown = true;
}
}
}
};
var onMouseMoveList = function(e) {
lovcombo.wasDown = true;
};
var onMouseOutShadow = function(e) {
if (lovcombo.isExpanded() && lovcombo.wasDown) {
lovcombo.wasDown = false;
lovcombo.collapse();
}
};
lovcombo.wrap.addListener('mouseout', onMouseOutInput, lovcombo);//input
lovcombo.view.container.addListener('mousemove', onMouseMoveList, lovcombo);//list
lovcombo.list.shadow.el.addListener('mouseout', onMouseOutShadow, lovcombo);//shadow
lovcombo.hasMouseEvents = true;
}
}

var lovcombo = new Ext.ux.form.LovCombo({
...
listeners: {
expand: function() {
expandEventLovComboAutoCollapse(this);
}
});

vishalg
2 Jul 2008, 3:14 PM
I think I have found a bug.

The LovCombo generates an output with the following format : [Value1],[space][Value2] but expects the following input (i.e for setValue() ) : [Value1],[Value2].

This is a problem for me because I need to save the comma separated values in a database and then read it back when the user tried to edit that form, and since the two formats are different it only matched the first Value when setting it directly from the database.

To generate this problem try the following commands in your demo site.
Ext.getCmp('lovcombo').setValue('5, 6'); Doesn't Work
Ext.getCmp('lovcombo').setValue('5,6'); Works

jsakalos
2 Jul 2008, 3:17 PM
No, no...

5,6 is separator separated list of values and
Personal, Finance is good looking list of words representing list values

They are not the same thing.

vishalg
2 Jul 2008, 3:59 PM
Thanks for the reply,

I was able to find my mistake. I was using the "name: inputName". Which posted the raw value from the visible combo (Value1, Value2).

I was able to fix this by using the attribute "hiddenName: inputName", whcih posts the (Value1,Value2) now its in sync and I can save and reload the form without loosing any data.

ps: im not using key:value as my store I only have one value.

Thanks.

nebbian
2 Jul 2008, 8:18 PM
Hi Saki,

Just came across a problem, if the text in the combo has a regex reserved character, then the LovCombo dies in the onBeforeQuery function.

Line 166 should be replaced with this one:
qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), '');


(Note the RegExp.escape)

Cheers

jsakalos
2 Jul 2008, 11:46 PM
Yes, you're right. Updated.

Thank you for pointing out. :)

george.antoniadis
3 Jul 2008, 12:50 AM
I'm trying to figure out how to make this play nice with by transforming an html select box with multiple selections.
The transformation played nice but only the first value gets selected.

This is a quick and dirty solution to this...

Right after
,initComponent:function() {Add:
if(this.transform)
{
var s = Ext.getDom(this.transform);
var d = [], opts = s.options;
for(var i = 0, len = opts.length;i < len; i++){
var o = opts[i];
var value = (Ext.isIE ? o.getAttributeNode('value').specified : o.hasAttribute('value')) ? o.value : o.text;
if(o.selected) {
d.push(value);
}
}
var transformValueTemp = d.join(this.separator);
}and also right after:
this.onLoad = this.onLoad.createSequence(function() {
if(this.el) {
var v = this.el.dom.value;
this.el.dom.value = '';
this.el.dom.value = v;
}
});Add this:

if(this.transform)
{
this.setValue(transformValueTemp);
}This should loop through the select box values, get the selected ones and then join them and set the value.
Once the combobox actually transforms the original DOM doesn't exist so we need to do the loop before that.
And then after everything is ready set the value.

Seems to work pretty ok, I'll test it more as I go work with it.

Saki do you think it can go someplace else? :/
Thanks for a great extension! :D

mystix
3 Jul 2008, 12:52 AM
Hi Saki,

Just came across a problem, if the text in the combo has a regex reserved character, then the LovCombo dies in the onBeforeQuery function.

Line 166 should be replaced with this one:
qe.query = qe.query.replace(new RegExp(RegExp.escape(this.getCheckedDisplay()) + '[ ' + this.separator + ']*'), '');


(Note the RegExp.escape)

Cheers

if i'm not wrong RegExp.escape() isn't supported by IE.

@nebbian, type this into IE6's address bar:


javascript:RegExp.escape('hello world');

and hit enter. voila -- script error.

it's safer to just use Ext.escapeRe().

ry.extjs
3 Jul 2008, 6:13 AM
Listen to store load event and switch the store to combo to local mode upon first load.

Just letting you know that this technique works great for remote stores. Simply load the store, set the LovCombo.mode to local, then use the setValue method.

Thanks!

jsakalos
3 Jul 2008, 1:09 PM
if i'm not wrong RegExp.escape() isn't supported by IE.

@nebbian, type this into IE6's address bar:


javascript:RegExp.escape('hello world');
and hit enter. voila -- script error.

it's safer to just use Ext.escapeRe().

I'm adding escape method to RegExp object at the beginning of the code - any problem with it in IE?

mystix
4 Jul 2008, 3:25 AM
ah ok. if you're conditionally adding that method to RegExp() then there's no issue. didn't read your code at all :">

rails_user
7 Jul 2008, 1:12 AM
Hi,

Does this component work inside a EditorGridPanel?

Thanks

jsakalos
7 Jul 2008, 4:26 AM
I haven't tried it personally but it should work in EditorGrid as normal combo does.

mthad
7 Jul 2008, 5:04 AM
Very useful field!!

Lotus Notes developers appreciate it!!

Excellent work Saki!!


could some one please explain me where should i add these below source files?
View Sources:
Ext.ux.form.LovCombo.js (http://lovcombo.extjs.eu/source.php?file=js/Ext.ux.form.LovCombo.js)
Ext.ux.form.LovCombo.css (http://lovcombo.extjs.eu/source.php?file=css/Ext.ux.form.LovCombo.css)
lovcombo.html (http://lovcombo.extjs.eu/source.php?file=lovcombo.html)
lovcombo.js (http://lovcombo.extjs.eu/source.php?file=lovcombo.js)
lovcombo.css (http://lovcombo.extjs.eu/source.php?file=css/lovcombo.css)

jsakalos
7 Jul 2008, 5:25 AM
The best is to download the whole example and try to run it from your server.

mthad
7 Jul 2008, 5:34 AM
The best is to download the whole example and try to run it from your server.

Just downloaded and i want to impement the same functionality in my project. My question was where should i reference the files?

if I write like this


var reactionSearch = new Ext.ux.form.LovCombo({
store: dsReaction,
id:'reactionCombo',
displayField:'reaction',
valueField: 'reactionID',
typeAhead: true,
typeAheadDelay: 0,
loadingText: 'Searching...',
width: 475,
pageSize:10,
hideTrigger:true,
tpl: resultTpl,
applyTo: 'Reaction',
itemSelector: 'div.search-reaction-item',
emptyText:'Select.....',
hiddenId:'reactionCombo',
hiddenName: 'reactionCombo',
editable:true,
selectOnFocus:true,
style: 'color: black;',
minChars: 2,
forceSelection:false,
listeners: {
beforeselect : function() {
//findIndex();
Ext.getCmp('reactionCombo').clearValue();
}
}

});

i get "Microsoft JScript runtime error: 'Ext.ux.form.LovCombo' is null or not an object"

please advise me. thanks

jsakalos
7 Jul 2008, 9:55 AM
First of all, use Firefox 2.x + Firebug 1.0x for debugging. Javascript files are included in the head of the page in <script> tags. See some working Ext page for an example.

evelynloo
8 Jul 2008, 1:06 AM
I have some problem while running the example, the firebug show the error,
1) snapshot has no properties
2) this.store.on is not a function

and i meet some problem when using the plugin, it did not show any check box beside the item.

the source code

var lc = new Ext.ux.form.LovCombo({
id:'lovcombo',
width:170,
hideLabel:true,
maxHeight:200,
store : new Ext.data.SimpleStore({
id:0
,fields:[{name:'id',type:'int'}, 'privGroup']
,data:[
[1, 'Personnel']
,[11, 'Finance']
,[2, 'Management']
,[22, 'Production']
,[3, 'Users']
]
}),
displayField:'privGroup',
valueField:"id",
hiddenName:'tip',
typeAhead:true,
triggerAction:'all',
mode:'local'
});


did anyone know wat the problem is ?

jsakalos
8 Jul 2008, 6:52 AM
First of all, LovCombo is not plugin, it is the extension. See http://blog.extjs.eu/know-how/extension-or-plugin/ for explanation. Then, when you start with running an example on your server the first step should be to run in unmodified. Once you succeed then modify it step by step to fit your needs.

Error messages are most likely related to a wrong scope.

mthad
8 Jul 2008, 7:57 PM
I have the same problem unable to see the checkbox. And also unable to run the sample code.



var reactionSearch = new Ext.ux.form.LovCombo({

store: dsReaction,
id:'lovcombo',
displayField:'product',
valueField: 'productID',
typeAhead: true,
typeAheadDelay: 0,
loadingText: 'Searching...',
width: 475,
pageSize:10,
hideTrigger:false,
//tpl: resultTpl,
applyTo: 'Reaction',
itemSelector: 'div.search-reaction-item',
emptyText:'Select a productReaction...',
hiddenId:'productCombo',
hiddenName: 'productCombo',
editable:true,
selectOnFocus:true,
style: 'color: black;',
minChars: 2,
forceSelection:false,
triggerAction:'all',
hideOnSelect:false,
renderTo:'lovcomboct'
});
var Myextension = Ext.extend(Ext.ux.form.LovCombo, reactionSearch );

mystix
8 Jul 2008, 8:25 PM
@mthad:

Please learn how to post your code in
tags. /:)
thus far, you've made no attempt to do so.
(refer to http://extjs.com/forum/misc.php?do=bbcode)

jsakalos
8 Jul 2008, 9:53 PM
Check path in Ext.BLANK_IMAGE_URL and check if you include Ext.ux.form.LovCombo.css.

mthad
9 Jul 2008, 5:48 AM
Check path in Ext.BLANK_IMAGE_URL and check if you include Ext.ux.form.LovCombo.css.


I checked and both are in place. No luck :(.
i couldn't find "ux-lovcombo-item-text"


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>'
;

in Ext.ux.form.LovCombo.css

jsakalos
9 Jul 2008, 3:02 PM
It is not defined by default. If you want to style your text, define it. Anyway, it is not related to checkboxes. Check if paths in Ext.ux.form.LovCombo.css point to valid files in your installation. Adjust them if not.

jarnix
18 Jul 2008, 3:07 AM
really great extension thank you ! =D>

BuckBazooka
18 Jul 2008, 4:11 AM
Hi,
I also believe that it is a great extension. I am really tempted to use it in my current project. It suits very well but there is one detail which stops me from using it.

If you type for example: "Door" you have the two choices "Door" and "Door Panel". If you check both of them, and then you click in the value you get 5 and 6. That is great. Now if you remove the text "Door Panel" excluding the separating comma, and you click somewhere in the window, you get an edit box with only "Door,". Now if you click on the value you still have 5 and 6 selected.

The problem that I have with this implementation is basically that I see scenarios where the edit box in the combobox shows valid selection which do not always corresponds to values returned.

I think that even if the user does not really know the exact way how to use this combobox, it should return always the values corresponding to what he sees in the edit box.

I am searching for a way to have a combobox which would accept many values, something a bit like the scriptaculous Ajax.Autocompleter but a solution all in ExtJS.

Thanks for all this fantastic work. Cheers

jsakalos
18 Jul 2008, 10:55 AM
I couldn't reproduce the behavior you describe. Beware, text box beneath the LovCombo is updated on focus - when you click that text box.

sean.zhou
25 Jul 2008, 12:49 PM
When Ext.ux.form.LovCombo is used in a EditorGridPanel, its tab-out goes to a different widget on screen instead of going to the next editable cell. This happens when the multi-selection window is popped up. To make the tab-out to close the popped up selection window and focus on the next editable cell, there needs to change in two places. One is at Ext.ux.form.LovCombo.initEvents()



Ext.override(Ext.ux.form.LovCombo, {
initEvents:function() {
Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);

this.keyNav.tab = function(e){
this.mimicing = false;
Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur);
if(this.monitorTab){
this.el.un("keydown", this.checkTab, this);
}
this.beforeBlur();
this.wrap.removeClass('x-trigger-wrap-focus');
this.onRealBlur(e);
}

} // eo function initEvents
});


This override ensures that LovCombo.onRealBlur() is called to close off the selection window and tab out correctly. Removing mimicBlur() from mousedown event ensures that a mouse click elsewhere afterwards will not trigger mimicBlur() on the combobox.

Hope this solution will be validated by ExtJs team and be committed to the next release.

The other modification is at Ext.Editor.onSpecialKey(), which is discussed in thread http://extjs.com/forum/showthread.php?t=41273.

stive
3 Aug 2008, 10:29 PM
Hi,
Thanks for your great extension!!
One thing did not work to me,there is no checkBox before the options in the LovCombo but a blank before them.The others work well.I did not find the reason .

I am looking forword your help!!

jsakalos
3 Aug 2008, 11:25 PM
Have you included Ext.ux.form.LovCombo.css (http://lovcombo.extjs.eu/source.php?file=css/Ext.ux.form.LovCombo.css)?

hui2008
4 Aug 2008, 3:06 AM
hi all,

I use lovcombo,like code

{
xtype:'lovcombo',
fieldLabel: 'label',
triggerAction:'all',
store:new Ext.data.Store ({proxy:new Ext.data.HttpProxy({url:"./php/action.php"}),baseParams: {task:"readowner"},
reader:new Ext.data.JsonReader({root:'rows',id:'KeyField',fields:[{name:'KeyField'},{name:'DisplayField'}]})}),
displayField:'DisplayField',
valueField:'KeyField',
hiddenName:'copyto',
shadow:false,
emptyText:'choose',
anchor:'95%'
}

reader:new Ext.data.JsonReader({
totalProperty:'totalCount'
,root:'rows'
,fields: [
{name: 'id'}
, {name: 'short_desc'}
, {name: 'project'}
, {name: 'owner'}
, {name: 'status'}
, {name: 'priority'}
, {name: 'copyto'}
, {name: 'category'}
]
}),

I find this lovcombo could not load data, who can help me?

jsakalos
4 Aug 2008, 11:25 AM
What is "could not load data"? Is the request sent? What comes from server? Does it load into store? Or is there a loadexception? Etc.... The best is to take normal Ext combo, make it working and then change it to LovCombo. This way you can easily isolate if the problem is LovCombo specific.

hui2008
4 Aug 2008, 4:51 PM
What is "could not load data"? Is the request sent? What comes from server? Does it load into store? Or is there a loadexception? Etc.... The best is to take normal Ext combo, make it working and then change it to LovCombo. This way you can easily isolate if the problem is LovCombo specific.

Dear jsakalos,

I use Ext combo is normal,look pic B;but lovCombo is not normal, look pic A;

I use lovCombo in my edit formpanel, not in increase formpanel, so first formpanel need to load edit data for all fields.

The all code is this:


show_TK = Ext.extend(Ext.Panel,{
initComponent:function(){
Ext.apply(this,{
items:new Ext.form.FormPanel({
id:'tt_edit_form',
reader:new Ext.data.JsonReader({
totalProperty:'totalCount'
,root:'rows'
,fields: [{name: 'copyto']
}),
items: [{
xtype:'lovcombo',
fieldLabel: 'label',
triggerAction:'all',
store:new Ext.data.Store ({proxy:new Ext.data.HttpProxy({url:"./php/action.php"}),baseParams: {task:"readowner"},
reader:new Ext.data.JsonReader({root:'rows',id:'KeyField',fields:[{name:'KeyField'},{name:'DisplayField'}]})}),
displayField:'DisplayField',
valueField:'KeyField',
hiddenName:'copyto',
}]
}]
}]
})
});
show_TK.superclass.initComponent.apply(this, arguments);
},
onRender:function(){
show_TK.superclass.onRender.apply(this,arguments);
Ext.getCmp('tt_edit_form').getForm().load({url:'./php/action.php'});
}});
Ext.reg('show_TKT',show_TK);

stive
4 Aug 2008, 6:43 PM
Hi,
Thanks for your great extension!!
One thing did not work to me,there is no checkBox before the options in the LovCombo but a blank before them.The others work well.I did not find the reason .

I am looking forword your help!!

thank you for your reply !!

I have solve the problem , the point is that your image's url is not same as mine
the way you change checked status is very good

thank for you help!!

jsakalos
5 Aug 2008, 12:24 AM
@hui2008, I still don't know where's problem. You have answered none of my questions. So only guess.

Store must be loaded before you call setValue, otherwise you won't see text but value. You load form onRender but is the LovCombo store loaded at that time?

hui2008
5 Aug 2008, 12:54 AM
@hui2008, I still don't know where's problem. You have answered none of my questions. So only guess.

Store must be loaded before you call setValue, otherwise you won't see text but value. You load form onRender but is the LovCombo store loaded at that time?

Yes this is the question. I don't know how to load store before call setValue.

Could you tell me?
Thank you very much!

jsakalos
5 Aug 2008, 12:57 AM
There was a lot of discussion on the subject and I personally replied to several of them. Search forums please.

hui2008
5 Aug 2008, 1:04 AM
There was a lot of discussion on the subject and I personally replied to several of them. Search forums please.

apologize my poor english, I have searched forums, but not find.Could you tell me the keywords?

Thank you very much!

hui2008
5 Aug 2008, 3:24 PM
Who can help me?

thank you

hui2008
5 Aug 2008, 5:21 PM
Store must be loaded before you call setValue, otherwise you won't see text but value.

Dear Sakalos,

I confirm cant't see text and value. look pic

The pic A code:

{
xtype:'combo',
fieldLabel: 'label',
triggerAction:'all',
store:new Ext.data.Store ({proxy:new Ext.data.HttpProxy({url:"./php/action.php"}),baseParams: {task:"readowner"},
reader:new Ext.data.JsonReader({root:'rows',id:'KeyField',fields:[{name:'KeyField'},{name:'DisplayField'}]})}),
displayField:'DisplayField',
valueField:'KeyField',
hiddenName:'copyto',
shadow:false,
emptyText:'empty',
anchor:'95%'
}
The pic B code

{
xtype:'lovcombo',
fieldLabel: 'label',
triggerAction:'all',
store:new Ext.data.Store ({proxy:new Ext.data.HttpProxy({url:"./php/action.php"}),baseParams: {task:"readowner"},
reader:new Ext.data.JsonReader({root:'rows',id:'KeyField',fields:[{name:'KeyField'},{name:'DisplayField'}]})}),
displayField:'DisplayField',
valueField:'KeyField',
hiddenName:'copyto',
shadow:false,
emptyText:'empty',
anchor:'95%'
}

According to your answer, at least I can see the value("1, 5"), but can't see.
You can test it.
I confirm this is the lovcombo question.

jsakalos
5 Aug 2008, 11:02 PM
In that case, post working showcase, please. (http://extjs.com/forum/showthread.php?p=184897#post184897)

hui2008
6 Aug 2008, 1:22 AM
In that case, post working showcase, please. (http://extjs.com/forum/showthread.php?p=184897#post184897)

Dear jsakalos,

Thanks for your reply, your mean is that it can use "beforeload" solution?
Yes,I test it, it can solution this question.

But I find the lovcombo can't show value(not text) when loaded, is it not a bug? I advise you test it.

I think use "beforeload" is not a good idea, because it can't lazy load, Some times I don't need load all data of lovcombo, I only need display the value of lovcombo.

Thanks!

jsakalos
6 Aug 2008, 11:51 AM
I cannot do anything if you do not post a runnable showcase. Also, I do not fully get what do you want to tell me with "beforeload"...

hui2008
6 Aug 2008, 5:24 PM
I cannot do anything if you do not post a runnable showcase. Also, I do not fully get what do you want to tell me with "beforeload"...

Dear jsakalos,

According to your lovcombo, I write a test example.You can test it, and find if the store use "new Ext.data.Store", lovcombo can't show the default value.

I write three example, first can't show value, but second and third can show value.
I hope the first lovcombo can show "5", because I write [value:'5'].

jsakalos
6 Aug 2008, 11:53 PM
Yes, it is because the store is not loaded until you click the trigger. This is behavior of normal combo too and it has been discussed many times before.

This is one of the solutions:


var lc1 = new Ext.form.ComboBox({
id:'lovcombo1'
,renderTo:'lovcomboct1'
,store:store
,displayField:'DisplayField'
,valueField:'KeyField'
,triggerAction:'all'
,listeners:{
render:{single:true, fn:function(combo) {
combo.store.on('load', function() {combo.setValue(5)}, {single:true});
combo.store.load();
}}
}
});

hui2008
7 Aug 2008, 2:19 AM
Yes, it is because the store is not loaded until you click the trigger. This is behavior of normal combo too and it has been discussed many times before.

This is one of the solutions:


var lc1 = new Ext.form.ComboBox({
id:'lovcombo1'
,renderTo:'lovcomboct1'
,store:store
,displayField:'DisplayField'
,valueField:'KeyField'
,triggerAction:'all'
,listeners:{
render:{single:true, fn:function(combo) {
combo.store.on('load', function() {combo.setValue(5)}, {single:true});
combo.store.load();
}}
}
});



Thank you very much!

RhythmFighter
12 Aug 2008, 7:27 PM
Thanks for the great contrib. I would like to be able to define a different "Display" separator and "Value" separator. I've looked over the source and tried some things in the setValue function, but don't seem to be getting anywhere. Any pointers on where to start with this? Thanks!

RhythmFighter
13 Aug 2008, 5:14 AM
Thanks for the great contrib. I would like to be able to define a different "Display" separator and "Value" separator. I've looked over the source and tried some things in the setValue function, but don't seem to be getting anywhere. Any pointers on where to start with this? Thanks!

OK, I think i solved this one myself. For those interested:

Added v_separator property...



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


Then, in the setValue function, made the following modification:



if(this.hiddenField) {
var re = new RegExp(this.separator, 'gi');
this.hiddenField.value = this.value.replace(re,this.v_separator);
}


Seems to work for me as of now.

Rothariger
14 Aug 2008, 4:31 AM
Hi saki...

I’m bothering you again :D

here’s my problem, I don’t know if I’m doing fine (and if the lovCombo will resolve it) the thing is, that I have a recordform (obviously with a grid) and in the grid it shows the ids, and it doesn’t show the description.

Is there any way that the lovcombo with the .editor property resolves automatically?

Thanks... bye!

jsakalos
14 Aug 2008, 8:46 AM
Grid displays what it is told to display in ColumnModel; it has nothing to do with editor. You may need a custom renderer that will translate values to texts from combo store or another mechanism to display texts from values.

Rothariger
14 Aug 2008, 11:10 AM
ok... thanks!

skbach
15 Aug 2008, 12:27 PM
Saki,

I noticed a small bug with the lovcombo.

If the combo is in remote mode, and you load the datastore manually using loadrecord, when the user clicks on the combo to initiate another load, the initial values that were in the control are lost.

So, If you load the combo using a store from the server and then set the values using a delimited string, everything works as expected.

But if instead of going to the server, you load the datastore manually (loadrecord), and then you set the values of the combo, they are not checked inside of the control. They still appear in the text field seperated by commas, but there are no checkboxes selected.


var record = { totalCount: internalArray.length, results: internalArray };
store.loadData(record);

If you scroll down on the combo a couple times, THEN the values will become set.

Hope that's clear enough :).

jsakalos
16 Aug 2008, 6:11 AM
LovCombo is extension of Ext.form.Combobox and as such it depends on its store and its behavior is same as normal combo behavior. Try to repeat your tests with normal combo.

skbach
16 Aug 2008, 10:54 AM
Sure Saki, I'll give that a try.

The thing is: the values DO get set, so I think the Combo part is working. If you call getValues() you'll get the expected delimited string. BUT, the checkboxes are not CHECKED. So if you have 3 items selected when you load, and then you check an item in the list, only one item will now appear in the textbox portion.

I suspect it's a UI issue with the lov because the store and the values portion IS working correctly.

sk

jsakalos
16 Aug 2008, 1:27 PM
The thing is that LovCombo adds a field to the store so you need to pass value of that additional field too. Please read the source to understand the logic.

skbach
16 Aug 2008, 2:11 PM
K, thanks Saki.

futurezhang
19 Aug 2008, 9:38 PM
great extention!
what I want to know is when it has cross page selecting function. if not the pageSize property is waste.when number of items is large ,it can not work very well.
thanks!

jsakalos
20 Aug 2008, 12:29 AM
No, this extension doesn't support paging combos.

rarerules
25 Aug 2008, 11:24 AM
A while back, someone mentioned the IE6 scrollbar flashing bug:


Problem 2: IE6: When scrollbar is visible, on every element-mouseover-change the scrollbar gets "recalculated" => short "flashing" again

Any updates on fixing this? I also have this problem.

Thanks Saki, this is an amazing extension.

jsakalos
25 Aug 2008, 11:39 AM
AFAIK nobody yet.

futurezhang
26 Aug 2008, 12:33 AM
The thing is that LovCombo adds a field to the store so you need to pass value of that additional field too. Please read the source to understand the logic.

could you please give an example?I setValue() when I load the store,but the checkbox was not checked?
thanks !

store.on('load',function(){Ext.getCmp('Combox').setValue('1,4')},{checkField:'checked'})
sorry to interupt you!!!!

jsakalos
26 Aug 2008, 12:52 AM
setValue doesn't take second argument. Post please your complete showcase that I can run/debug locally.

futurezhang
26 Aug 2008, 5:33 PM
setValue doesn't take second argument. Post please your complete showcase that I can run/debug locally.



Ext.onReady(function(){
var basepanel= new Ext.FormPanel({
labelWidth: 100,
frame:true,
renderTo:Ext.getBody(),
bodyStyle:'padding: 0',
width:700,
autoHeight:300,
items:[
{
xtype:'lovcombo',
fieldLabel:'人员',

store:new Ext.data.Store({
proxy : new Ext.data.HttpProxy( {
url : 'base/findUser.action'
}),
reader : new Ext.data.JsonReader({
root : 'list',
totalProperty : 'totalSize'
}, [{name:'id'},{name:'name'}])
}),
width:220,
valueField :"id",
displayField:"name",
msgTarget:'under',
hiddenName:'Obj.Ids',
triggerAction: 'all',
allowBlank:false,
emptyText:'请选择...'
}]
});
});


my page is add this panel in a window,when the window is shown,I set the lovcombo initial value.I use Ext.getCmp('').setValue('1,4');
it is not working,the checkedBox was not checked

jsakalos
26 Aug 2008, 11:43 PM
Is your statement really Ext.getCmp('')? 'Cause this method takes id as argument. Please check what your getCmp returns. Is that reference to LovCombo?

Dumbledore
27 Aug 2008, 2:48 AM
Hi Saki,

why is this in there? I want to use your Extension as a Grid-Editor and the store will be filtered before the Editor apears. Then the user should only checked values from the filtered store, but you clear the filter when get the Values. Why?



,clearValue:function() {
this.value = '';
this.setRawValue(this.value);
this.store.clearFilter();
this.store.each(function(r) {
r.set(this.checkField, false);
}, this);
if(this.hiddenField) {
this.hiddenField.value = '';
}
this.applyEmptyText();
} // eo function clearValue



Bye, Dumbledore

jsakalos
27 Aug 2008, 6:27 AM
Because the store is filtered as you type to show only matching values. I would filter the store server-side or I would create a snapshot of the filtered one be in your shoes.

futurezhang
27 Aug 2008, 6:15 PM
Is your statement really Ext.getCmp('')? 'Cause this method takes id as argument. Please check what your getCmp returns. Is that reference to LovCombo?

yeah,it is reference to LovCombo.simply,I want set the initial value of a lovcombo which the value is from the server.that is to say the value is an varible.

jsakalos
27 Aug 2008, 11:41 PM
OK, post your current code together with json that server returns, I'll take a look.

mankz
28 Aug 2008, 1:16 AM
Hi saki, thanks for a great plugin.

I just tried dropping a LOV-combo in a toolbar, it works but with some weird scrollbar behaviour. The vertical scrollbar resizes itself on every mousemouse event. Is their some kind of css fix I can do to fix this? (This only applies to IE7, FF3 works perfect)

Thanks again!

jsakalos
28 Aug 2008, 6:18 AM
First question in IEx issues is always: Do you use a doctype? If so, remove it.

mankz
28 Aug 2008, 6:29 AM
Hehe, actually adding a doctype solved my problem =D> Thanks I guess ;)

Great plugin btw!

Dumbledore
28 Aug 2008, 8:54 AM
Because the store is filtered as you type to show only matching values. I would filter the store server-side or I would create a snapshot of the filtered one be in your shoes.

ahh.. ok... Now i filter serverside...

Thanks for explanation


Bye, Dumbledore

chalu
29 Aug 2008, 8:07 AM
It's been a while since I was here, I don't know if any one has added a 'select all' / 'deselect-all' configuration usage (I know it's suported in LovCombo, that's why I said configuration usage). I have done something in this respect but it still has issues,
when you select the 'All' option it's value is added to the list of values. Instead this should be configurable so that :


clicking the select all option selects all other options and combo's text value and internal value is set to the values all the options except that of the select all option
clicking the select all option does not not select all the other options, but the developer can see its value and know that the user selected the select all option


How about a minimum selection / maximum selection constrain. Cheers

chalu
29 Aug 2008, 9:48 AM
My work so far on select-all / deselect-all

EasyEl
30 Aug 2008, 4:28 AM
Thanks for this great plugin. I use it in dynamically generated form-tabs and it is working quite well. I wired it up to accept preloading data from a JSONstore (update scenario).

What happens though is that it will not work when a hiddenField is defined. As soon as you put in a hiddenField definition the Lov-Combobox (will call it LCB from here on) will not be populated with data. As a workaround I have now implemented an additional Event that fires on after setValue so that I can hook into it and fill a hiddenField myself. If anyone is interested I can post the code here.

Long story short - the only issue that is remains is that the LCB gets confused when there are multiple form-tab instances containing other LCB

jsakalos
30 Aug 2008, 7:42 AM
You cannot use one store for more than one LCB. Information if an item is checked is kept in the store. As to hiddenField, it sounds strange - do you have a showcase that I could run and debug locally?

EasyEl
3 Sep 2008, 12:27 AM
S O L V E D -> see post below

Hi Saki.

Have you been able to test the demo project I sent you via PM?

thanks,
El

EasyEl
3 Sep 2008, 4:22 AM
In case you happen to have mulitple forms and multiple occurrences of a lov-combo that share the same basic preloaded values but should have individual selections - this will not work with the way that the combobox is set up - here is an easy workaround to get it working WITHOUT having to do multiple backend calls etc.:

Set up a root store that preloads the data from your server


var rootStore = new Ext.data.JsonStore({
url: Base.JsonBase
,autoLoad: true
,remoteSort: true
,fields: ['id', 'name']
});
After load (listen to it by attaching an event handler for example) instantiate your forms and define the comboBoxes store like so:



, store:
new Ext.data.JsonStore({
data: rootStore.reader.jsonData
,fields: ['id', 'name']
})
This will work properly with form databinding and you will be able to share the data between multiple lov-combo instances.

The hiddenField issue persists but I have a working workaround for this as mentioned in an earlier post.

cheers,
El

jingyang
19 Sep 2008, 1:27 PM
Sure Saki, I'll give that a try.

The thing is: the values DO get set, so I think the Combo part is working. If you call getValues() you'll get the expected delimited string. BUT, the checkboxes are not CHECKED. So if you have 3 items selected when you load, and then you check an item in the list, only one item will now appear in the textbox portion.

I suspect it's a UI issue with the lov because the store and the values portion IS working correctly.

sk

I got similar problem. Finally it is because I set mode of lovcombo to 'remote'. Set it to 'local' will be fine.

vibez
3 Oct 2008, 3:26 AM
Hi,

Is there a way to set the default value.

I realise we can set to an existing store value using setValue() but I would like to set just a plain value that is not contained in the store.

for example



var costcentre = {
xtype:'lovcombo' // custom user extension
,fieldLabel:'Cost Centre'
,displayField:'costcentre'
,valueField:'costcentre'
,id: tabID + 'cc'
,value: 'lee' // my default value
,hiddenName: 'cc'
,editable:false
,listWidth : 300
,store: new Ext.data.JsonStore({
url: 'combos/combo.php?switch=cc' + tabID,
fields: ['costcentre']
})
,triggerAction:'all'
}


EDIT:

Ok I found the solution by placing a listener on the render event and updating the rawValue and hidden value like so



,listeners:{render:{fn:function(combo, value) {
var defaultVal = 'lee';
combo.setRawValue(defaultVal);
combo.hiddenField.value=defaultVal;
combo.value=defaultVal;
}}
}

skbach
8 Oct 2008, 3:14 PM
Saki, can you give me a tip on where to add this additional value? The checkboxes are not checked, even though the value is checked...but after scrolling down the list (or triggering another lov combo on the same page) then the values become checked.

skbach
8 Oct 2008, 3:53 PM
I got similar problem. Finally it is because I set mode of lovcombo to 'remote'. Set it to 'local' will be fine.

Settings to local wont' help me, as I need it to work remotely.

However, I can confirm that changing the mode to local fixes the problem so it's definitely a bug somewhere along the line...

The problem is that the store is loaded remotely when the user clicks, but the lovcombo is not re-checking the values in the newly loaded store to match the already existing values.

dgms
15 Oct 2008, 3:01 AM
solved it by remove the lines of "this.store.clearFilter();"
=================================================================
I add expand listener to lovecombo to filter the store's records when expanding.
Lovecombo seems ignoring the store's filter, howerver Combobox goes in the normal way.





Ext.onReady(function(){
var store = new Ext.data.SimpleStore({
id:0
,fields:['id','name']
,data:[
[1, 'Personnel []']
,[11, 'Finance (33)']
,[5, 'Door']
,[6, 'Door Panel']
,[2, 'Management !77']
,[25, 'Production']
,[3, 'Users']
,[20, 'Window']
,[21, 'Window Panel']
,[22, 'Form Panel']
,[23, 'Grid Panel']
,[24, 'Data View Panel']]
});

var lc = new Ext.ux.form.LovCombo({
id:'lovcombo'
// ,renderTo:'lovcomboct'
,width:300
,hideOnSelect:false
,maxHeight:200
,store:store
,renderTo:'fm'
,displayField:'name'
,valueField:'id'
,mode:'local'
});

var lc2 = new Ext.form.ComboBox({
id:'combo'
// ,renderTo:'lovcomboct'
,width:300
,hideOnSelect:false
,maxHeight:200
,store:store
,renderTo:'win'
,displayField:'name'
,valueField:'id'
,mode:'local'
});
lc.on('expand',function(){store.filter('id',11);});
lc2.on('expand',function(){store.filter('id',11);});
});

amnesia7
15 Oct 2008, 4:18 AM
I really like this plugin but could do with some help setting a dynamic store.

I've got the lovcombo working in my page using the standard/static store values with Personnel, Finance, etc.

I'd like to create a store dynamically from a DB recordset using asp although if anyone can offer the equivalent in php that would be fine.

I assume I need to edit the section I've shown below but I'm unsure what to edit. I've seen mention of 'setValue' and something called 'json' in the forum posts but I'm hoping that someone can post an edit to my section of code below and the contents of an accompanying php/asp file that would contain the dynamic list of values so that I can understand how to go about this.


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


It would also be good if someone could explain how to select values in the dropdown list if I was going back into the form to edit it. ie how do I pre-populate which items have been selected?

jsakalos
15 Oct 2008, 10:55 AM
Just normally configure the remote store, there is a lot of examples of it in docs and on forums.

wolverline
18 Oct 2008, 6:48 AM
Hey Saki,

You did such a great job esp. about this one. It is a bit buggy and needs to be desired (esp. onBlur event part), though. But it was enough for me to create a combo box that comes with search and input function thanks to your brilliance.

Kudos..


Just normally configure the remote store, there is a lot of examples of it in docs and on forums.

dotchris
22 Oct 2008, 8:57 PM
I am having issues loading up values into LOV. I am loading my form from JSON and would like the passed fields (linkedFreebies) to be set in LOV combos but I have tried changing the mode of field to local and autoLoading the store and manually loading the store before i load the form data and also after. It never seems to set anything even when checking the hidden field. Any ideas? Code below...

Field Defined:


{columnWidth: .5,layout: 'form',defaults: {anchor:'98%'},defaultType: 'lovcombo',items: [{
id: 'freebieslist'
,hideOnSelect:false
,fieldLabel: 'Linked Freebies'
,name: 'Freebies'
,triggerAction: 'all'
,hiddenName: 'linkedFreebies'
,editable: false
,displayField: 'display'
,valueField: 'value'
,store: storeFB
,emptyText: 'Select Freebies'
}]


Load Record into Form:

productform.getForm().loadRecord(record);

Sample JSON:

{"productCount":"3","products":[{"productId":"1","itemId":"Product1","productType":"Products","productName":"Product","linkedFreebies":[3,2]}

jsakalos
22 Oct 2008, 10:34 PM
Try to send: "linkedFreebies":"3,2"

Rothariger
23 Oct 2008, 8:38 AM
is there any way to load 1000 items in the lovcombo? and use the all option?

if i check on the all option, it hangs the page and a warning with a cancel script appears...

does anybody found a fix for this?


thanks!

wolverline
23 Oct 2008, 9:23 AM
I'm facing the same problem and I don't think it's a good idea putting too many records in a store set. As an alternative, I had to modify Saki's component (it has been only three weeks since I started Ext so I'm not good) but it works w/ some bugs.

Inside the source code, I modified and added some ideas; such as...

add search function in order to bring the record and populate the combo box dynamically.

in order to do, I use key events and send a query and then save the checked data within arrays (values and strings).

so that users can select/delete any item.. but when it hits this line, it all disappears for some reasons. So I currently block this line.



record.set(this.checkField, false);
I'm not sure if I have to add another event function.

Any idea??



is there any way to load 1000 items in the lovcombo? and use the all option?

if i check on the all option, it hangs the page and a warning with a cancel script appears...

does anybody found a fix for this?


thanks!

Rothariger
23 Oct 2008, 9:51 AM
i dont want to do this approach... because it turns extremely hard when you get too many items selected...

i dont know, maybe i cut off the select all option...

dotchris
23 Oct 2008, 12:46 PM
No luck with the "linkedFreebies":"3,2". Not sure why it wouldn't atleast set the hidden field. How would you suggest setting up the store; with autoLoad param and mode: 'local' on field OR leave load manually and mode: 'local'. I really like the remote mode but I fear this maybe the issues. Any advice greatly accepted.

Interesting, I notice that my empty text is even removed from the lovcombo when data loads but the data never gets filled in to the lovcombo.

dotchris
23 Oct 2008, 2:33 PM
Update: I have been investigating where the hold up is and have tracked it to the setValue function of this plugin. The value is indeed being passed as I did an alert of the "v"(variable) and it has the passed info and it took cutting out the regex and directly setting and seeing the # values in the lovcombo. I think it has to do with the regex failing which I figure may be related to the need for the store to be loaded. I hope this helps debug the issue.

P.S. Is there anyway to force the store and lovcombo to update its list on setValue, that is if the store is empty. or maybe an init function to always load the data so setValue will work with remote. maybe use a (if mode = 'remote'){load data and update lovcombo with them) thus it would be just like having a local mode store. While this is all, in theory, I think it would be a nice addition as I have personally spent 4hrs on debugging this issue and still no working solution.

jsakalos
23 Oct 2008, 4:32 PM
Store must be loaded for numerical ids to be found in it. This is true also for the standard combo.

dotchris
23 Oct 2008, 7:51 PM
For those interested, I did the following:

1) setup store and loaded right after
2) built and rendered form (lovcombo {mode: 'local',id: 'freebieslist'})
3) ran the following just below rendering of form


storeFB.on('load', function(s, r) {
Ext.getCmp('freebieslist').setValue(record.get('freebieIds'));
});

jsakalos
24 Oct 2008, 1:43 AM
Yes, the same way is to be used also with standard combo.

evelynloo
3 Nov 2008, 11:47 PM
Hi, the LovCombo is awesome, i have a question, if i wanna make it as an editor combo, that means editable : true in the LovCombo, does it possible?

jsakalos
4 Nov 2008, 1:22 AM
I'm not quite sure that I understand your question fully. Could you please elaborate/rephrase?

7twenty
10 Nov 2008, 10:38 AM
Settings to local wont' help me, as I need it to work remotely.

However, I can confirm that changing the mode to local fixes the problem so it's definitely a bug somewhere along the line...

The problem is that the store is loaded remotely when the user clicks, but the lovcombo is not re-checking the values in the newly loaded store to match the already existing values.

Thanks for the great control.

I'm also experiencing the issue with mode=remote. After adding debug code, I see that setValues correctly adds the checked=true to the appropriate records. When clicking on the triggerField button (dropdown icon), the store is reloaded (Combo.onTriggerClick calls Combo.doQuery). After the reload, the checked state isn't copied from the old record to the new record. Thus, the displayed dropdown list incorrectly has NO values checked.

However, in my case I can change to use mode=local (even though the Store is loaded from the server). Everything works great with mode=local (no other changes to code).

Zack7
13 Nov 2008, 7:44 AM
I love LovCombo.

I was wondering if you knew a way to get it to work in a toolbar. Using xtype: 'combo' only gives me the standard combobox, of course. Do I have to create a new xtype for the LovCombo and is it even possible to create new xtypes?

mabello
13 Nov 2008, 7:51 AM
At the end of the source code:


// register xtype
Ext.reg('lovcombo', Ext.ux.form.LovCombo);

// eof

So use xtype: 'lovcombo'...