PDA

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



Pages : 1 [2] 3

Zack7
13 Nov 2008, 9:19 AM
Registering lovCombo and then using it as a xtype works. Thanks!

mabello
13 Nov 2008, 9:36 AM
You do not have to register the xtype of the component again, sorry for misleading you ;)
I meant that at the end of the source of the lovecombo javascript file, the xtype of the component is registred, so you can just use xtype: 'lovcombo'.

Rothariger
24 Nov 2008, 10:45 AM
hi,


im using the lov pagination option with some modifications to save the selected items. but this isnt the problem, the problem is that the list hides. for example when i touch twice the next page button.

cLovCombo is my "custom" control, it extends the lovCombo.




new cLovCombo ({
allowDomMove: true
,width: 190
,id:'lovSurveyor'
,tabIndex:2
,labelStyle:'width:130px'
,allowBlank: true
,emptyText:'All'
,displayField:'description'
,valueField:'id'
,editable:false
,mode:'remote'
,triggerAction:'all'
,resizable: true
,typeAhead:false
,store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/Red50/UserControls/Handler/ucFilterHandler.ashx',
method:'POST',
timeout: '25000'})
,remoteSort: true
,baseParams: {action: 'lovSurveyor'}
,reader: new Ext.data.JsonReader({totalProperty: "totalCount", id: "id", root: "fitler"}
,lovSurveyorStrR = Ext.data.Record.create([
{name: 'id', type: 'string'},
{name: 'description', type: 'string'}])
)
})
,enableSelectAll: true
,changeControlCount: 200
,changeControlAutomatically: true
,changePageSize: 25
,fieldLabel: 'Surveyor'});



thanks to all...

jsakalos
24 Nov 2008, 12:55 PM
Well, LovCombo has not been meant for remote stores with pagination so I doubt it will work flawlessly in that environment.

Rothariger
24 Nov 2008, 1:30 PM
ok, but in your example of combo with template, work like a charm... i guess this must to work in the same way...


thanks saki anyway...

exo
25 Nov 2008, 7:51 AM
I made a simple modification that uses a shorter version of 'displayField' string to show in the textbox (because the text would fit in the dropdown, but not next to eachother in the textbox). If anyones interested I'll post the changes.

Remy
26 Nov 2008, 9:07 AM
Anyone tried to adapt the LovCombo to handle bitwise fields? What I mean by this is my DB stores numeric values which can have multiple relations e.g.


Users
UserID GroupMembership
1 3


Groups
GroupID GroupName
1 Marketing
2 Sales
4 Human Resourcesmeans that userID 1 is a member of groups 1 & 2, the values being ANDed. I think Saki's code could be modifed to do this rather than using a text array to store the values. Thought I'd post in case someone had done this already. Complete lack of talent permitting, I will give this a go and post anything I might come up with for comments.

zapatista
27 Nov 2008, 2:29 AM
how to get count of the value?

i use this



for(i = 0; i < Ext.getCmp('comboctf').getValue().length; i++){
console.log(Ext.getCmp('comboctf').getValue()[i]);
}

Remy
27 Nov 2008, 2:38 AM
I've got something similar in setValue which checks the DB value and determines how this is broken down in terms of selected (my lookup values are always 1,2,4,8,16 etc,.):


for (var i = 1; i <= bv; i += i){
if ((i & bv) == i) {
va.push(i);
va.join(this.separator);
}
}
bv is the DB number (e.g. 11) and is broken down into va as:


[1,2,8]

Now that I can populate the combo based on the DB value, I need to set the hiddenName (required for me) value to bv for saving back.

zapatista
27 Nov 2008, 3:18 AM
can any one help me in finding the selected index and number of option which corrosponds to the html select element ?

kora.kanchan
29 Dec 2008, 5:20 AM
Hi Saki..
I have used ext2.0.
i have downloaded lovcombo.zip. but it is not running ..showing an error..

jsakalos
29 Dec 2008, 5:32 AM
LovCombo doesn't install beforeload handler so the error doesn't make any sense to me.

kora.kanchan
30 Dec 2008, 2:40 AM
i havnt modified in your code. just running to see the output.
when i debug in firebug, error show in ext-all-debug.js(line no 26679).

jsakalos
30 Dec 2008, 3:20 AM
Well, I cannot do anything with the info I have so far. For example, I use SVN version of Ext so line numbers of ext-all-debug not necessarily match with yours. The best would be if you prepared a showcase, files that I can copy to my ext folders and run. If I can reproduce the error locally I can help you.

kora.kanchan
30 Dec 2008, 3:46 AM
OK.
I SEND YOU WHOLE CODE IN ZIP FORMAT..

WHEN I CLICK ON COMBOBOX THEN FIRE THE ERROR ON EXT-ALL.DEBUG.JS FILE. I HAV ATTATCHED THE FILE

kora.kanchan
30 Dec 2008, 7:36 AM
what is SVN version of EXT?

jsakalos
30 Dec 2008, 6:25 PM
http://en.wikipedia.org/wiki/Subversion_(software)

Seatle83
8 Jan 2009, 9:16 AM
It is possible use this widget in the EditorGridPanel (in edit mode)? If yes, please show example

mabello
8 Jan 2009, 10:14 AM
Just check out the edit-grid.js inside the SDK example (path: ext-2.2\examples\grid ) and when you define your ColumnModel set your editor as the LovCombo ;)



var cm = new Ext.grid.ColumnModel([{
id:'common',
header: "Common Name",
dataIndex: 'common',
width: 220,
editor: new Ext.ux.form.LovCombo({
//configuration...
})
},...

angelflaree
21 Jan 2009, 3:20 PM
Hi, Saki,

Can you please let me know what regular expression I should use
if I want to use '|' as the separator.

I want my return value looks like 'A|B|C|...' so it can be easily used on my Database query
Thank you.

jsakalos
22 Jan 2009, 1:13 AM
Well, you need to find out. Sorry for that, but I have no time to develop for users... ;)

minusForty
22 Jan 2009, 11:45 AM
I am finding that when the width of the text of an item in my LovCombo is wider than the LovCombo box, it is wrapped to the next line below the the checkbox. Here is the code for my LovCombo (nothing special):


comboCompany = new Ext.ux.form.LovCombo({
store: dsCompany,
displayField: 'name',
valueField: 'name',
editable: false,
mode: 'local',
triggerAction: 'all',
value: "ALL",
hideOnSelect:false,
width: 200,
allowBlank: false
});Note: This only happens in Internet Explorer, not with Firefox. I tried every CSS trick I knew such as "white-space: nowrap" and "overflow:hidden", but no luck. Attached is a picture describing the problem.

galdaka
22 Jan 2009, 12:07 PM
See Groupcombo example in http://www.jadacosta.es/

may be help...

Greetings,

minusForty
22 Jan 2009, 3:28 PM
FYI: As a workaround (not a solution) to the IE overflow wrapping problem, I put 2 fields in my record, 1 for the display and 1 for the value. Both fields were almost identical, except I shortened the display field (by cutting it off) to fit the width of the drop down.

For example:

"This is a really long string that doesn't wraps when put into the combobox"

was shortened to:

"This is a really long string th"

salvo
5 Feb 2009, 7:33 AM
Hi jsakalos,

Again thanks to this great extension which deserves to be integrated in ExtJS 3.0 :)

I'm in a situation where I need a LOVcombo box and also to let users to type free values which are not in the list.
I tried ForceSelection:false but with no effect it behaves as if ForceSelection was set to true by clearing the textfield.

Is it by design? Can we expect an update for this? Otherwise how to override this behaviour?

Thanks.

jsakalos
5 Feb 2009, 8:40 AM
I have no plan to implement adding of new id/value pairs to LovCombo.

salvo
6 Feb 2009, 2:09 AM
I've made further enhancements that should also fix "scroll to top on select" bug.

Hi Saki,

Looks like the "scroll to top on select" bug is back.

With either lovcombo 1.0 and 1.3 sub-selection is lost when one option is clicked and the full list is displayed again from the top.
Also your showcase at http://lovcombo.extjs.eu/ behaves the same.

-Salvo

jsakalos
6 Feb 2009, 2:25 AM
Hmm, I cannot reproduce it. Browser, steps to reproduce...?

jsakalos
6 Feb 2009, 2:34 AM
Very low quality video, but shows the behavior: http://lovcombo.extjs.eu/lovcombo.mp4

salvo
6 Feb 2009, 2:45 AM
I can't read mp4 at work but here are the steps:

Type "D" from your showcase you get a sublist with "Door, Door Panel, Data View Panel"
Check "Door", you lose your sublist starting with "D" because the full list displays again from the top value.

Are we talking about the same thing?

jsakalos
6 Feb 2009, 3:30 AM
That is intended behavior. See avi video at http://lovcombo.extjs.eu/lovcombo.avi

salvo
6 Feb 2009, 3:58 AM
Thanks for the videos.

Intended? Oh. Too bad :(

This is same behavior as a standard single select combo and lovcombo is intended for multiselect isn't it?
Adjacent selection on large lists is made difficult and users get lost most of the time especially on large lists. I think your extension could take advantage of this. Just a thought.

-Salvo

jsakalos
6 Feb 2009, 4:22 AM
Has it behaved somehow differently before? 'Cause I was rearranging some files, hopefully haven't re-introduced an old bug.

Re behavior:
If you use mouse, then you just scroll where you need and click your item. When you use keyboard then you do it like this:
1. start typing
2. combo filters
3. use arrow to find the item to check
4. hit enter
5. type comma (or other separator)
6. return to point 1

I was playing with it quite a long time when designing and this is the fastest. The slowest is when you need to change between mouse and keyboard.

salvo
6 Feb 2009, 5:21 AM
Hi Saki,

Well I have played with v1.0 in the past and I must say the current release behaves the same. No change.

No doubt your extension is a dramatic enhancement for web interface. Really.
But you know end-users are always right - goshhh it really hurts ;). From my experience when they complain it's always that something could be improved.

Your 1-6 steps are OK but don't forget they are not using keyboard extensively as we do as developers. 90% of navigation is done with mouse points and clicks and it's a real pain for them when they have to type anything on keyboard.

With the functionality I'm suggesting for adjacent selection your steps would become:

start typing "D"
combo filters, got sub-list with "Door", "Door Panel" and "Data View Panel"
use arrow to find the item to check (well not here)
check "Door", sub-list still here
check "Door Panel", sub-list still here
check "Data View Panel"


... instead of 18 steps (3*6 your steps). In that particular case I think it's overkill to force users to type 3 times the same sub-string to get 3 times the same sub-list.

Hope this makes sense.

-Salvo

jsakalos
6 Feb 2009, 5:23 AM
OK, but I doubt that has ever behaved such a way. Would you wish to implement that? If so go ahead but make it configurable please.

tobiu
21 Feb 2009, 7:35 AM
hi saki,

when switching to ext 2.2.1, the LovCombo does not show the checkboxes anymore (only tested with ff3). i think it is the same "problem" like the gridFilters had -> the changing of the way, menues are build now.

is there any hotfix found already or shall i look into it a bit closer?


kind regards, tobiu


edit: it is only a displaying - bug, the LovCombo's are working as intended.

jsakalos
21 Feb 2009, 8:41 AM
Hmmm, the demo page at http://lovcombo.extjs.eu/ runs against SVN (ext-base.js says 2.2.1) and it renders fine. If there has been a general patch of 2.2.1 it should fix also this problem.

tobiu
21 Feb 2009, 2:23 PM
hi saki,

you are right. i just missed to change the paths in the css-file of your ux =)
but this was a good time to upgrade to the latest version of LovCombo as well.

i tried to add a bit more space between checkbox and item-text:



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



kind regards, tobiu

jsakalos
21 Feb 2009, 2:29 PM
Thank you for sharing your css; maybe someone else also likes it that way. :)

eufire
2 Mar 2009, 10:06 AM
Hi Saki,
This looks great and I can't wait to use it! However...it might just be me, but I can't find your source code anywhere as a guide. I opened the lovcombo.html (http://lovcombo.extjs.eu/source.php?file=lovcombo.html) but it's the source code of the page itself, without any examples on the actual syntax of declaring a new lovcombo variable like you did on the website. I'm pretty new with extJS so I don't know how to use your plugin by just reading the lovcombo.js. If you have a full example somewhere, please point me to it..
Thanks!

eufire
2 Mar 2009, 10:12 AM
Without a guide, here's what I did to create a lovcombo field on my form:


var id_vars = [];
{% for p in project_info.include_dirs %}
id_vars.push("{{p}}");
{% endfor %}
var include_dir_field = new Ext.ux.form.LovCombo({
id: 'id_lovcombo',
fieldLabel: 'Include Directories',
width: 400,
maxHeight: 200,
store: new Ext.data.SimpleStore({
data: id_vars,
fields: ['description']
});
multiSelect: true,
displayField: 'description',
valueField: 'description',
mode: 'local',
triggerAction: 'all',
hiddenName: 'blah',
typeAhead: true,
});


However, the items that show up are somehow truncated (ie. only the first character showing). For example, the items should be "cgf", "../cpptest", and ".". But what's actually in the lovcombo box is "c", ".", and ".".
I don't really see why it's doing this...
Could you give me some advise on this, please?
Thanks!

jsakalos
2 Mar 2009, 10:44 AM
Rewrite it to pure javascript, w/o {% for ... (what's that anyway?), and make sure that your data array is correct.

eufire
2 Mar 2009, 10:53 AM
Hi Saki, thanks for getting back to me.
The {{%%}} stuff is from django. it's in there because my website also uses some of the django (sort of like a python framework for webs) framework for the data end of things.
i tested out the very same code in pure HTML. for example:


<label>Library directories:</label><br />
<select multiple id="libDir" name="libDir" >
{% for p in project_info.lib_dirs %}
<option value="{{p}}" style="width:400px">{{p}}</option>
{% endfor %}
</select>

"{{p}}" would mean the value of the variable p, which are ("cgf", "../blabla", ".") respectively.
So the above code would give me the exact values of the items ("cgf", "../blabla", ".") instead of ("c", ".", ".").
Are you suggesting that there's something wrong with my javascript array? But seeing as how it works with the html code the way it should, I don't see why it's truncated in the extJS case.
Any ideas? Thanks!

jsakalos
2 Mar 2009, 11:13 AM
My tip is that your serverside may generate wrong items/array.

eufire
2 Mar 2009, 12:17 PM
I thought about it but I don't think that is the case.
This is the soure code in firefox browser during runtime:


var id_vars = [];

id_vars.push("cgf");

id_vars.push("../cpptest");

id_vars.push(".");


var id_field = new Ext.ux.form.LovCombo({
id: 'id_lovcombo',
fieldLabel: 'Include Directories',
width: 400,
maxHeight: 200,
store: new Ext.data.SimpleStore({
data: id_vars,
fields: ['description']
}),
multiSelect: true,
displayField: 'description',
valueField: 'description',
mode: 'local',
triggerAction: 'all',
hiddenName: 'ids',
typeAhead: true,
});As you can see, the items were passed on correctly "
id_vars.push("cgf");

id_vars.push("../cpptest");

id_vars.push(".");"
But somehow they became "c", ".", and "." in the lovcombo drop-down
I've struggled long enough on this :( I'd greatly appreciate it if you can give me hints as to what's going on here.

Thanks,

jsakalos
2 Mar 2009, 12:38 PM
I guess your store should have both id and text fields - you have same displayField and valueField.

DoS
9 Mar 2009, 8:04 AM
The extension is working great, but there's one problem. I need to send selected items as an array of values ['g','h','j'], but currently it sends it as a string 'g,h,j'.
Is there a way to do that?

jsakalos
9 Mar 2009, 8:12 AM
Cannot server just split the string to create the array?

DoS
9 Mar 2009, 8:30 AM
No, because there are many forms and they are dynamically created and processed after submit.

jsakalos
9 Mar 2009, 8:36 AM
You see, the value that is posted now is (string) a,b,c. Then nature of html input field will not allow you to post an array ['a','b','c'], the only thing you can post is (string) "['a','b','c']". In other words, that, what is received on the server is always string. If you want to make array from it you have to do it at server either by splitting the string posted now or json decoding the second string.

DoS
9 Mar 2009, 10:11 AM
I can json decode anything on server side, but how to change the current value of "'one,two,three'" to "['one','two','three']" on Ext side, taking account that there can be several LovCombos in one form and their names are unknown (can change from form to form)?
Currently Ext.encode(form.getForm().getValues()) encodes it like the first one.

jsakalos
9 Mar 2009, 10:13 AM
I still wouldn't go client side, but if you really want to then change LovCombo:: setValue method and put [....] to hidden field.

DoS
10 Mar 2009, 1:31 AM
That didn't work, but I solved the problem by adding a hidden field to forms, which contains the names of LovCombo fields (if there are any).
Then I can retrieve them after submit and split the values on server side.
Not the prettiest solution, but at least it works fine.

evanc
11 Mar 2009, 4:21 PM
I want to make a list of days and I want to display "Sun, Mon, Tues" in the collapsed box, but then in the expanded list display "Sunday, Monday, Tuesday" etc.

Is this possible? apologies for not reading through 30+ pages...

jsakalos
11 Mar 2009, 4:36 PM
No, only full names.

asnem
15 Mar 2009, 3:28 AM
I have a problem with lovcombo and Jsonstore. My lovcombo looks right, I can see all values in the list. But after I selected my items and go out of the combobox (so there is no focus on it), only the first item stay selected.

Can you see the mistake?


var storeForFiliale = new Ext.data.JsonStore({
url: 'getDataForStores.inc.php',
autoLoad: true,
baseParams: {
store: 'niederlassungenListe'
},
root: 'rows',
fields: [ {name:'id'} , {name:'description'} ]
});


items: [{
xtype : 'lovcombo'
,fieldLabel : 'Filialauswahl (Mehrfachnennung möglich)'
,name : 'filialAuswahl'
,id : 'FilialComboId'
,store : storeForFiliale
,disabled : true
,typeAhead : true
,triggerAction : 'all'
,selectOnFocus : true
,displayField : 'description'
,valueField : 'id'
,hiddenName : 'filialAuswahl'
,hideOnSelect : false
,maxHeight : 300
,mode : 'local'
}

jsakalos
15 Mar 2009, 4:09 AM
The code looks good. Can you post a working showcase (http://extjs.com/forum/../learn/Ext_Forum_Help#Posting_a_working_showcase)?

asnem
16 Mar 2009, 6:32 AM
Okay, here is a working showcase.


<div id="container">
<div id="content">
<div id="mainContent">
<div id="formHolder">
<script type="text/javascript">
/*
************************ EXT onReady *******************************
*/

Ext.onReady(function() {

Ext.QuickTips.init();

//array für Filiale zur Auswahl auf Website
var storeForFiliale = new Ext.data.JsonStore({
url: 'custom/getDataForStores.inc.php',
autoLoad: true,
baseParams: {
store: 'niederlassungenListe'
},
root: 'rows',
fields: [{
name: 'id'
},
{
name: 'description'
}]
});

var tp = new Ext.TabPanel({
id: 'jobPositionsTab',
plain: true,
deferredRender: false,
//sonst werden nur Daten bereits angeklickter Tabs submitted!
activeTab: 0,
height: 650,
width: 530,
defaults: {
autoScroll: true,
bodyStyle: 'padding:10px',
width: 330
},
items: [{
//Tab "Meine neue Stelle"
title: 'Meine neue Stelle',
id: 'fourthTab',
hideMode: 'offsets',
layout: 'form',
defaults: {
width: 310
},
defaultType: 'textfield',
items: [{
xtype: 'radiogroup',
fieldLabel: 'Bundesweite Bewerbung?',
name: 'filiale',
vertical: true,
columns: [140, 140],
items: [{
boxLabel: 'ja',
name: 'rb-filiale',
inputValue: 'ja',
listeners: {
'check': function(radiogroup, blnChecked) {
if (blnChecked) {
Ext.getCmp('FilialComboId').disable();
}
}
}
},
{
boxLabel: 'nein',
name: 'rb-filiale',
inputValue: 'nein',
listeners: {
'check': function(radiogroup, blnChecked) {
if (blnChecked) {
Ext.getCmp('FilialComboId').enable();
}
}
}
}]
},
{
xtype: 'lovcombo',
fieldLabel: 'Filialauswahl (Mehrfachnennung möglich)',
name: 'filialAuswahl',
id: 'FilialComboId',
store: storeForFiliale,
disabled: true,
typeAhead: true,
triggerAction: 'all',
selectOnFocus: true,
displayField: 'description',
valueField: 'id',
hiddenName: 'filialAuswahl',
hideOnSelect: false,
maxHeight: 300,
mode: 'local'
}]
}] // Ende Tab
});

var simple = new Ext.FormPanel({
labelWidth: 150,
// label settings here cascade unless overridden
frame: true,
title: 'Ihre Bewerbung',
renderTo: 'formHolder',
fileUpload: true,
bodyStyle: 'padding:5px 5px 0',
layout: 'column',
monitorValid: true,
items: tp,
buttons: [{
text: 'Bewerbung senden',
formBind: true,
iconCls: 'saveButton',
handler: function() {} // handler
}]
});

}); // eo function onReady
// eof
/*
************************ eo EXT onReady *******************************
*/

</script>
</div>
</div>
</div>
</div>

Here the content of custom/getDataForStores.inc.php:


{
"success": true,
"rows": [{
"id": "3",
"description": " Aalen (Ostalb)"
},
{
"id": "8",
"description": " Ansbach"
},
{
"id": "9",
"description": " Augsburg"
},
{
"id": "7",
"description": " Bad Mergentheim"
},
{
"id": "10",
"description": " Crailsheim"
},
{
"id": "11",
"description": " Ellwangen (Ostalb)"
},
{
"id": "12",
"description": " Feuchtwangen"
},
{
"id": "13",
"description": " Heilbronn"
}]
}


I hope, you have an idea what`s going wrong. Example (http://www.eyekit.de/lovcombo/)

jsakalos
16 Mar 2009, 6:37 AM
Yes, I see it. However, "a working showcase" is something that I can run and change locally.

stefan.riedel-seifert
16 Mar 2009, 12:26 PM
Hi,

is it possible to integrate multiselection:[SHIFT] to select interval, select-all?
This make sense in combination with an autosuggest combobox.

Best regards,
Stefan

jsakalos
16 Mar 2009, 12:29 PM
Yes, it is possible for sure, however, I don't have currently enough time to do it.

frank_ash
19 Mar 2009, 3:24 AM
In LovCombo
i have All first option When i select All option there Should select all other option .

When i deselect All there should deselect

i got chalu lovcombo_seletall.zip file above mention working fine.

But when i select All option there selected all and other options when deselect from selected other anyone there should deselect all and other one only.

Example followings are consist LovCombo

All
America
China
India

jsakalos
19 Mar 2009, 6:15 AM
I don't know about chalu's fork of LovCombo. Contact him to support it.

whodat
27 Mar 2009, 11:46 AM
Saki,

I'm able to set the values by doing ...setValue('value1,value2')

Anyway I can set the the textfield(not sure what that object is called next to the trigger) above as the Combo box does by just calling setValue? Or should that happen automatically?

I tried to check your page again to see if you show that but its down..

jsakalos
27 Mar 2009, 12:04 PM
Must have been a temporary problem - I've just checked the site and it works.

whodat
27 Mar 2009, 12:09 PM
Must have been a temporary problem - I've just checked the site and it works.

Any possible solution to be able to set the following: see attached picture. The values are set, but they are not displayed above the list.

I still can't get on.. maybe its a work restriction now.. not sure

jsakalos
27 Mar 2009, 12:14 PM
Go to the lovcombo site and type in the Firebug's console:



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


Is that what you mean?

whodat
27 Mar 2009, 12:24 PM
Go to the lovcombo site and type in the Firebug's console:



Ext.getCmp('lovcombo').setValue('5,6,2')
Ext.getCmp('lovcombo').setValue([1,11,25])
Is that what you mean?

I think I see what's wrong.. Its something to do with the name of the field and the id being the same..

I changed it and it works fine.

Thanks.. I still can't get to your page.. its definitely something work related.. i will try when I get home.

jsakalos
27 Mar 2009, 12:54 PM
Yes, displayField and valueField should be different.

The site works from here, probably some problem on your end.

whodat
27 Mar 2009, 12:57 PM
Yes, displayField and valueField should be different.
Saki,

The valueField and displayField are different, but I gave my LovCombos and combos a name:'combo1' and an id: 'combo1' for example. The goal is upon a RowAction being clicked, set the values of the combos..

I noticed that I can't set the values unless the store is loaded. Is this true for LovCombos and Combos..

For my combo, I see the value listed even though the store is not loaded and its preselected when the store does load.

Is there a way I can set the text above the list to the set value without having the store loaded.

I also tried to load the store.. but that was a no go as well.

jsakalos
27 Mar 2009, 1:03 PM
Combos are fully functional only after the store is loaded. There is some limited functionality before, e.g. you can setRawValue, etc. but it is always best practice to load stores before you setValue.

whodat
27 Mar 2009, 1:21 PM
Combos are fully functional only after the store is loaded. There is some limited functionality before, e.g. you can setRawValue, etc. but it is always best practice to load stores before you setValue.

I've gotten the store to load..

Thanx for your help again

tripkos
28 Mar 2009, 6:39 AM
I have a store named gatesDS:

gatesDS = new Ext.data.Store({
id: 'gatesDS',
proxy: new Ext.data.HttpProxy({
url: base_url + '/app/listGates',
method: 'POST'
}),
baseParams:{task: "LISTING"}, // this parameter is passed for any HTTP request
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'gate_id'
},[
{name: 'gate_id', type: 'int', mapping: 'gate_id'},
{name: 'gate', type: 'string', mapping: 'gate'}
]),
sortInfo:{field: 'gate_id', direction: "ASC"}
});
gatesDS.load();

....

then I created in a form a field like this:

{
xtype:'combo'
,id: 'documentSupplierIDCombo'
,fieldLabel: 'Supplier'
,name: 'supplier_id'
,store: suppliersComboDS
,displayField:'supplier'
,valueField: 'supplier_id'
,typeAhead: true
,mode: 'local'
,triggerAction: 'all'
,emptyText:'Select ...'
,selectOnFocus:true
// ,value: 1
,anchor:'45%'
}

The problem is that although I can select different values, when I clicked outside of the field the previously displayed values disappear...

Is there something wrong in my definition?

tripkos
28 Mar 2009, 6:40 AM
Sorry, I didn't paste the correct definition in previous email...

xtype:'lovcombo'
,fieldLabel: 'Driver'
,name: 'lovcombo'
,id:'lovcombo'
,store: gatesDS

,displayField:'gate'
,valueField: 'gate_id'
// ,hiddenField: "vehicle_description"
,hideOnSelect:false
,typeAhead: true
,mode: 'local'
,triggerAction: 'all'
,forceSelection: false
//,emptyText:'Select...'
,selectOnFocus:true
,anchor:'80%'

jsakalos
28 Mar 2009, 8:28 AM
Nothing wrong at the first glance but there must be some difference because it works at my site, doesn't it? Store definition, some events installed or similar. Just compare your code to the code from the site.

zyon
30 Mar 2009, 3:56 AM
Hi
I am struggling for a long time now to check more than one value on load, like it would be in edit mode.I have read all the pages on this topic here, but still couldn't make it work. So if someone can help me on this matter i would highly appreciate. Maybe someone from here could even write a function for this to be added to the original functionality. I think it would help a lot of people.

That's what i get so far:


Page.companyTypesOthersCombo = new Ext.ux.form.LovCombo({
id:'lovcombo'
,renderTo:'companyTypesCombo'
,width:300
,hideOnSelect:false
,maxHeight:200
,store: new Ext.data.Store ({proxy:new Ext.data.HttpProxy({url:"index.php/companies/getCompanyTypesStoreCombo"})
,reader:new Ext.data.JsonReader({root:'items',id:'TypeID',fields:[{name:'TypeID'},{name:'TypeName'}]})})
,triggerAction:'all'
,valueField:'TypeID'
,displayField:'TypeName'
,mode:'local'
,listeners:{
render:{single:true, fn:function(combo) {
combo.store.on('load', function()
{combo.setValue(2)}, {single:true}
);
combo.store.load();
}}
}
});

As written here in this topic the setValue function works just for setting one value.I need to set more than one value.

jsakalos
30 Mar 2009, 6:44 AM
setValue('2,3,5') or setValue([2,3,5])

zyon
30 Mar 2009, 7:32 AM
Thx for the answer. Can you tell me where exactly should i use this function as it doesn't seem to work in what i use:

,listeners:{
render:{single:true, fn:function(combo) {
combo.store.on('load', function()
{combo.setValue('2,3,5')}
);
combo.store.load();
}}
}

jsakalos
30 Mar 2009, 7:41 AM
Looks good place. Do you have ids 2,3,5? I've tested Ext.getCmp('lovcombo').setValue('3,5,11') at http://lovcombo.extjs.eu and it works.

zyon
30 Mar 2009, 8:17 AM
Hi
Yes it seems to work, thx a lot for the support.

codeminer
8 Apr 2009, 7:25 PM
I can't dynamically select values from code, what event is best to dynamically select values from lovcombo in editor grid panel. please help

jsakalos
9 Apr 2009, 1:38 AM
http://extjs.eu/docs/?class=Ext.ux.form.LovCombo&member=setValue

bendawg
9 Apr 2009, 12:06 PM
I noticed that if I try to change the delimiter to a pipe, this extension doesn't seem to be able to parse things out correctly.


Thanks for the extension, by the way, it works great (with commas ;))!

jsakalos
9 Apr 2009, 3:00 PM
Can be some problem in RegExt, some escaping or something. I'd be grateful if you'd find out the core of it.

whodat
10 Apr 2009, 11:17 AM
Hi Saki,

I'm using the LOV combo thruout my app. In this one particular part of my app. I have a list of combos as the following:

* all columns
column 1
column 2
column 3

Upon selecting * all columns, the rest of the values are auto selected and deselected. This works fine.

The only problems is this following situation

I use a listener to determine if all columns is selected if so, I call selectAll().
When all columns is unselected, I call deselectAll().

Now if all columns value is selected and u deselect any values, I deselect all columns, but the textfield still states *all columns and when I lose focus and come back to the combo it's still selected.

Is there a way to update the text or can I disable the text showing up.

jsakalos
10 Apr 2009, 2:49 PM
I'm somehow losing track (maybe should get some sleep) and I don't know what's the problem. deselectAll calls clearValue() in turn so it should both clear checkboxes and apply empty text. Or, am I totally astray?

whodat
11 Apr 2009, 6:58 AM
I'm somehow losing track (maybe should get some sleep) and I don't know what's the problem. deselectAll calls clearValue() in turn so it should both clear checkboxes and apply empty text. Or, am I totally astray?

Sorry, I need sleep too.
Please disregard.. Another user in this thread has a solution I used...

thanks anyway

bendawg
11 Apr 2009, 9:19 PM
Will look into it. I ended up working around it by using semicolons, but would be glad to help out.


Can be some problem in RegExt, some escaping or something. I'd be grateful if you'd find out the core of it.

lionheart33806
15 Apr 2009, 6:53 AM
Hi Jsakalos,

Is there a solution to this prob ?

Thanks


I am finding that when the width of the text of an item in my LovCombo is wider than the LovCombo box, it is wrapped to the next line below the the checkbox. Here is the code for my LovCombo (nothing special):


comboCompany = new Ext.ux.form.LovCombo({
store: dsCompany,
displayField: 'name',
valueField: 'name',
editable: false,
mode: 'local',
triggerAction: 'all',
value: "ALL",
hideOnSelect:false,
width: 200,
allowBlank: false
});Note: This only happens in Internet Explorer, not with Firefox. I tried every CSS trick I knew such as "white-space: nowrap" and "overflow:hidden", but no luck. Attached is a picture describing the problem.

jsakalos
15 Apr 2009, 10:10 AM
I have no ideas/experience with IEs being on Linux and using Firefox. Has anybody else an idea what's happening here?

lionheart33806
16 Apr 2009, 12:07 AM
:-| Can't you take a look with Wine and a standalone IE6 ? Or a virtual machine ?

jsakalos
16 Apr 2009, 5:08 PM
Try to add this to your css:


/* IE patch */
.ext-ie .ux-lovcombo-item-text {
position:absolute;
left:16px;
top:3px;
}
.ext-ie .ux-lovcombo-icon {
float:none;
}
.ext-ie .x-combo-list-item {
position:relative;
}

syscobra
16 Apr 2009, 7:34 PM
I have no ideas/experience with IEs being on Linux and using Firefox. Has anybody else an idea what's happening here?

Hey Jozef.
You can try this: http://www.cyberciti.biz/tips/how-to-install-internet-explorer-on-linux.html
I installed it with no problem under ubuntu with wine. Just to test your components :)

Maybe you already knew it but after looking at this message just had to tell you.

lionheart33806
16 Apr 2009, 11:08 PM
Try to add this to your css

Oooohhh great !!! \:D/
It works like a charm ! =D>
Thank you very much !!!!

jsakalos
17 Apr 2009, 3:18 AM
I know that IEs4linux, have had installed them too, but they are quite limited. This is much better: http://www.virtualbox.org/

However, it doesn't change my viewpoint. Users will install and use Firefox if they have to so if you develop a commercial application you have the power to tell them that Firefox is required. For public applications/web pages you can put "Best viewed with Firefox" statement on your page.

If there would be no IE we (the developers) and users would have 80% less problems.

sajjan
27 Apr 2009, 4:26 AM
checkbox are not showing in IE7 but showing in mozilla please guide me .
what i missed

var roleName1 = new Ext.ux.form.LovCombo({
// typeAhead : true,
id : 'lovcombo',
maxHeight : 200,
width : 210,
mode : 'remote',
minChar : 0,
forceSelection : false,
allowBlank : false,
selectOnFocus : true,
hideOnSelect : false,
store : roleStore,
hiddenName: 'name',
listeners:{render:{fn:function(combo, value) {
var defaultVal = 'name';
combo.setRawValue(defaultVal);
combo.hiddenField.value=defaultVal;
combo.value=defaultVal;
}} },

triggerAction : 'all',
displayField : 'name',
valueField : 'name'
});

jsakalos
27 Apr 2009, 6:43 AM
I've just checked http://lovcombo.extjs.eu in IE7 and it works w/o any problems. See what is different in your case, including Ext version.

sajjan
27 Apr 2009, 9:57 PM
Thanks a lot i am facing some issue with lovcombo that lovcombo displaying properly in grid

with preselection but when i click on combo the preselcted strings are sorting but i dont want to sort because without any change it is showing red mark please help me how to avoid sorting .

jsakalos
27 Apr 2009, 11:52 PM
Set sortable:false in that column model definition.

sajjan
28 Apr 2009, 12:12 AM
thanks but sort:false is working for grid column but not for lovcombo field

when i click on lovcombo field the mapped strings are sorting so i need to avoid this sorting .

jsakalos
28 Apr 2009, 5:43 AM
LovCombo underlying store is not sorted by default so I have no idea what's problem.

wolfhowlmedia
22 May 2009, 7:07 AM
Hi! I'm having a pretty serious issue with the LovCombo and storage filtering; I use this code:


new Ext.ux.form.LovCombo({
id:'categories-list',
name:'categories-list',
fieldLabel:'Categories',
minListWidth: 191,
width:191,
maxHeight:200,
store: new Ext.data.JsonStore({
url: '/content/json-cats.py',
root: 'categories',
fields: [{name:'CategoryID', type:'int'}, 'ContentTypeID', 'Name'],
autoLoad: true
}),
valueField: 'CategoryID',
displayField: 'Name',
triggerAction:'all',
mode:'remote'
})

and storage filtering:


var cbCategories = Ext.getCmp('categories-list');
cbCategories.clearValue();
cbCategories.store.filter('ContentTypeID', contentType);


The problem is following; The first time the content isn't filtered at all, even tho the filtering part is executed (I know this, because the other filters are executed); The second execution of the filter succeeds, altho the filter goes away, when I do this:
Focus on the Combo, press down, the filter works. Focus out and in again, press down, the filter fails. What's going on?

jsakalos
22 May 2009, 9:26 AM
LovCombo uses filter internally so it most likely clears your filter.

wolfhowlmedia
22 May 2009, 1:04 PM
Hm. Any way to get around it or avoid it?

jsakalos
22 May 2009, 3:11 PM
Yes, use server filtering so that the store doesn't contain extra records.

muh-die-kuh
23 May 2009, 3:10 AM
Hi jsakalos,
at first, thank you for all the great extensions you have done - I really like using them.

But now I got an issue with LovCombo, and allready searched for it but could not find any workarounds.

Is there a way to make it readOnly?

What I've done now is modifying the onSelect method, around line 224:

,onSelect:function(record, index) {
if(this.readOnly){
return;
}
if(this.fireEvent('beforeselect', this, record, index) !== false){

// toggle checked field
record.set(this.checkField, !record.get(this.checkField));

// display full list
if(this.store.isFiltered()) {
this.doQuery(this.allQuery);
}

// set (update) value and fire event
this.setValue(this.getCheckedValue());
this.fireEvent('select', this, record, index);
}
} // eo function onSelectis there a built-in way I didn't see?

If not, maybe yøu would like to add three lines to your next release, or reimplement it in your prefered way :-)

Greetings, Christian

jsakalos
23 May 2009, 2:59 PM
I think it's too late. You should cancel it earlier so that even dropdown doesn't appear. Look how core combo does it, e.g. setEditable method.

muh-die-kuh
28 May 2009, 4:31 AM
Well,
I actually wanted the drop-down, as for many selected entries and a small combo box width, its easier to get an overview of the selected entries using the dropdown - from my point of view.

I'll have a look at setEditable anyways. Thanks

Maharshi
2 Jun 2009, 12:07 PM
Hello Saki,

I am using LovCombo for the first time in my app.I am using a simple store,however the combo is blank with only checkboxes in it.I am not able to see the data.
heres my code
{
xtype:'lovcombo',
name:'groupByField',
width:250,
fieldLabel:'Group By',
hideOnSelect:false,
maxHeight:200,
store:new Ext.data.SimpleStore({
// reader: new Ext.data.JsonReader({},
// [{name: 'Uid', mapping: 'Uid'},{ name: 'Name', mapping: 'Name'}
// ]),
fields: [{name: 'Uid', mapping: 'Uid'},{ name: 'Name', mapping: 'Name'}],
data:params.formInitialData
}),
triggerAction:'all',
mode:'local',
vtype:'LovCombo'
}

appreciate ur help thnks.

jsakalos
2 Jun 2009, 12:14 PM
Set valueField and displayField.

Maharshi
2 Jun 2009, 12:21 PM
That works !!

Thanks a million.

supercharge2
3 Jun 2009, 2:27 PM
I have been using the lovcombo and as of Ext-3.0-rc1.1 it has been working just fine. I just moved to Ext-3.0-rc2 and now when ever I select more than one item it blanks the field choices on blur. Here is my combo:


new Ext.ux.form.LovCombo({
fieldLabel: 'Products',
width: 300,
hideOnSelect: false,
maxHeight: 200,
store: auxillaryListStore,
triggerAction: 'all',
valueField: 'AuxillaryId',
displayField: 'AuxillaryDescription',
hiddenName: 'AuxillaryId',
mode: 'local'
})

Any ideas would be appreciated.

jsakalos
4 Jun 2009, 12:44 AM
Not ported yet; waiting for Ext 3.0 stable.

supercharge2
9 Jun 2009, 7:34 AM
Here is a workaround posted by Bashev:


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

proximus121
10 Jun 2009, 7:14 AM
Hello Saki,

I have a Form Panel with 2 TextFields and a TabPanel with many tabs displaying various information. Two of these tabs contain ColumnModels and in one column of each I'm using LovCombo.

That is the setup, now for the problem :)

Each LovCombo works fine individually but when I use the first one and then I want to use the second one there are display problems (the content of the combo is shown somewhere in the upper left of the browser and the combo itself appears truncated). If I use hideMode: 'offsets' in the tabPanel config , the combo is displayed correctly but the contents don't appear at all when clicking the arrow.

This behaviors appears only when i use the LovCombo from the first Tab and then the one from the second. If I use the second and then the first tab it works fine... but returning to the second makes the problem appear again.

On top of that i get Permission denied to get property XULElement.nodeType when using the Combos.The two Combos are identical

var lc = new Ext.ux.form.LovCombo({
id:'multiselect',
width:350,
hideOnSelect:false,
maxHeight:200,
store: userStore,
triggerAction:'all',
valueField:'name',
displayField:'name',
mode:'local',
allowBlank: true
});

Can you tell me what I'm doing wrong?

Thanks

jsakalos
10 Jun 2009, 8:16 AM
Same id for both combos?

proximus121
10 Jun 2009, 11:43 AM
Yes. Is that the problem?

I forgot to tell you that each Tab that contains a LovCombo is written in its own js file and called in the TabPanel configuration

jsakalos
10 Jun 2009, 12:35 PM
Elements must not have same ids in one html page.

proximus121
11 Jun 2009, 12:47 AM
Of course... thank you!

Gustavo Silva
15 Jun 2009, 5:22 AM
Good morning, Saki.

I need, in my current project, list in the LovCombo options that may or may not be selected ... in this case, some checkboxes need to be DISABLED... the component allows it? I tried to implement a new function directly in the Ext.ux.LovCombo.js, similar to the function setValue, but without success.


Could help me with this?


Thanks for attention.


* Please, excuse me for my english

jsakalos
15 Jun 2009, 7:21 AM
LovCombo does not have a concept of disabled items; the idea was not to include unwanted items in the store.

Gustavo Silva
15 Jun 2009, 7:29 AM
LovCombo does not have a concept of disabled items; the idea was not to include unwanted items in the store.

yes, yes. My attempt was trying to disable the option in command "r.set (this.checkField, checked);", on function setValue, try something like "r.set ("disabled", true);" ... but nothing happened. Anyway, thanks. :)

gomby
16 Jun 2009, 1:01 AM
Sorry, I need sleep too.
Please disregard.. Another user in this thread has a solution I used...

thanks anyway
What is the solution for this problem?

Alcoholov
16 Jun 2009, 5:24 AM
a little combination between "lov" and "twin" combo




Ext.ns('Ext.ux.form');

/**
* @class Ext.ux.form.TwinLovCombo
* @extends Ext.ux.form.LovCombo
*/
Ext.ux.form.TwinLovCombo = Ext.extend(Ext.ux.form.LovCombo, {

trigger1Class:''
,trigger2Class:''
,trigger2Id: Ext.id()
,fireTrigger2Events:true

,getTrigger2Button: function() {
return Ext.get(this.trigger2Id);
}

// {{{
,initComponent:function() {

// setup config
var config = {
triggerConfig:{
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class}
,{tag: "img", id: this.trigger2Id, src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
]}
};

// apply config
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);

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

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

if(true === this.fireTrigger2Events) {
this.addEvents('beforetrigger2click', 'trigger2click');
}
} // eo function initComponent
// }}}

,initTrigger:Ext.form.TwinTriggerField.prototype.initTrigger
,getTrigger:Ext.form.TwinTriggerField.prototype.getTrigger
,onTrigger1Click:function() {
this.onTriggerClick.apply(this, arguments);
}
,onTrigger2Click:function(e, el) {
if(true === this.fireTrigger2Events) {
if(false !== this.fireEvent('beforetrigger2click', this)) {
this.fireEvent('trigger2click', this);
}
}
}
}); // eo extend

// register xtype
Ext.reg('twinlovcombo', Ext.ux.form.TwinLovCombo);

dclaussen
18 Jun 2009, 12:31 PM
First of all, great widget! Nice work.

Second, I grabbed the latest code from your website (http://lovcombo.extjs.eu/) and found one minor issue.

How to recreate the issue:
1. Start from the example code (lovcombo.js) posted on your web site.
2. Change any one of the entries in the combo to be "Hello<br>There".
3. Notice that in the actual combo dropdown (with the checkboxes), the <br> is interpreted as actual HTML. "Hello" appears on one line and "There" appears on the next line.
4. If you click on the checkbox, the item is added to the list of selections. This time, however, it is displayed with the HTML escaped "Hello<br>There".

To fix this, I took the approach that items in the store will always be escaped by the widget (this is sort of opposite of the typical Ext way, but anyway....)

To fix it, I changed line 71 of Ext.ux.form.LovCombo.js from this:


+'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>'


to this:


+'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ ':htmlEncode}</div>'


Apologies if this has been mentioned previously in the thread but there are a huge number of postings so I just skipped ahead to the end.

-DC

jsakalos
18 Jun 2009, 1:54 PM
Thanks, it makes LoveCombo more bullet proof.

walta
19 Jun 2009, 11:47 AM
Great component. I'm having an odd problem though that I don't see mentioned anywhere.

When I select multiple items the value updates properly (a proper comma-delimited list). However, when I click away from the combo (basically do anything that makes it lose focus) then the combo box closes (expected) but the value field is cleared. If I trigger the combo again my selections are preserved but the value field stays blank until I select or deselect something.

I see this in IE6, IE8 and FF 3.0.11 across two different machines. I see it locally in my code (which is almost a perfect copy of your code right now) and I can see the behaviour on your site (http://lovcombo.extjs.eu).

I'm trying to debug it but I thought I would throw it up in case I'm doing something really stupid and obviously wrong.

jsakalos
19 Jun 2009, 12:33 PM
I know about it; something must have changed in Ext, the site runs on latest SVN. I need to analyze it and find a workaround.

walta
19 Jun 2009, 1:05 PM
We run fairly static code here (large project). We have Ext JS 2.2 so the problem exists there as well.

So far it looks like some additional event is coming in after the onRealBlur code completes. That's when the value gets wiped.

walta
22 Jun 2009, 7:32 AM
Found my problem.

I took your clean example and ran it separately on my machine. Using a clean Ext 2.2 copy I could not repro the problem. I pulled over our copy of Ext 2.2 (which should be identical) and still no repro. I even added in Prototype to eliminate a variable but no luck there.

Then I brought over some of the attributes I had put on the lovcombo in my form. Bingo.

I had added 'forceSelection: true' and that was the problem. The doForce function was clearing the value text because it did not match any selections in the list. I removed the forceSelection and the problem went away.

Unfortunately your default example does not use forceSelection but perhaps this will provide a clue for tracking down the problem with the sample. Perhaps they changed forceSelection to default to true?

Thanks again for the awesome component.

anaju
22 Jun 2009, 10:57 AM
Hi,

I have a problem in populating the LOVCombo with the preselected values.

The error in Firebug :
this.el is undefined
[Break on this error] return this.el.dom.value = (v === null || v === undefined ? '' : v);


If i leave setValue on the combo and load the form (to see if the component is rendered properly) the form is loaded with the list of values and when I use setValue in Firebug, it works perfect...


Any help would be appreciated.

jsakalos
22 Jun 2009, 12:05 PM
The line producing the error is not in the LovCombo source. Most likely the call tries to access an html element that is not there yet, not rendered.

BTW, have you tried to specify value:yourValue in config instead of calling setValue explicitly?

anaju
23 Jun 2009, 6:07 AM
Hi Saki,
Thanks for the quick reply...

The error : If the line "lovcombo.setValue(listID)" is commented, there is no error produced.
I have tried to debug and got the error at the following lines in Microsoft Script Debugger:



ext-all-debug.js file

setRawValue : function(v){
return this.el.dom.value = (v === null || v === undefined ? '' : v);
},

The value:yourValue in config, gives us a default value selected for all users, which is not what my application needs.
I need to be able to populate the LovCombo with the user selected values dynamically.


Any help would be appreciated.


The line producing the error is not in the LovCombo source. Most likely the call tries to access an html element that is not there yet, not rendered.

BTW, have you tried to specify value:yourValue in config instead of calling setValue explicitly?

jsakalos
23 Jun 2009, 8:48 AM
error at the following lines in Microsoft Script Debugger: Use Firefox + Firebug for development.

setValue call is most likely too early. Call it later, in worst case defer its execution for some milliseconds.

mholyszko
25 Jun 2009, 2:42 AM
Hello,

I found a convenient way to automatically defer setValue for remote combos (in this case LovCombo) when store is not loaded yet.



,setValue:function(v) {
// added by mh
// deferred setvalue for remote combos
if(this.store.url != undefined && !this.store.getTotalCount())
{
// remote store, not loaded yet
this.store.on('load', function(){
this.setValue(v);
}, this, { single: true });
return false;
}
// end added by mh
You could also use this overwrite to completely get rid off such a problem in all comboboxes (unfortunately LovCombo does not utilize ComboBox:: setValue method so it has to be changed additionally):


// (2.2.1) deferred setvalue for remote combos
// @author mh
Ext.form.ComboBox.prototype.setValue = Ext.form.ComboBox.prototype.setValue.createInterceptor(function(v){
if(this.store.url != undefined && !this.store.getTotalCount())
{
// remote store, not loaded yet
this.store.on('load', function(){
this.setValue(v);
}, this, { single: true });
return false;
}
});
Cheers,
mh

Smeraldo
26 Jun 2009, 4:11 PM
Hi Saki,

I have a problem with the option checked:


Here my Javascript Code:


var store78 = new Ext.data.Store({
url: 'xml_cdcvalue.php?idcara=76&valori=100,125,15,150',
reader: new Ext.data.XmlReader(
{ record: 'riga', id: 'codval'},
[ { name: 'codval', mapping: 'codval' },{ name: 'checked', mapping: 'checked' } ]
)
});

var c78 = new Ext.ux.form.LovCombo({
id: 'idcc_78',
name: 'namecc_78',
value: '100,125,15,150',
displayField: 'codval',
checkField: 'checked',
editable: false,
emptyText: '',
store: store78,
fieldLabel: '* DN Corpo',
allowBlank: false,
msgTarget: 'side',
blankText: 'La Caratteristica <b>DN Corpo</b> &egrave; obbligatoria!',
width: 400,
hideOnSelect: false,
maxHeight: 200,
loadingText: 'Attendere...',
triggerAction: 'all',
resizable: true,
shadow: true,
valueField: 'codval',
mode: 'remote'
});
Here my XML Code generated by PHP:


<?xml version="1.0" encoding="utf-8"?>
<cdcvalue>
<riga>
<checked>1</checked>
<codval>100</codval>
</riga>
<riga>
<checked>1</checked>
<codval>125</codval>
</riga>
<riga>
<checked>1</checked>
<codval>15</codval>
</riga>
<riga>
<checked>1</checked>
<codval>150</codval>
</riga>
<riga>
<checked></checked>
<codval>200</codval>
</riga>
<riga>
<checked></checked>
<codval>25</codval>
</riga>
<riga>
<checked></checked>
<codval>250</codval>
</riga>
<riga>
<checked></checked>
<codval>300</codval>
</riga>
<riga>
<checked></checked>
<codval>350</codval>
</riga>
<riga>
<checked></checked>
<codval>40</codval>
</riga>
<riga>
<checked></checked>
<codval>400</codval>
</riga>
<riga>
<checked></checked>
<codval>450</codval>
</riga>
<riga>
<checked></checked>
<codval>50</codval>
</riga>
<riga>
<checked></checked>
<codval>500</codval>
</riga>
<riga>
<checked></checked>
<codval>550</codval>
</riga>
<riga>
<checked></checked>
<codval>600</codval>
</riga>
<riga>
<checked></checked>
<codval>650</codval>
</riga>
<riga>
<checked></checked>
<codval>750</codval>
</riga>
<riga>
<checked></checked>
<codval>80</codval>
</riga>
<riga>
<checked></checked>
<codval>900</codval>
</riga>
</cdcvalue>
And here the problem:

http://f.imagehost.org/0464/lov_error.png (http://f.imagehost.org/view/0464/lov_error)


Even if I have the checked flag in xml file, the value of LOV is blank.

I am using the latest developement version of your plugin.

Can you help me please?

Thanks!

s4brown
30 Jun 2009, 4:42 PM
Hi,

This extension is working great for me except for one small problem. I am loading a form via JSON, which seems to work, the hidden field is set, and the text region shows a list of values. The problem is that when I first trigger the combo nothing is checked until I lose focus, then re-trigger the combo. Is there something I am missing?

My lovcombo is set up like this:


xtype: 'lovcombo',
anchor: '85%',
fieldLabel: 'Category',
store: category_store,
name: 'category',
editable: false,
valueField: 'id',
displayField: 'name',
triggerAction: 'all',
hiddenName: 'category_ids',
allowBlank: false The JSON loading the form looks like this:


{"name":"test","category_ids":["1","2","3","4"]}

I also tried sending category_ids as a string of "1,2,3,4", but no luck.

Thanks again for a great component!

freddd
3 Jul 2009, 5:26 AM
Hello,
this works for me:


if(!Ext.isEmpty(this.getCheckedValue())){
this.value = this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if(this.hiddenField) {
this.hiddenField.value = this.value;
}
}


Add red code in setValue function.

freddd
3 Jul 2009, 5:36 AM
The problem was the following. Load data into form fields LovCombo. Field after the first expanded have no selected checkboxes. My problem solved:


Application.getPrivCombo = function(moduleName, moduleId) {
return new Ext.ux.form.LovCombo({
id: 'privileges_'+moduleName+'_combo',
fieldLabel: Application.lang['user_privileges_'+moduleName],
store: new Ext.data.JsonStore({
url: Application.config.responseDir + 'user/get_privilege_combo',
autoLoad: false,
totalProperty: 'total',
root: 'results',
baseParams: {module_id: moduleId},
fields: [
{name: 'action_id'},
{name: 'core_action_desc'}
]
}),
mode: 'remote',
valueField:'action_id',
displayField:'core_action_desc',
hiddenName: 'privileges_'+moduleName,
triggerAction: 'all',
editable: false,
width: 300,
listeners: {
render: function() {
//this.store.load();
this.lastQuery = null;
this.doQuery(null, true);
}
}
});
};


I don't no why it works :)

Smeraldo
5 Jul 2009, 5:26 AM
Hello,
this works for me:


if(!Ext.isEmpty(this.getCheckedValue())){
this.value = this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if(this.hiddenField) {
this.hiddenField.value = this.value;
}
}
Add red code in setValue function.

Hi freddd,

thank you, but your code doesn't work for me.

I resolved my problem in this (ugly) way, updating setValue function:



/**
* Sets the value of the LovCombo
* @param {Mixed} v value
*/
,setValue:function(v) {
if(v) {
v = '' + v;
if(this.valueField) {
this.store.clearFilter();
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);

tmp01 = this.getCheckedValue();
if ( tmp01 != "" )
{
this.value = tmp01;
}

tmp02 = this.getCheckedDisplay();
if ( tmp02 != "" )
{
this.setRawValue(tmp02);
}
else
{
this.setRawValue(this.value);
}

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

}
else {
this.value = v;
this.setRawValue(v);
if(this.hiddenField) {
this.hiddenField.value = v;
}
}
if(this.el) {
this.el.removeClass(this.emptyClass);
}
}
else {
this.clearValue();
}
} // eo function setValue

Maharshi
6 Jul 2009, 8:55 AM
Hi Saki,

I am using the LovCombo in my app.I included the file Ext.ux.util.js
and everything worked fine.
However now i am minifying my files for production purpose.
and running the app shows this error saying 'RegExp.escape function is missing. Include Ext.ux.util.js file.' .I checked and double checked and again checked to see if my minified file contains the Ext.ux.util.js .I have it there.I am including them with my files than in Ext package for some special reasons.I made sure there is no namespace medling.
Please advice on what am i missing here? and if you need any more info about this,please let me know.

Thanks
I appreciate your help .





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,

jsakalos
6 Jul 2009, 9:36 AM
How do you minify it? I use yuicompressor w/o any problems. Also check if you concatenate files in the right orger.

Maharshi
6 Jul 2009, 3:31 PM
yes order was wrong .

Thanks.now getting it correctly


How do you minify it? I use yuicompressor w/o any problems. Also check if you concatenate files in the right orger.

anaju
8 Jul 2009, 4:38 AM
Solved the issue by adding these lines in LovCombo.js, setValue function:


if(this.rendered) {
this.setRawValue(this.getCheckedDisplay());
}
Hi,

I have a problem in populating the LOVCombo with the preselected values.

The error in Firebug :
this.el is undefined
[Break on this error] return this.el.dom.value = (v === null || v === undefined ? '' : v);


If i leave setValue on the combo and load the form (to see if the component is rendered properly) the form is loaded with the list of values and when I use setValue in Firebug, it works perfect...


Any help would be appreciated.

DoS
9 Jul 2009, 4:33 AM
Has anyone got this extension to work in ExtJS 3.0? Somewhy no text is shown beside the checkboxes and after selection the value of combo is cleared.

kerbo
9 Jul 2009, 5:00 AM
Has anyone discovered a fix?

vivitron
9 Jul 2009, 5:30 AM
I'm having the same issue... Everything looks fine, but it doesn't keep the checked values. I downloaded the development version and still have the same issue.

I did test and getValue() returns nothing.. so it's not just a display issue.


Has anyone got this extension to work in ExtJS 3.0? Somewhy no text is
shown beside the checkboxes and after selection the value of combo is cleared.

vivitron
9 Jul 2009, 6:26 AM
So, the problem is that ExtJS is calling SetValue on blur (when you click off the combo box) and IF more than one value is selected, it is passing in a list but using the DisplayField vs the ValueField... If there is one value selected, it passes in the ValueField instead.

So,

1: Green
2: Red
3: Blue

if I select green, SetValue gets called with a value (v) of "1"
if I select Green & Red, SetValue gets called with a value (v) of "Green, Red"

This is only on blur, up until that point SetValue is getting called with the proper values (i.e. "1, 2")

I'm guessing that the combobox is trying to validate that the value has the same datatype as the value field is?

Anyway, my temporary fix is to check how many matches you get when v.length > 1 and if we have 0 matches against the store, return without doing anything.
I don't like this solution, but I'm not sure which event to override to keep the comboBox from calling setValue

This appears to work fine in all my testing, but I have not done extensive testing.

Here is the change to the code:


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

if (checked) matchCount++;
}, this);

if (v.length > 0 && matchCount < 1)
return;

v = '' + v;

rarerules
9 Jul 2009, 7:24 AM
Has anyone discovered a fix?

See the last post on the LovCombo page, people are working on it:

http://extjs.com/forum/showthread.php?t=32692&page=40

DoS
9 Jul 2009, 7:40 AM
Thanks for the information, I currently don't have enough time to look into it, but according to your description, it seems that beforeBlur has to be overridden, so try to undo your current changes and just add

,beforeBlur: function() {
}
and let me know if it works for you. Seems like it does for me. There are still places where there's no text rendered beside checkboxes, but that might be my mistake in configuration.

vivitron
9 Jul 2009, 7:43 AM
You're solution is much better than mine :)

It appears to work... so adding
,beforeBlur: function() { }
to LovCombo fixes the issue.

Thanks again!


Thanks for the information, I currently don't have enough time to look into it, but according to your description, it seems that beforeBlur has to be overridden, so try to undo your current changes and just add

,beforeBlur: function() {
}and let me know if it works for you. Seems like it does for me. There are still places where there's no text rendered beside checkboxes, but that might be my mistake in configuration.

vivitron
9 Jul 2009, 7:52 AM
As a side note, I do not have the issue of text not being rendered beside the checkboxes...

DoS
9 Jul 2009, 8:18 AM
It only happened when I used LovCombo with MetaForm, but I already made some configuration changes and got it working.

sdrew
9 Jul 2009, 11:19 AM
Has it behaved somehow differently before? 'Cause I was rearranging some files, hopefully haven't re-introduced an old bug.

Re behavior:
If you use mouse, then you just scroll where you need and click your item. When you use keyboard then you do it like this:
1. start typing
2. combo filters
3. use arrow to find the item to check
4. hit enter
5. type comma (or other separator)
6. return to point 1

I was playing with it quite a long time when designing and this is the fastest. The slowest is when you need to change between mouse and keyboard.

The above mentioned keyboard sequence does not work with IE6, IE7 or IE8 (does work in FF). Using your website posted example and latest dev version.

Works up until you hit enter to check the item, then focus is lost. If you click to regain focus and then enter a comma, the next letter you type gets inserted at the beginning of the line.

ie
Type: Door
Press Enter, Door is checked
Type: ,User (combo closes, and Comma ends up at begining: ie ,DoorUser)

Any ideas on where to start troublshooting that problem?

jsakalos
9 Jul 2009, 1:49 PM
I think I need to look deeper - there is some problem with checked values, there is an extra setValue call most likely introduced by some svn change. Can take a look in a week or so - I'm now away from home.

kerbo
9 Jul 2009, 2:42 PM
See the last post on the LovCombo page, people are working on it:

http://extjs.com/forum/showthread.php?t=32692&page=40

Thanks, the fix mentioned (overriding beforeBlur with an empty function) worked.

atian25
26 Jul 2009, 6:19 PM
beforeBlur : function(){
var val = this.getRawValue();
if(this.forceSelection){
if(val.length > 0 && val != this.emptyText){
this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';
this.applyEmptyText();
}else{
this.clearValue();
}
}else{
var rec = this.findRecord(this.displayField, val);
if(rec){
val = rec.get(this.valueField || this.displayField);
}
//this.setValue(val);
}
}


var rec = this.findRecord(this.displayField, val);
---return null, so, the value is set as the rawValue, cause this bug.

ajatib
27 Jul 2009, 8:01 AM
I need some help with this extension.
I use this perfectly in Ext 2.x, but in Ext 3 the value in the combo is cleared when combo lost focus in multiple selections.

Any ideas?
Other object to do the same?

Thanks

PS: I try to repair but i can't

steffenk
29 Jul 2009, 4:03 AM
Hi Saki,

didn't read complete thread, but somethings looks odd to me:
When testing your demo, and select more than one item, on lost focus the selection get's lost. When select only one, it's ok.

jsakalos
29 Jul 2009, 6:16 AM
Yes it's a bug introduced by some of 2.x svn updates. The problem is that framework calls setValue with text, non-array/list argument. I have no fix for that yet.

salihgedik
29 Jul 2009, 6:35 AM
Nice! Jozef Sakalos and his exapmles Best :)

steffenk
29 Jul 2009, 7:01 AM
Yes it's a bug introduced by some of 2.x svn updates. The problem is that framework calls setValue with text, non-array/list argument. I have no fix for that yet.

ah ok. I gave it a short test locally with Ext 3 final, but had some visual issues (select items and checkboxes are invisible)

but maybe it' only one of these days where better go outside and take a coffee :)

Thanks for your work, i'll look later if i find something.

vivitron
29 Jul 2009, 7:03 AM
I'm using it with Ext 3 final without issue... I just made the modifications to functionality that I spoke of earlier in this thread...

Jack9
4 Aug 2009, 4:01 PM
I was able to bring up the checkboxes by...

Including these 3 files:

<link rel="stylesheet" type="text/css" href="/css/Ext.ux.form.LovCombo.css">
<script type="text/javascript" src="/js/Ext.ux.util.js"></script>
<script type="text/javascript" src="/js/Ext.ux.form.LovCombo.js"></script>

Altering a few filepaths:
First, the header filepaths as shown may not work for you.
Second, the LovCombo.css has hardcoded paths. I use ext2/ and ext3/ so the stock paths of ../ext/ did not work for me.

Lastly, I used the ClearCache plugin for Firefox to ensure that I was grabbing the most recent files, which may be a problem depending on your webserver caching configuration.

Currently I am having a problem with the boxes resetting/value not displaying when clicking off the select (as most users will do). If the LovCombo loses focus, it is clearing the value(s) and alerts are telling me that the onRealBlur can't read any value.

Anyone else had this problem?

steffenk
5 Aug 2009, 1:03 AM
this problem is described in this thread and it's not fixed yet.

Jack9
5 Aug 2009, 12:03 PM
I think I fixed it (need someone to verify) for ext3, using Firefox.

Changed 2 things, first:


,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>{' + (this.displayField || 'text' )+ '}</div>'
+'</div>'
+'</tpl>'
;
}
// call parent
Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);

// 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;
}
});

} // eo function initComponent
Moved parent constructor call up:


,initComponent:function() {

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

// 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>{' + (this.displayField || 'text' )+ '}</div>'
+'</div>'
+'</tpl>'
;
}

// 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;
}
});

} // eo function initComponent
Second, I applied a fix (in a lil different manner) that was already listed on the forum to this bit of code:


,setValue:function(v) {
if(v) {
v = '' + v;
if(this.valueField) {
this.store.clearFilter();
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.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;
}
}
if(this.el) {
this.el.removeClass(this.emptyClass);
}
}
else {
this.clearValue();
}
} // eo function setValue
This is where I put it:


,setValue:function(v) {
var matchCount = 0;
this.store.each(function(r){
var checked = !(!v.match('(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))+'(' + this.separator + '|$)')); // ALL 1 Line
if(checked) matchCount++;
},this);
if(v.length > 0 && matchCount < 1)
{
return;
}
if(v) {
v = '' + v;
if(this.valueField) {
this.store.clearFilter();
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.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;
}
}
if(this.el) {
this.el.removeClass(this.emptyClass);
}
}
else {
this.clearValue();
}
} // eo function setValue
Everything renders and behaves correctly. Now to find out if the values are storing correctly. - Yup they do. Also verified it loads correctly via comma delimited id string like: lovcombo.setValue('1,2')

Jack9
6 Aug 2009, 10:15 AM
I'm not aware of how I am supposed to create the appropriate DataSource/Store for this thing.

How do you go about making this?:
[
[ int, string ],
[ int, string ],
[ int, string ]
]

I cant use arrays, I've tried a couple readers. I'm lost.

Tried using a standard remote datastore with a jsonreader and :


listeners:{
load:function(){
var i = 0;
var tempArray = new Array(this.data.length);
this.data.each(function(record){
tempArray[i++] = new Array(record.get('dataValue'),record.get('dataName'));
},this);
lovCombo.store = tempArray;
lovCombo.initComponent();
}
}HOWEVER, this only seems to work if you pre-populate the lov combo with a dummy store like:

store: [ [0,''] ]

but cannot be:

store: []

Dont forget that initComponent() to ensure the css is applied correctly.
While it looks ok after doing these things, it will auto-check elements with the exact same name onRealBlur, if 1 of them has been checked, even if they have different "values". I dunno if I can fix that.

...
I can correct the problem partially by changing more of the lovCombo code, but it still has a gotcha. The lovcombo saved and lovCombo.getValue returns the "value" of the first element with the same dropdown display name. This is not true if you select multiple values as a match condition can no longer be met somewhere.

Change:
var rv = this.getRawValue();
to
var rv = this.getValue();

Change:
if(v === r.get(this.displayField)) {
to
if(v === r.get(this.valueField)) {

It seems the failure is that the value is set wrong after onSelect fired and was handled at all levels.

Also, Ext.isDefined() // can anyone link me the source to this fun?

casbar
7 Aug 2009, 5:13 AM
Hello,
the LovCombo is working great, the only problem is that when i reload the page and the script set the field content to the right value and I open the comboBox, the checkboxes aren't checked...

That means the value is right which has been set after a reload, in my case "core, frame, test", but when I open the LovCombo the core, frame and test records has to be checked, but they aren't!!
If I click then on a row, the value contains only the cliked row value. :(

I searched the row, where the LovCombo checks the appropriate checkbox but I didn't found it in the setValue function!
Can anybody say me where the checkbox will be checked?


,setValue:function(v) {

if(this.store.url != undefined && !this.store.getTotalCount())
{
// remote store, not loaded yet
this.store.on('load', function(){
this.setValue(v);
}, this, { single: true });
return false;
}

var matchCount = 0;
this.store.each(function(r){
var checked = !(!v.match('(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))+'(' + this.separator + '|$)')); // ALL 1 Line
if(checked) matchCount++;
},this);
if(v.length > 0 && matchCount < 1)
{
return;
}
if(v) {
v = '' + v;
if(this.valueField) {
this.store.clearFilter();
this.store.each(function(r) {
var checked = !(!v.match(
'(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))
+'(' + this.separator + '|$)'))
;

r.set(this.checkField, checked);
console.log(r);
}, 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;
}
}
if(this.el) {
this.el.removeClass(this.emptyClass);
}
}
else {
this.clearValue();
}
} // eo function setValue


Please help me!!! :((

casbar

casbar
7 Aug 2009, 5:24 AM
here is a screenshot of my LovCombo AFTER reloading...
As you can see the checkboxes aren't checked!

http://img403.imageshack.us/img403/2230/namenlosp.jpg

Jack9
7 Aug 2009, 11:36 AM
if(this.store.url != undefined && !this.store.getTotalCount())
{
// remote store, not loaded yet
this.store.on('load', function(){
this.setValue(v);

console.debug("Looking at value:"+v);

}, this, { single: true });
return false;
}
Try debugging like so?

casbar
10 Aug 2009, 1:39 AM
this will come out in the console....



Looking at value:core,supplements
That means everything seems to be alright...
But the checkboxes not will be checked!! :((

Any idea?

Jack9
13 Aug 2009, 2:42 PM
I have found that the LovCombo dynamic loading does not do well without a couple specific conditions. Start with a statically declared, empty array (not array store).



var myLovCombo = new Ext.ux.form.LovCombo({
fieldLabel: "My list"
,hideOnSelect:false
,editable: false
,forceSelection: false
,allowBlank:false
,maxHeight:200
,store: [[0,'']]
,triggerAction:'all'
,mode:'local'
});

myRemoteDataStore.on('load',function(thisStore, records, options){

// assemble myArray[[int,'string'],[int,'string'],...]; from your records
// This depends on your own data format

myLovCombo.store = myArray;
myLovCombo.initComponent();

});


This should get it working.

dbassett74
17 Aug 2009, 9:08 AM
I have a suggestion for enhancement. I think this is a great control and will definitely make use of it. However, it would be nice to have the option for a single select (when not clicking on top of a checkbox) and close, like regular combobox behavior. But, if you click on a checkbox, it will remain open to allow the user to check additional items. Would this be hard?

casbar
18 Aug 2009, 2:48 AM
I have found that the LovCombo dynamic loading does not do well without a couple specific conditions. Start with a statically declared, empty array (not array store).





myRemoteDataStore.on('load',function(thisStore, records, options){

// assemble myArray[[int,'string'],[int,'string'],...]; from your records
// This depends on your own data format

myLovCombo.store = myArray;
myLovCombo.initComponent();

});

This should get it working.

Thank you for your answer but my store is a jsonstore and it gets data from a remote page:



store:new Ext.data.JsonStore({
url: Makeweb.baseUrl + '/caspar/filters/listcomponents',
root: 'components',
fields: ['id', 'name'],
autoLoad: true
}),
mode: 'remote',
valueField: 'id',
displayField: 'name',


Is it possible to convert such a json in an array like your function needs or do I can put the json variable as store?

casbar

Jack9
19 Aug 2009, 9:50 AM
I use a JSON Store as well. I convert it to an array. I'm sure there's a more elegant way to do it, but using what I know and without modifying the touchy LOVCombo further, I am happy enough that it works using an array.

dxi
20 Aug 2009, 11:23 PM
Yes it's a bug introduced by some of 2.x svn updates. The problem is that framework calls setValue with text, non-array/list argument. I have no fix for that yet.

Howdy Jozef,

Great extension this :)

Is there a fix on the horizon to make it 3.0 compatible? I'm reluctant to introduce the "hacks" presented on the latter pages of this thread. Alternatively I will just have to use another component like multiselect.

Cheers!

jsakalos
21 Aug 2009, 12:43 AM
Or you can try http://checktree.extjs.eu with one-level tree - it is well possible that I'll merge LovCombo with checktree...

steffenk
21 Aug 2009, 10:17 AM
Hi Saki,

the trees are nice, i like that.
What i feel is, that the checkbox should be in front of the icon, it looks odd to me that i check something in between the item. I don't know if it's hard to change the place.

dxi
25 Aug 2009, 1:28 AM
The trees are useful in their own right, but I'm not too keen on them taking up so much space when you expand the node. If you have a substantial list of items it could distort the layout quite a bit. So in that respect its not an alternative. I'd encourage you to keep the lovcombo if possible.

I did however come across another plugin - Ext.ux.form.SuperBoxSelect which could possibly work. If it can correctly populate the form field with multiple values that is. Also, it's not exactly pretty!

jack sparrow
30 Aug 2009, 10:12 AM
here is a screenshot of my LovCombo AFTER reloading...
As you can see the checkboxes aren't checked!

http://img403.imageshack.us/img403/2230/namenlosp.jpg


Hi there...I have the same problem of casbar.

I relaod my combobox's store (Json) whit this code (in LovCombo.js)


onBeforeQuery:function(qe) {
qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + this.separator + ']*'), '');
this.store.reload();
},


The store, and then the combobox items, are correctly reloaded...but the values, cheched previously, after reload become unchecked.....like in the attached picture!!

Any solution?

Jack

Zolcsi
1 Sep 2009, 2:54 AM
Hi folks,

I had a problem like this with extjs 3:
when I selected multiple elements in the lovcombo, then after the blur event the combo was cleared.
I was able to solve this, by commenting out this line:

,blur:this.onRealBlur (Line 84)

And renaming the onRealBlur method to beforeBlur

So basically I replaced Ext.form.ComboBox.beforeBlur with Ext.ux.Form.LovCombo.onRealBlur.

I don't know if this could have any negative side-effects (I don't think so, until there is something changed in the ComboBox beforeBlur method).

Hope this helps someone (and sorry if somebody posted this before)

bergstyle
2 Sep 2009, 1:01 AM
@Zolcsi thanks for taking the time to share that nugget. I ran into the same issue and your tip solved it right away!

tarini
2 Sep 2009, 12:44 PM
guys imagine that I have a function that convert a decimal integer to a bitmask and then to a list of separate separator value

13 -> 1101 -> "1, 4, 8"

how can I update LovField to accept and return this kind of value ? is it enough to override getValue and setValue ??

thanks :)

jsakalos
3 Sep 2009, 12:20 AM
Yes, it should be enough. You can extend LovCombo to do this conversion. E.g. BinaryLovCombo.

VictorSmirnov
3 Sep 2009, 10:28 PM
Hi folks,
I had a problem like this with extjs 3:
when I selected multiple elements in the lovcombo, then after the blur event the combo was cleared.
I was able to solve this, by commenting out this line: ...



Thanks a lot for the tip! It helped me too.
I think it's OK to overwrite beforeBlur method ;)

tarini
4 Sep 2009, 6:59 AM
Yes, it should be enough. You can extend LovCombo to do this conversion. E.g. BinaryLovCombo.

I've got some problem about setValue because this method is called "internally" a lot of time and overriding this caused some problem because new method now accepts a integer...

Here my *bad* (but working) solution:


Ext.ns("gext.widget.form.field");

gext.widget.form.field.BinaryLovCombo = Ext.extend(Ext.ux.form.LovCombo, {

//originally setValue
setInternalValue: function(v) {
if(v) {
v = '' + v;
if(this.valueField) {
this.store.clearFilter();
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.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;
}
}
if(this.el) {
this.el.removeClass(this.emptyClass);
}
}
else {
this.clearValue();
}
},

//call setInternalValue instead of setValue
beforeBlur:function() {
this.list.hide();
var rv = this.getRawValue();
var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));
var va = [];
var snapshot = this.store.snapshot || this.store.data;

// iterate through raw values and records and check/uncheck items
Ext.each(rva, function(v) {
snapshot.each(function(r) {
if(v === r.get(this.displayField)) {
va.push(r.get(this.valueField));
}
}, this);
}, this);
this.setInternalValue(va.join(this.separator));
this.store.clearFilter();
},

//call setInternalValue instead of setValue
onSelect:function(record, index) {
if(this.fireEvent('beforeselect', this, record, index) !== false){

// toggle checked field
record.set(this.checkField, !record.get(this.checkField));

// display full list
if(this.store.isFiltered()) {
this.doQuery(this.allQuery);
}

// set (update) value and fire event
this.setInternalValue(this.getCheckedValue());
this.fireEvent('select', this, record, index);
}
},

//call setInternalValue instead of setValue
selectAll:function() {
this.store.each(function(record){
// toggle checked field
record.set(this.checkField, true);
}, this);

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

//call setInternalValue after "parsing"
setValue: function(value) {
value = this.convertToList(value);
console.log(value);
this.setInternalValue(value);
},

getValue: function() {
return this.convertFromList(gext.widget.form.field.BinaryLovCombo.superclass.getValue.call(this));
},

convertToList: function(n) {
var b = parseInt(n,10).toString(2);
var r = "";
for(var i = 0; i<b.length; i++) {
if(b.substring(b.length-i-1, b.length-i) == "1") {
r+=Math.pow(2,i)+this.separator;
}
}
return r.substring(r,r.length-this.separator.length);
},

convertFromList: function(r) {
if(Ext.isEmpty(r)) {
return r;
}
p = r.split(",");
s = 0;
for(var i = 0; i<p.length; i++) {
s+=parseInt(p[i]);
}
return s;
}
});


what do you think about this?

oliverseitz
11 Sep 2009, 2:25 AM
Dear Saki,

thank you for this great LOV combobox!!! :)

Anyone an idea how to add a limit to this combobox?
My problem: in a list of e.g. 20 items the user should be able to select a max of 6 from this 20. when selecting more than this 6 elements an error window should popup...

Any idea how to add this behaviour to extjs ???

would help me very much...

thanx in advance.

bye,
Oliver

jsakalos
18 Sep 2009, 3:27 PM
You would need to add this logic in onSelect method. The logic would first verify that this is not the 7th selection and would cancel the select and display the message.

astagl
22 Sep 2009, 11:49 AM
Hey Saki,

I have a rather peculiar request from my boss for the already awesome LovCombo that we are using in our application. He wants to be able to have the ability to add a small bit of text in front of each value. I believe it will be used for quantities.

I've got the display already working, but my javascript skills aren't all that awesome yet. I'm not sure where to attack this and was wondering if you could give me a few pointers. I can think of three modifications of the code so far:

1. Disabling the select when clicking the input box
2. Collecting the extra values when setting the value
3. Updating the regular expression to catch the extra values and set them back to the input fields when rendering the editor

Here's a pic of what I have in mind:

http://i35.tinypic.com/2j10qrs.gif

Any help would be greatly appreciated!

Thanks again for the excellent editor.

jsakalos
23 Sep 2009, 1:39 AM
Well, this differs from the original idea of LovCombo significantly. Anyway, your checklist seems good and feasible.

Achim74
28 Sep 2009, 11:38 AM
I am using Lov Combo with ext 3.0.0. I applied the "onblur" patch and corrected the paths in the css files. everything works fine.

only the text gets not rendered next to the checkbox graphics. what can i do ?

when i click on the values they are shown properly ... i added a color option to the css file but it did not work.

thank you in forward.

Achim74
29 Sep 2009, 12:53 AM
I am using Lovcombo with an external datastore. When something changes in the datastore the lovcombo does not get rendered anymore. I load the store when I load the form.

In the example see RegioProfileStore.load(); Am I doing something wrong here ?






// Data store for order
var RegioProfileStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'regio/list'
}),
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalCount',
id: 'id',
fields: [
'id', 'name'
]
}),
remoteSort: true
});
RegioProfileStore.setDefaultSort('name', 'DESC');




var lc = new Ext.ux.form.LovCombo({
id:'regiocombo'
,name:'regiocombo'
//,renderTo:'lovcomboct'
,width:200
,hideOnSelect:false
,maxHeight:200
,fieldLabel: '<?= $t->_("Profile"); ?>'
,store: RegioProfileStore
,triggerAction:'all'
,valueField:'id'
,displayField:'name'
,mode:'local'
});

var tf = new Ext.form.TextField({
//renderTo:'textct'
id:'tf'
,width:200
,selectOnFocus:false
,listeners:{

focus:function() {
alert(lc.getValue());
this.setValue(lc.getValue());}
}
});

// RegioAssign record for Json reader

var RegioAssignRecord = Ext.data.Record.create([
'id', 'name', 'inhalt_code', 'inhalt_datei', 'paket_config', 'news', 'default_code', 'default_datei', 'aktiv', 'regioassign', 'notizen'
]);


// RegioAssign edit form
var regioassignForm = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 175,
url: 'element/save',
defaultType: 'textfield',
reader: new Ext.data.JsonReader({
root: 'data',
successProperty: 'success'
}, RegioAssignRecord),
items: [
{
name: 'id',
xtype: 'hidden'
},
{
fieldLabel: '<?= $t->_("Name"); ?>',
name: 'name',
xtype: 'textfield',
disabled: true,
width: 200
},
lc,
tf
]

});

// RegioAssign edit window
RegioAssignWindow = function() {
RegioAssignWindow.superclass.constructor.call(this, {
title: '<?= $t->_("Assign profile"); ?>',
width: 500,
autoHeight: true,
//layout: 'fit',
height: '350px',
plain: true,
bodyStyle: 'padding:5px;',
buttonAlign: 'center',
modal: true,
closable: false,
items: regioassignForm
})
};

Ext.extend(RegioAssignWindow, Ext.Window, {
loadRegioAssign: function(id) {

// Load data in store
RegioProfileStore.load();

RegioAssignWindow.setTitle('<?= $t->_("Assign profile"); ?>');
RegioAssignWindow.show();

regioassignForm.getForm().load({
url: 'element/load?id='+id,
waitMsg: '<?= $t->_("Loading"); ?>',
waitTitle: '<?= $t->_("Please wait"); ?>...',
failure: function(form, action){
Ext.Msg.alert('<?= $t->_("Error"); ?>', '<?= $t->_("Error"); ?>: '+action.failureType);
},
success: function(form, action){
console.debug("Data Property id: "+action.result.data.id);
console.debug("Data Property name: "+action.result.data.name);
console.debug("Data Property code: "+action.result.data.inhalt_code);
console.debug("Data Property datei: "+action.result.data.inhalt_datei);
console.debug("Data Property paket: "+action.result.data.paket_config);
console.debug("Data Property news: "+action.result.data.news);
console.debug("Data Property default_code: "+action.result.data.default_code);
console.debug("Data Property default_datei: "+action.result.data.default_datei);
console.debug("Data Property aktiv: "+action.result.data.aktiv);
console.debug("Data Property remoteassign: "+action.result.data.nix);
console.debug("Data Property notizen: "+action.result.data.notizen);

Ext.getCmp('regiocombo').setValue(action.result.data.regioassign);
}
});
}
});

var RegioAssignWindow = new RegioAssignWindow();

// Save button
RegioAssignWindow.addButton({
text: '<?= $t->_("Save"); ?>',
handler: function(){

tf.setValue(lc.getValue());
alert(tf.getValue());

regioassignForm.getForm().submit({
url: 'element/save',
waitMsg: '<?= $t->_("Saving"); ?>',
waitTitle: '<?= $t->_("Please wait"); ?>...',
success: function (form, action) {
RegioAssignWindow.hide();
form.reset();
RegioAssignGridStore.reload();
Ext.Msg.alert('<?= $t->_("Success"); ?>', '<?= $t->_("Data was saved"); ?>');
},
failure: function(form, action) {
if (typeof(action.result) != undefined)
Ext.MessageBox.alert('<?= $t->_("Error"); ?>', '<?= $t->_("Error has occured. Please check your input"); ?> (<?= $t->_("Failure type"); ?>: ' + action.failureType + ')');
else
Ext.MessageBox.alert('<?= $t->_("Error"); ?>', action.result.message);
}
});
}
});

// Cancel button
RegioAssignWindow.addButton('<?= $t->_("Cancel"); ?>', function(){
RegioAssignWindow.hide();
regioassignForm.getForm().reset();
});

jsakalos
29 Sep 2009, 6:45 AM
The rendering should be independent of data, I'd suspect that the problem is elsewhere.

epoks
1 Oct 2009, 5:17 AM
Hi all,

Here is an override to add an item to de/select all items.

This override adds an entry "All" in list if Ext.ux.LovCombo.addSelectAllItem = true.
A css class ("ux-lovcombo-list-item-all") allows to modify the style of the "allItem".



Ext.override(Ext.ux.form.LovCombo, {

//True for use selectAll item
addSelectAllItem:false,

//Value of valueField for selectAll item
selectAllValueField: '_all',

//Value of textField for selectAll item
selectAllTextField: 'All',

//Toggle selectAll item
allSelected:false,

//Select correct action for selected record
onViewClick : function(doFocus){
var index = this.view.getSelectedIndexes()[0];
if (this.addSelectAllItem && index == 0) {
this.toggleAll();
}else {
var r = this.store.getAt(index);
if(r){
this.onSelect(r, index);
}
if(doFocus !== false){
this.el.focus();
}
}
},

//Specificaly css class for selactAll item : ux-lovcombo-list-item-all
initComponent:function() {

// template with checkbox
if(!this.tpl) {
this.tpl =
'<tpl for=".">'
+ '<tpl if="' + this.valueField + '==\''+this.selectAllValueField+'\'">'
+'<div class="x-combo-list-item ux-lovcombo-list-item-all">'
+'<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>'
+ '<tpl if="' + this.valueField + '!=\''+this.selectAllValueField+'\'">'
+'<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>'
+'</tpl>'
;
}

// 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;
}
});

},

//Escape selectAll item value if it's here
getCheckedValue:function(field) {
field = field || this.valueField;
var c = [];

// store may be filtered so get all records
var snapshot = this.store.snapshot || this.store.data;

snapshot.each(function(r, index) {
if(((this.addSelectAllItem && index > 0) || !this.addSelectAllItem) && r.get(this.checkField)) {
c.push(r.get(field));
}
}, this);

return c.join(this.separator);
},

//Using allChecked value
setValue:function(v) {
if(v) {
v = '' + v;
if(this.valueField) {
this.store.clearFilter();
this.allSelected = true;
this.store.each(function(r, index) {
var checked = !(!v.match(
'(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))
+'(' + this.separator + '|$)'))
;

r.set(this.checkField, checked);

if (this.addSelectAllItem && index > 0) {
this.allSelected = this.allSelected && checked;
}
}, this);

if (this.addSelectAllItem) {
this.store.getAt(0).set(this.checkField, this.allSelected);
}

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;
}
}
if(this.el) {
this.el.removeClass(this.emptyClass);
}
}
else {
this.clearValue();
}
},

// Create a specific record for selectAll item
initList : function(){
if(!this.list){

//add specific record
if(this.store && this.addSelectAllItem){
var RecordType = Ext.data.Record.create([this.valueField, this.displayField]);
var data = {};
data[this.valueField] = this.selectAllValueField;
data[this.displayField] = this.selectAllTextField;
this.store.insert(0, [new RecordType(data)]);
}

var cls = 'x-combo-list';

this.list = new Ext.Layer({
shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false
});

var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);
this.list.setWidth(lw);
this.list.swallowEvent('mousewheel');
this.assetHeight = 0;

if(this.title){
this.header = this.list.createChild({cls:cls+'-hd', html: this.title});
this.assetHeight += this.header.getHeight();
}

this.innerList = this.list.createChild({cls:cls+'-inner'});
this.innerList.on('mouseover', this.onViewOver, this);
this.innerList.on('mousemove', this.onViewMove, this);
this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));

if(this.pageSize){
this.footer = this.list.createChild({cls:cls+'-ft'});
this.pageTb = new Ext.PagingToolbar({
store:this.store,
pageSize: this.pageSize,
renderTo:this.footer
});
this.assetHeight += this.footer.getHeight();
}

this.view = new Ext.DataView({
applyTo: this.innerList,
tpl: this.tpl,
singleSelect: true,
selectedClass: this.selectedClass,
itemSelector: this.itemSelector || '.' + cls + '-item'
});

this.view.on('click', this.onViewClick, this);

this.bindStore(this.store, true);

if(this.resizable){
this.resizer = new Ext.Resizable(this.list, {
pinned:true, handles:'se'
});
this.resizer.on('resize', function(r, w, h){
this.maxHeight = h-this.handleHeight-this.list.getFrameWidth('tb')-this.assetHeight;
this.listWidth = w;
this.innerList.setWidth(w - this.list.getFrameWidth('lr'));
this.restrictHeight();
}, this);
this[this.pageSize?'footer':'innerList'].setStyle('margin-bottom', this.handleHeight+'px');
}
}
},

//Toggle action for de/selectAll
toggleAll:function(){
if(this.allSelected){
this.allSelected = false;
this.deselectAll();
}else{
this.allSelected = true;
this.selectAll();
}
}
});




.ux-lovcombo-list-item-all
{
border-bottom:1px solid silver;
}

jsakalos
1 Oct 2009, 3:06 PM
Thank you. I may include it in a next release.

Thomas Triplet
5 Oct 2009, 9:49 AM
For some reasons, only the first element is kept (on blur or on [enter]) after selecting several items. I'm using the LCB in an editor grid with remote JSON data. Am I doing something wrong?

Thanks for any input :)


editor: new Ext.ux.form.LovCombo({
typeAhead: true,
hidden: true,
hiddenName: 'substrateCombo_hidden',
triggerAction: 'all',
mode: 'remote',
store: new Ext.data.JsonStore( {
storeId: 'comboSubstrate_store',
root: 'data',
idProperty: 'protocol_name',
url: 'substrates.php',
idProperty: 'substrate_id',
fields: [ 'substrate_id', 'substrate_name']
}),
valueField: 'substrate_name',
displayField: 'substrate_name'
})

x5150
6 Oct 2009, 1:48 PM
I think I fixed it (need someone to verify) for ext3, using Firefox.

Changed 2 things, first:


,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>{' + (this.displayField || 'text' )+ '}</div>'
+'</div>'
+'</tpl>'
;
}
// call parent
Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);

// 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;
}
});

} // eo function initComponent
Moved parent constructor call up:


,initComponent:function() {

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

// 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>{' + (this.displayField || 'text' )+ '}</div>'
+'</div>'
+'</tpl>'
;
}

// 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;
}
});

} // eo function initComponent
Second, I applied a fix (in a lil different manner) that was already listed on the forum to this bit of code:


,setValue:function(v) {
if(v) {
v = '' + v;
if(this.valueField) {
this.store.clearFilter();
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.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;
}
}
if(this.el) {
this.el.removeClass(this.emptyClass);
}
}
else {
this.clearValue();
}
} // eo function setValue
This is where I put it:


,setValue:function(v) {
var matchCount = 0;
this.store.each(function(r){
var checked = !(!v.match('(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))+'(' + this.separator + '|$)')); // ALL 1 Line
if(checked) matchCount++;
},this);
if(v.length > 0 && matchCount < 1)
{
return;
}
if(v) {
v = '' + v;
if(this.valueField) {
this.store.clearFilter();
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.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;
}
}
if(this.el) {
this.el.removeClass(this.emptyClass);
}
}
else {
this.clearValue();
}
} // eo function setValue
Everything renders and behaves correctly. Now to find out if the values are storing correctly. - Yup they do. Also verified it loads correctly via comma delimited id string like: lovcombo.setValue('1,2')

Didn't work for me, but the other proposed solution from post #398 didn't either. Here is the code I'm using. I lose the checkbox values on blur. It only keeps one checked.




var lc = new Ext.ux.form.LovCombo({
id:'lovcombo'
,renderTo:'sfilter'
,width:150
,hideOnSelect:false
,maxHeight:200
,store: new Ext.data.SimpleStore({
fields:['id','version']
,data:[
['1','6.0']
,['2','6.1']
,['3','6.2']
]
})
,displayField:'version'
,valueField:'version'
,triggerAction:'all'
,mode:'local'
});
lc.initComponent();



Nevermind after adding this to my combobox config, it worked!



beforeBlur : Ext.emptyFn,

x5150
8 Oct 2009, 1:02 PM
What's the syntax to configure the data to have its box checked initially.


var lc = new Ext.ux.form.LovCombo({
id:'lovcombo'
,renderTo:'sfilter'
,disabled:true
,width:150
,hideOnSelect:false
,beforeBlur : Ext.emptyFn
,maxHeight:200
,store: new Ext.data.SimpleStore({
fields:['id','version']
,data:[
['1','6.0']
,['2','6.1']
,['3','6.2']
]
})
,displayField:'version'
,valueField:'version'
,triggerAction:'all'
,mode:'local'
});

Thomas Triplet
9 Oct 2009, 7:35 AM
For some reasons, only the first element is kept (on blur or on [enter]) after selecting several items. I'm using the LCB in an editor grid with remote JSON data. Am I doing something wrong?

I should mention that even the Saki's example page doesn't work on my computer. On blur, only the first element is kept, not all of them :((
Any tip would be greatly appreciated :)

Rotterdam
13 Oct 2009, 2:54 AM
Didn't work for me, but the other proposed solution from post #398 didn't either. Here is the code I'm using. I lose the checkbox values on blur. It only keeps one checked.




var lc = new Ext.ux.form.LovCombo({
id:'lovcombo'
,renderTo:'sfilter'
,width:150
,hideOnSelect:false
,maxHeight:200
,store: new Ext.data.SimpleStore({
fields:['id','version']
,data:[
['1','6.0']
,['2','6.1']
,['3','6.2']
]
})
,displayField:'version'
,valueField:'version'
,triggerAction:'all'
,mode:'local'
});
lc.initComponent();
Nevermind after adding this to my combobox config, it worked!



beforeBlur : Ext.emptyFn,


I noticed that setting a value like ''lc.setValue(['1,2']); would cause an error (v.match is not a function).

This can be fixed by changing:


,setValue:function(v) {
var matchCount = 0;
this.store.each(function(r){
var checked = !(!v.match('(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))+'(' + this.separator + '|$)')); // ALL 1 Line
if(checked) matchCount++;
},this); to:


,setValue:function(v) {
var matchCount = 0;
this.store.each(function(r){
v = '' + v;
var checked = !(!v.match('(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))+'(' + this.separator + '|$)')); // ALL 1 Line
if(checked) matchCount++;
},this);

x5150
13 Oct 2009, 3:05 PM
eh? looks the same can you highlight in red your changes.

Rotterdam
13 Oct 2009, 3:13 PM
heh, I swear I did highlight it before. My mistake, I've done it now.

Everything seems to work correctly now, which means I can now move over to EXTjs 3.

chullan
15 Oct 2009, 5:11 AM
Hi all,

Here is an override to add an item to de/select all items.

This override adds an entry "All" in list if Ext.ux.LovCombo.addSelectAllItem = true.
A css class ("ux-lovcombo-list-item-all") allows to modify the style of the "allItem".



thank you very much for this code.
It is working fine in my system except that I need to click twice to open the window (which include lovcombo) and to click twice to select "ALL" item.This issue exists only the first time.Then onwards it works normally.Any help is appreciated.

thanks

siebertm
16 Oct 2009, 2:12 AM
possibly being an right now, but you DO know that LovCombo doesn't work with 2.3, do you?

oliverseitz
19 Oct 2009, 4:58 AM
Hi!

Any idea / solution for the "missing-selected-elements-after-blur" problem?

I am facing the same problem and dont know how to handle...

I can select the elements, they get shown in filed above the LOV but after blur everything behind the first element gets erased and also is not stored in LOV.

:((:((:((:((

Any help? Thanx in advance...

bye
Oliver

Thomas Triplet
19 Oct 2009, 7:57 AM
Hi!

Any idea / solution for the "missing-selected-elements-after-blur" problem?

I am facing the same problem and dont know how to handle...

I can select the elements, they get shown in filed above the LOV but after blur everything behind the first element gets erased and also is not stored in LOV.

:((:((:((:((

Any help? Thanx in advance...

bye
Oliver

+1 :((

x5150
19 Oct 2009, 10:58 AM
oliver, you did all the fixes/suggestions talked about here?

fitzkarraldo
20 Oct 2009, 8:35 AM
Hello Saki,
I found this component very interesting and a good solution to manage multiple relationship between db tables...

My problem is that I've found some things that don't work as I would expect...More in details, I'm trying to pre-populate the component with a set of values that I have in a JSON object server response. In this object I have a 'checked' property and if I set it to true, I have the following situation:
- checkfields are checked correctely
- the of the LovCombo gets not updated with the list of values checked
- if I check/uncheck one or more entries, the textfield is immediatly updated with right values

Is this component designed to receive a JSON response and update itself according to received values? Am I doing something wrong?!?

Here http://pastie.org/662225 I pasted a simple sample of my problem, where I simulated my problem using a local store

Thanks a lot!

johnathanhebert
23 Oct 2009, 10:18 AM
Hi!

Any idea / solution for the "missing-selected-elements-after-blur" problem?

I am facing the same problem and dont know how to handle...

I can select the elements, they get shown in filed above the LOV but after blur everything behind the first element gets erased and also is not stored in LOV.

:((:((:((:((

Any help? Thanx in advance...

bye
Oliver

It seems the problem with "missing-selected-elements-after-blur" is due to the fact that the getCheckedDisplay() method adds a space after every occurance of the separator... but then that space is not accounted for in the setValue() where the "checked" property of each record is set.

To make it work you can just (optionally) check for that space in the setValue() method... test for a [space] followed by a [question mark] (as shown in red below) -- you will also have to override the beforeBlur() method to check if there is a hiddenField... this worked for me.



var checked = !(!v.match(
'(^|' + this.separator + '\\s?)' + RegExp.escape(r.get(this.valueField))
+'(' + this.separator + '|$)'))
;


Add this after the Ext.extend() method call in the lovcombo file (line changed in red):



Ext.override(Ext.ux.form.LovCombo,{
beforeBlur : function(){
var val = this.hiddenField ? this.hiddenField.value : this.getRawValue();
if(this.forceSelection){
if(val.length > 0 && val != this.emptyText){
this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';
this.applyEmptyText();
}else{
this.clearValue();
}
}else{
var rec = this.findRecord(this.displayField, val);
if(rec){
val = rec.get(this.valueField || this.displayField);
}
this.setValue(val);
}
}
});

hpet
29 Oct 2009, 8:02 AM
Overriding or adding this line of code to the lovcombo should fix clearing issues on loosing focus:



beforeBlur: Ext.emptyFn

Andreas B.
4 Nov 2009, 6:52 AM
+1 :((

Same Problem here. The solution mentioned by hpet does not work because with this solution it is not possible to deselect all checkboxes. Also the fix mentioned by johnathanhebert does not work for me.
I am looking forward to a fix, because I want to use this great user extension. But with this bug it is not possible to use it.

Thomas Triplet
5 Nov 2009, 1:27 PM
Overriding or adding this line of code to the lovcombo should fix clearing issues on loosing focus:



beforeBlur: Ext.emptyFn


That did the trick!
Thanks dude

cbhawk89
6 Nov 2009, 8:45 AM
The problem occurs when Ext.form.Combobox.preBlur is called. The findRecord function does not know anything about multiselect, i.e. a delimited string of display values, so it will return null in many cases. And so the setValue gets called with the display values as the parameter, which, will not work because a. The spaces after the commas, and b. These are the labels not the values, so if you have different values than labels, matches will not be found even with the solution suggested earlier of stripping out the spaces in the setValue funcition. I don't see any reason to set the value as the LovCombo already sets the rawvalue and the dom value. My solution is to override the onBlur with an empty function i.e. (Ext.emptyFn). This seems to be working for me thus far.


// private
beforeBlur : function(){
var val = this.getRawValue();
if(this.forceSelection){
if(val.length > 0 && val != this.emptyText){
this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';
this.applyEmptyText();
}else{
this.clearValue();
}
}else{
var rec = this.findRecord(this.displayField, val);
if(rec){
val = rec.get(this.valueField || this.displayField);
}
this.setValue(val);
}
},

Thomas Triplet
6 Nov 2009, 1:07 PM
Overriding or adding this line of code to the lovcombo should fix clearing issues on loosing focus:



beforeBlur: Ext.emptyFn


This actually worked for me =D> Thanks


[hope this won't go be trashed be the moderator like my few last posts...]

Rothariger
10 Nov 2009, 9:41 AM
the fix it doesnt work for me...



edit
------

forceSelection is making the noise...

Gonfi
11 Nov 2009, 7:39 AM
LovCombo is derived from ComboBox and thus fires the select event.

ComboBox is for single values, thus an 'unselect' doesn't really happen (a clear happens). But the valid/invalid events kinda solve that for me.

In the LovCombo I really miss the deselect event. I would like to act based on the fact that an option got removed, just like I can act based on an option being activated.

completej
20 Nov 2009, 12:28 PM
Overriding or adding this line of code to the lovcombo should fix clearing issues on loosing focus:



beforeBlur: Ext.emptyFn


+1 to this solution, as:


Ext.override(Ext.ux.form.LovCombo, {
beforeBlur: Ext.emptyFn
})
prior to an onReady function in my main page (fwiw, to those saying it isn't working for them.

chiefclaudio
29 Nov 2009, 7:06 AM
SORRY, QUESTION WAS ALREADY SOLVED I SEE THNX

Thnx for the great component, lovCombo.

It works nice but one thing i do not understand is that when i am checking some options in the lovcombo and i click outside the combo the checkboxes gets unchecked. When i close the combo with the combo arrow the checkboxes do not get unchecked.

I saw your demo and i noticed the same behaviour.

How can i have the lovcombo to not uncheck the checked values when clicking outside of the lovcombo.

My code is the same as the demo code provided at: http://lovcombo.extjs.eu/

brainunit
4 Dec 2009, 5:23 PM
Hi folks, can someone share LovCombo sources over internet? Looks like extjs.eu (http://extjs.eu) is down.

TIA, Oleg.

Gadbury
5 Dec 2009, 7:34 AM
EDIT: Sorry, must be screen-blind. I see the issue has been resolved twice, above!

Hi,

Thanks very much for your time and effort in developing this component.

I have an issue with my LovCombo. I am able to select multiple fields with the check boxes but when I click outside of the component (to confirm my selections), the text field shows just the first selection. When I look at the drop-down list again, only my first selection is checked.

If I select more than one check box and press the Esc key, all selections are shown in the text field seperated by commas (as expected).

Below is my code:



var trackStore = new Ext.data.JsonStore({
autoLoad: true, //autoload the data
url: 'TrackAction_jsonList.action',
root: 'trackList',
fields: ['name']
});

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

chiefclaudio
14 Dec 2009, 7:59 AM
i really like this lovcombo. But i would like to give the user an option to deselect, the currently selected options. This will be done with an extra "select all" option, which will deselect all currently selected options in the combo. can anyone please show me an example of how to have such an extra "select all" option in de combo?

jsakalos
15 Dec 2009, 2:19 AM
It's not very easy as combo takes items from the underlying store. You would probably need to add the "select all" option to the store. There is also other solution - to add "select all" on dropdown show. None of these is trivial to implement.

chelflores
23 Dec 2009, 5:45 AM
I am using the lovcombo but i have some problem when i use to transform existing combo box in html to be used as store for the lovcombo this is my code:


var filter = new Ext.ux.form.LovCombo({
id: 'dummy',
fieldLabel: 'Filter',
typeAhead: true,
lazyRender: true,
mode: 'local',
transform: 'relation',
forceSelection: true,
allowBlank: false,
triggerAction: 'all'
});


After i select items, when it blurs the items that i've select will be reset/unchecked.

jsakalos
23 Dec 2009, 6:40 AM
I've never thought about transforming combos. What could be a good reason for that?

Remy
24 Dec 2009, 1:47 AM
I'm not using the extension Saki but I have used many extensions in the past to leverage Ext with an existing HTML app, I would imagine the OP is in a similar position?

olriche38
6 Jan 2010, 7:12 AM
So is there a patch for using lovCombo 1.0 with ExtJS 3.1??

Can you tell me what and where I can modifie the code...

frederickd
6 Jan 2010, 1:15 PM
Is it confirmed that the extension does NOT work in 3.1? I was about to give it a try, so could use confirmation please.

Thanks!

jsakalos
7 Jan 2010, 3:03 AM
I haven't try. Give it a shot please and report back.

Thank you.

olriche38
7 Jan 2010, 4:21 AM
I try to use LovCombo 1.0 with ExtJS 3.1. But It works when I select 1 item. But if I select 2 or more items, when I quit the combobox there is no selection (the empty text come back).

dizor
7 Jan 2010, 6:38 AM
Same with 3.0

spiderman123
11 Jan 2010, 6:48 AM
I try to use LovCombo 1.0 with ExtJS 3.1. But It works when I select 1 item. But if I select 2 or more items, when I quit the combobox there is no selection (the empty text come back).

has someone got fixed version of LovCombo for extjs 3.x?

olriche38
12 Jan 2010, 12:33 AM
has someone got fixed version of LovCombo for extjs 3.x?

I don't think so, or I don't know

savva
13 Jan 2010, 12:44 PM
when instantiating the LovCombo, add the following config:


beforeBlur: Ext.emptyFn

it seems to be working for me.

jsakalos
14 Jan 2010, 11:45 AM
Just to inform you all, LovCombo is in the focus of my interest again as I will need it (its enhanced version) very soon in one of my projects.

So, news to come soon...

j_mmontero
4 Feb 2010, 8:36 AM
Great Job, Saki !! I tested using 3.0 with savva fixed and it is working.

malstroem
4 Feb 2010, 8:37 AM
Hi savva,

sorry - where do you put the beforeBlur: Ext.emptyFn ?

I tried with this code, but this doesn´t work for me.
As olriche38 mentioned everything works well when only checking one value, but things go weired when selecting more than one value...


{
id: 'xyz'
,xtype: 'lovcombo'
,beforeBlur: Ext.emptyFn
, ...


@Saki - when do you think will be very soon ;) ?

mbajema
5 Feb 2010, 8:14 AM
Saki--

Just a couple minor revision recommendations as you work on the new version:

1. Add a displaySeparator config option so that the form submission separator can be something different from what is used to separate the list as displayed to the user. When using an LOV combo on a list of values defined by the user, the possibility exists that the user will use a comma in one of the values. Rather than preventing that, it would be nice to submit with an alternate separator but still use a comma for display.

2. Support separator values such as the vertical bar--this current LOV breaks it because the separator value is not escaped in all RegExp calls.

Here is the updated code I am using that supports both of these:


// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
* Ext.ux.form.LovCombo, List of Values Combo
*
* @author Ing. Jozef Sakáloš
* @copyright (c) 2008, by Ing. Jozef Sakáloš
* @date 16. April 2008
* @version $Id: Ext.ux.form.LovCombo.js 285 2008-06-06 09:22:20Z jozo $
*
* @license Ext.ux.form.LovCombo.js is licensed under the terms of the Open Source
* LGPL 3.0 license. Commercial use is permitted to the extent that the
* code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/

/*global Ext */

// add RegExp.escape if it has not been already added
if('function' !== typeof RegExp.escape) {
RegExp.escape = function(s) {
if('string' !== typeof s) {
return s;
}
// Note: if pasting from forum, precede ]/\ with backslash manually
return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
}; // eo function escape
}

// create namespace
Ext.ns('Ext.ux.form');

/**
*
* @class Ext.ux.form.LovCombo
* @extends Ext.form.ComboBox
*/
Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {

// {{{
// configuration options
/**
* @cfg {String} selectAllOn the value of the option used as
* the select-all / deselect-all trigger
*/
selectAllOn: null,
/**
* @cfg {String} checkField name of field used to store checked state.
* It is automatically added to existing fields.
* Change it only if it collides with your normal field.
*/
checkField:'checked'

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

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

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

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

// 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
// }}}
// {{{
/**
* Disables default tab key bahavior
* @private
*/
,initEvents:function() {
Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);

// disable default tab handling - does no good
this.keyNav.tab = false;

} // eo function initEvents
// }}}
// {{{
/**
* clears value
*/
,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
// }}}
// {{{
/**
* @return {String} separator (plus space) separated list of selected displayFields
* @private
*/
,getCheckedDisplay:function() {
var re = new RegExp(RegExp.escape(this.separator), "g");
return this.getCheckedValue(this.displayField).replace(re, RegExp.escape(this.displaySeparator) + ' ');
} // eo function getCheckedDisplay
// }}}
// {{{
/**
* @return {String} separator separated list of selected valueFields
* @private
*/
,getCheckedValue:function(field) {
field = field || this.valueField;
var c = [];

// store may be filtered so get all records
var snapshot = this.store.snapshot || this.store.data;
snapshot.each(function(r) {
if (r.get(this.checkField) && r.data[this.valueField] !== this.selectAllOn)
c.push(r.get(field));
}, this);

return c.join(this.separator);
} // eo function getCheckedValue

,selectAllCheck:function() {
var snapshot = this.store.snapshot || this.store.data;
var selectAll = true;
snapshot.each(function(r) {
if (r.data[this.valueField] !== this.selectAllOn && !r.get(this.checkField)) {
selectAll = false;
return;
}
}, this);

return selectAll;
}

// }}}
// {{{
/**
* beforequery event handler - handles multiple selections
* @param {Object} qe query event
* @private
*/
,onBeforeQuery:function(qe) {
qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + RegExp.escape(this.separator) + ']*'), '');
} // eo function onBeforeQuery
// }}}
// {{{
/**
* blur event handler - runs only when real blur event is fired
*/
,beforeBlur:function() {
this.list.hide();
var rv = this.getRawValue();
var rva = rv.split(new RegExp(RegExp.escape(this.displaySeparator) + ' *'));
var va = [];
var snapshot = this.store.snapshot || this.store.data;

// iterate through raw values and records and check/uncheck items
Ext.each(rva, function(v) {
snapshot.each(function(r) {
if(v === r.get(this.displayField)) {
va.push(r.get(this.valueField));
}
}, this);
}, this);
this.setValue(va.join(this.separator));
this.store.clearFilter();
} // eo function onRealBlur
// }}}
// {{{
/**
* Combo's onSelect override
* @private
* @param {Ext.data.Record} record record that has been selected in the list
* @param {Number} index index of selected (clicked) record
*/
,onSelect:function(record, index) {
if(this.fireEvent('beforeselect', this, record, index) !== false){

// toggle checked field
record.set(this.checkField, !record.get(this.checkField));

// display full list
if(this.store.isFiltered()) {
this.doQuery(this.allQuery);
}

// set (update) value and fire event
if(record.data[this.valueField] === this.selectAllOn){
if(record.get(this.checkField)){
this.selectAll();
}else{
this.deselectAll();
}
}else{
this.setValue(this.getCheckedValue());
}
this.fireEvent('select', this, record, index);
}
} // eo function onSelect
// }}}
// {{{
/**
* Sets the value of the LovCombo
* @param {Mixed} v value
*/
,setValue:function(v) {
if(v) {
v = '' + v;
if(this.valueField) {
this.store.clearFilter();
this.store.each(function(r) {
if (r.data[this.valueField] === this.selectAllOn && this.selectAllCheck())
r.set(this.checkField, true);
else if (r.data[this.valueField] === this.selectAllOn)
r.set(this.checkField, null);
else {
var checked = !(!v.match(
'(^|' + RegExp.escape(this.separator) + ')' + RegExp.escape(r.get(this.valueField))
+'(' + RegExp.escape(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;
}
}
if(this.el) {
this.el.removeClass(this.emptyClass);
}
}
else {
this.clearValue();
}
} // eo function setValue
// }}}
// {{{
/**
* Selects all items
*/
,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());
} // eo full selectAll
// }}}
// {{{
/**
* Deselects all items. Synonym for clearValue
*/
,deselectAll:function() {
this.clearValue();
} // eo full deselectAll
// }}}

}); // eo extend

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

// eof

jsakalos
5 Feb 2010, 12:09 PM
Than you, I'll test it soon.

idmsch
17 Feb 2010, 1:38 AM
For me is also working only if I add

,beforeBlur: function() {}to the source code.

I am using ext 3.0.


One more bug that i noticed is that if the combobox is expanded and a page resize is made, then the expanded div is not placed in the correct position anymore.

Regards,
Andy.

lakshmi
22 Feb 2010, 5:45 AM
Hi Saki,

I am using LovCombo along with Ext2.2 and Ext3.0. But in my Ext2.2 version, lovcombo is causing rendering issues in IE6. I am using it inside a form panel and with column layout. Please let me know, whether this is an open issue and any fixes to suggest.

Thanks in advance.
Lakshmi





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,

f0rmycurry
22 Feb 2010, 9:21 AM
Hello,

I had a problem with losing items in the realBlur event. So, whenever I tick more than 1 item, and then click somewhere outside the combobox, so that the combo loses focus, all items are lost.

I figured that somehow the setValue function is called, and that the values are lost in these lines:

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

The error doesn't occur when I comment out these lines, and the component does not seem to have any unexpected behaviour either. So I was wondering, what exactly you're actually trying to do here?

Cheers,
Nick

jsakalos
22 Feb 2010, 11:18 AM
That is (was?) keyboard input handling. The part is not a problem in itself the problem is that an extra setValue is called. This logic will change in a future version - keep it commented until then.

fff398
26 Feb 2010, 6:12 AM
SOLVED - converted array to a simple store, and set the other parameters accordingly


having some issues with lovcombo displaying the list of values at all. If I choose a value, that value shows up in the box, but the list of value does not show anything. see image for clarity.

I am going to use a json store later with a database, but I am just trying to add a lovcombo to my forms.

My form are heavily nested for wrapping purposes and organization and to make a very complex window. This lovcombo is in a panel which is wrapped in another panel(with 5 others) which is wrapped in a tabpanel, then wrapped into a form panel, then wrapped in another tab panel, and finally wrapped in a window

EDIT: this form is also dynamically generated with a button click, not sure if that would make a difference



{
xtype: 'lovcombo',
store: [[1, "apple"], [2, "cherry"], [3, "orange"]],
colspan: 2
},
http://firedude328.tripod.com/lovcombo.JPG

EDIT: i dunno why the image doesn't work, but copy and paste it out
EDIT2: tried using stable and dev version, and linking the Ext.ux.form.LovCombo.css and Ext.ux.form.LovCombo.js on my webpage
EDIT3: extjs 3.1.1

EDIT4: tried it in standalone window 3.1.1 with no nesting or anything weird, no luck, tried it in 2.3 extjs and it works



Ext.onReady(function() {


var win = new Ext.Window({
closable: false,
collapsible: false,
draggable: false,
resizable: false,
items: [{

xtype: 'lovcombo',
store: [[1, 'apple'], [2, 'cherry'], [3, 'orange']],
mode: 'local',
triggerAction: 'all'

}]
});

win.show();
});

cnelissen
4 Mar 2010, 6:59 PM
Just a note to anyone interested in this thread, I developed a similar extension with completely different internals that may address some issues that people are having with Saki's extension (not to take anything away from Saki's fine work of course).

Its 3.1 compatible for anyone waiting on that...

Check out the thread at http://www.extjs.com/forum/showthread.php?t=93556.

jsakalos
5 Mar 2010, 6:29 AM
Looks good! I'd add space toggling too.

cmaster
10 Mar 2010, 10:15 PM
Are the lovcombo support ext2.0?

headshredder
11 Mar 2010, 3:14 AM
Thanks for the great extension.

A minor problem with disabling a LovCombo in IE7 (actually IE8 in compat mode): it result in a bit ugly rendering.

About single select... I did the following for some LovCombos that should allow only single select in a few cases:



lovcombo.on('select', function(cmb, rec, i) {
cmb.clearValue();
cmb.select(i);
});
It's probably not very solid, but it works for common usage.

EDIT:
The rendering of a disabled LovCombo is also poor with IE8 without compat-mode. I am using ExtJS 3.1.1. I have attached a small screenshot.

jsakalos
11 Mar 2010, 4:24 AM
I've read some posts that say that compat mode is generally troublesome in some cases - try to search it can give you more info. I'm on Linux so cannot test.

headshredder
11 Mar 2010, 4:49 AM
I figured it out already. The problem is with the generic ComboBox. The solution is simple. Instead of using


cmp.disable();use this


Ext.apply(cmp,{readOnly: true});The ComboBox will not appear disabled, but the list of values will not dropdown on a click.

aghextjs
16 Mar 2010, 1:17 PM
Hi,

I'm new to a project that is using ExtJS and the LovCombo. I have a page where the LovCombo is initially hidden on a collapsed formPanel. I am trying to set a defaultValue on the combo and have added a listener for the datastore onload event to set the value. But, I can't guarantee that the load request completes after the combo is rendered (I have set forceLayout to true so the combo is rendered even though hidden).

Is there a way to handle this situation? Sometimes the render completes before the datastore load and then the code works great, sometimes it is the opposite. Is there general strategy for this? I've been searching the forums all day but haven't found anything that addresses what I am seeing.

thanks!

ps. here is the basic setup of the datastore and the combo (not including the load listener)


var mystore = new Ext.data.JsonStore({
root: 'data',
url:methodURL,
reader:new Ext.data.JsonReader([
{name: 'label', mapping: 'label'},
{name: 'value', mapping: 'value'}]),
fields: ['label', 'value'],
autoLoad: true
});

var lc = new Ext.ux.form.LovCombo({
xtype: 'lovcombo',
id: fieldName,
width:110,
hideOnSelect:false,
store: mystore,
displayField:'label',
valueField:'value',
typeAhead: true,
mode:'local',
forceSelection: true,
triggerAction:'all',
emptyText:'Select...',
fieldLabel: fieldLabel,
name: fieldName,
hiddenName: 'source_hidden',
allowBlank:true,
anyMatch: true,
queryDelay:100,
listWidth:300,
typeAheadDelay:30000,
});