PDA

View Full Version : Ext.ux.Multiselect/ItemSelector [v2.2]



tjstuart
18 Sep 2007, 6:56 PM
Version 2.2 now available (http://extjs.com/forum/showthread.php?p=79550#post79550)


Version 2.0 of Ext.ux.Multiselect/ItemSelector now available.

User extension page http://extjs.com/learn/Extension:Multiselect

Demo page http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/Multiselect.html

Enhancements

General
- Now uses Animal's DDView

ItemSelector
- Move to top/bottom navigation buttons
- When using navigation buttons items remain selected in destination list

Multiselect
- Border dropped when marked invalid for better visuals (less jumping/popping)
- Validation for blank, min length and max length
- Ext.form.Field.getName() now returns correct name

@Animal -- Now using your DDView. Have an issue however:-

When multiple items are dropped anywhere outside a valid drop zone a runtime error occurs (Ext.Element.fly(this.dragData.ddel) has no properties) then drag no longer works.

@Galdaka -- Now using your icons

@andrei.neculau -- Incorporated all your suggestion except the GridEditor stuff. Many thanks for your efforts!

To all those who suggested enhancements that didnt make it in this release ... my apologies. Maybe next one.

Regards,

tjstuart

justinfalk
18 Sep 2007, 9:46 PM
Look great tjstuart! Thanks for all your work on this. One minor thing I noticed was that you have dragable spelled two different ways (draggable, dragable).

Thanks.

Justin

galdaka
18 Sep 2007, 10:19 PM
Woooo! Excellent work!

If you want any styled images contact me please ;) (Three state images in a sprite for example)

Work fine for me in IE6.

Thanks in advance,

andrei.neculau
19 Sep 2007, 1:14 AM
Looks nice :)

One thing that I need to clear is.. somehow on my system (modified 1.2) I get no flicker/border change as you do on version 2.0 when marking the field invalid.
I'll investigate.

[LATER EDIT]
Has to do with your onValid, onInvalid and the CSS classes. One has border 1px, one border 0.
Not to be self-centric, but I like my way better: without the two onValid, on Invalid and CSS like the following:

.x-combo-list.ux-mselect { border:0; overflow:auto; }
.x-combo-list-inner.ux-mselect-inner { border-bottom:0; }
.ux-mselect-pointer { cursor:pointer; margin:1px;}

vahrens
19 Sep 2007, 10:49 AM
Hello TJ,

do you plan a version for Ext 2.0 in the near future?

Volker

andrei.neculau
19 Sep 2007, 11:59 AM
@tjstuart

One thing that I simply wasn't aware of.. the concept is like this: getValue would return what you see, getRawValue would return the real value.

In this case getValue should have

returnArray.push(this.store.getAt(selectionsArray[i]).get(((valueField != null)? valueField : (this.valueField || this.displayField) )));and getRawValue should be left alone.

On the other hand this.el should be the hidden field.
HiddenField from the ComboBox has a purpose.. because ComboBox has the displayed text-input with displayField, and can also have a hidden field which relates to valueField, but with your MultiSelect you only have one field, which is the hidden field.

Conclusion: Needs a little bit of re-coding.

tjstuart
19 Sep 2007, 3:32 PM
Looks nice :)

One thing that I need to clear is.. somehow on my system (modified 1.2) I get no flicker/border change as you do on version 2.0 when marking the field invalid.
I'll investigate.

[LATER EDIT]
Has to do with your onValid, onInvalid and the CSS classes. One has border 1px, one border 0.
Not to be self-centric, but I like my way better: without the two onValid, on Invalid and CSS like the following:

.x-combo-list.ux-mselect { border:0; overflow:auto; }
.x-combo-list-inner.ux-mselect-inner { border-bottom:0; }
.ux-mselect-pointer { cursor:pointer; margin:1px;}


Problem there is that the widget then has no border at all and it is my opinion that this looks crap :) That's why I implemented the dual valid/invalid class switch so at least there is always a 1px border.

Maybe I'll re-visit this some other time.

Cheers

tjstuart
19 Sep 2007, 3:48 PM
@tjstuart

One thing that I simply wasn't aware of.. the concept is like this: getValue would return what you see, getRawValue would return the real value.

Conclusion: Needs a little bit of re-coding.

I see your point however personally I am unsure of the usefulness of obtaining the display values. I would have thought the typical use of both the Multiselect and ItemSelector is database bound where the underlying value is important not the the display value. Perhaps I'm being narrow minded ;)

I'm now quite busy with my real job and may be a few weeks before I could invest any real time in enhancing these widgets further. Therefore if you or anybody else would like to submit a working patch which addresses these or any other issues then please feel free.

Finally, thanks for your interest and input and helping to make things better :)

Cheers

tjstuart
19 Sep 2007, 4:45 PM
Hello TJ,

do you plan a version for Ext 2.0 in the near future?

Volker

Probably not until Ext2 is released.

Magicbob
19 Sep 2007, 5:19 PM
Just a word to congrats you and thanks you for this good job

Magicbob

andrei.neculau
20 Sep 2007, 12:14 AM
Problem there is that the widget then has no border at all and it is my opinion that this looks crap :) That's why I implemented the dual valid/invalid class switch so at least there is always a 1px border.

Maybe I'll re-visit this some other time.

Cheers

but it does have a border! Or at least it should.
When creating this.el, afterwards add this to make it a normal field:

this.el.addClass(this.fieldCls);
It will then be x-form-field, and it will have a border!

ThorstenSuckow
23 Sep 2007, 2:31 AM
Thx for the effort you put into implementing a multiselect! :)

Is there any chance we could get an editor for the list entries?

I needed to show an image in the entries itself (css), but on every refresh the entries transformed back to their original html specified in the Multiselect-class.

So, if a user could tell the class which html to use for rendering the cells, the painting of them could respect various states of the selection model, such as "isEditMode" (rendering a textfield), "isSelected", "isDisabled" and so on. If you know the CellEditor-components of Swing, you might know what I'm pointing at. If not, I'd be glad to propose the changes, just let me know (I'm a pure porgrammer and not very trusted with css, so I might request some help here).

tjstuart
24 Sep 2007, 3:38 PM
If not, I'd be glad to propose the changes, just let me know (I'm a pure porgrammer and not very trusted with css, so I might request some help here).

I'm a bit busy at the moment but feel free to submit any working enhancements/patches.

Cheers

jack.slocum
25 Sep 2007, 6:57 PM
tj, nice work. This is really sharp.

VinylFox
26 Sep 2007, 7:51 AM
Just ran into a bug....check it out, I made a demo page to illustrate the problem...

http://www.vinylfox.com/extjs/sandbox/multiselect.php

So the problem is with setValue, it seems to think a partial match is good enough, and selects the first option that matches partially, so if a value of '17' is in the list before '1' and you have setValue('1') it will select '17' instead of '1' which is further down the list.

I think this is because your using the Store's query function which in turn uses createFilterFn which essentially does this....


>>> value = new RegExp('1', "i");
function()
>>> value.test('1');
true
>>> value.test('17');
true

As you can see, both return true.

My regex knowledge is limited, so ill leave it to you guys to figure out a solution to this.

tjstuart
26 Sep 2007, 3:52 PM
Good find VinylFox I'll look into it.

mikich
26 Sep 2007, 5:30 PM
Hi All,
I just want to thank tjstuart - Brilliant work!,

And one issue I have, prevented me to sleep.
How can I to use 'Ext.ux.Multiselect' as single select?
And another one,
How can I prevent unselecting behavior of this, when click again on same item or on empty space?

Thanks again! to All of u.

tjstuart
26 Sep 2007, 5:56 PM
Ext.ux.Multiselect/ItemSelector [v2.1] now available.

Demo http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/Multiselect.html

Download http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/MultiselectItemSelector-2.1.zip



// 2.1 Fixes 27 Sept 2007
// - General
// - draggable now spelt correctly in all places :)
// - Queries to the store in setValue now match whole value correctly (rather than partial match)
// - ItemSelector
// - value now initialised onRender

tjstuart
26 Sep 2007, 6:42 PM
How can I to use 'Ext.ux.Multiselect' as single select?


Ummm not entirely sure what you mean. Perhaps you mean a ComboBox where you are only allowed to select a single item from a list?



How can I prevent unselecting behavior of this, when click again on same item or on empty space?

There has been a bit of discussion on how this should work. Some people don't like the CTRL/SHIFT clicking some do. Some want single click to perform select/de-select. Can't please everyone :(

The goal of the Multiselect widget was to replicate (as best as possible) the traditional HTML SELECT/MULTIPLE form element.

Cheers

gitey
26 Sep 2007, 9:47 PM
Hey
Can someone please help me? Am not able to load data in my itemSelector. Am able to get my itemSelector but there is no data. I used the same code posted in the example. But still not able to do it.
regards
gitey

tjstuart
26 Sep 2007, 9:57 PM
Hey
Can someone please help me? Am not able to load data in my itemSelector. Am able to get my itemSelector but there is no data. I used the same code posted in the example. But still not able to do it.
regards
gitey

Please post your complete example.

gitey
26 Sep 2007, 10:10 PM
Heres my code. Am using Ext 2.0 and i have tried the latest release of itemSelector as well as your v2.0.


var testData = [
['australia','1'],
['india','2'],
['china','3']
]
var test = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(testData),
reader: new Ext.data.ArrayReader({}, [
{name:'country', mapping:'country'},
{name:'id', mapping:'id'}
])
});
test.load();
/************************************ItemSelector**********************************/
var itemSelector = new Ext.ux.ItemSelector({

name : 'Country List',
fieldLabel : 'Countries',

//store : test,



dataFields : ['id', 'country'],

fromData : [['1', 'India'], ['2', 'Australia'], ['3', 'China'], ['4', 'Japan'], ['5', 'Brazil']],
toData : [['6', 'USA']],

msWidth : 100,
msHeight : 200,

valueField : 'id',
displayField : 'country'


});

tjstuart
26 Sep 2007, 10:17 PM
gitey,

Ext.ux.Multiselect/ItemSelector does not support Ext2.0. You will have to use Ext1.1.

gitey
26 Sep 2007, 10:35 PM
awww
anyways...thanks for the fast reply. i really liked the item selector and wanted to use in my application. Now due to deadlines of the project i need to search for an alternative
thanks for the reply
gitey

VinylFox
27 Sep 2007, 6:34 AM
// - Queries to the store in setValue now match whole value correctly (rather than

tjstuart - its working as expected now, nice turnaround. Thanks for your hard work on this great extension.

mikich
27 Sep 2007, 6:20 PM
Ummm not entirely sure what you mean. Perhaps you mean a ComboBox where you are only allowed to select a single item from a list?

tjstuart, actually you right, the ComboBox behavior answer for my needs 100%, exept one thing - the look, I like the open style (size="?") property in HTML select, exaclly as you used in Ext.ux.Multiselect.
Can I use this style ComboBox ?



<select name="x" id="x" size="5">
<option value="1" SELECTED>first</option>
<option value="2">second</option>
<option value="3">.</option>
<option value="4">..</option>
<option value="5">...</option>
</select>

The Ext.ux.Multiselect - is working perfect!

tjstuart
27 Sep 2007, 7:10 PM
mikich,

You could make Multiselect allow only single item selection by setting maxLength to 1 in the config options.

Cheers

FuryVII
28 Sep 2007, 1:31 PM
Great extension. I am having problem (user error) though. I am setting minLength to 1 and I expect the field to be marked invalid on form submit. Is this something I must implement myself, or do I just have it set up wrong?

tjstuart
1 Oct 2007, 5:04 PM
Great extension. I am having problem (user error) though. I am setting minLength to 1 and I expect the field to be marked invalid on form submit. Is this something I must implement myself, or do I just have it set up wrong?

On submit of your form you need to call the 'validate' method on the 'multiselect' widget.

andrei.neculau
1 Oct 2007, 10:55 PM
Great extension. I am having problem (user error) though. I am setting minLength to 1 and I expect the field to be marked invalid on form submit. Is this something I must implement myself, or do I just have it set up wrong?

Actually you would do

if (myForm.isValid()){myForm.submit(...);}

pixelwiz
5 Oct 2007, 12:35 PM
Hi All,

I can't get this to work at all with eitehr ExtJS 2.0 or 1.1.1

Any ideas?

In IE I get a JS error that says "Liine 17. Object doesn't support this property or method"

In Firefox, I get 2 errors:

Error: Ext.form.Field has no properties
Source File: js/Multiselect/Multiselect.js
Line: 107

Error: Ext.form.Field has no properties
Source File: js/Multiselect/Multiselect.js
Line: 107

Below is the code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FOC Participants Report</title>

<link rel='stylesheet' type='text/css' href='js/extjs_latest/ext-all.css'>
<link rel='stylesheet' type='text/css' href='js/Multiselect/Multiselect.css'>

<script type="text/javascript" src="js/extjs_latest/ext-base.js"></script>
<script type="text/javascript" src="js/extjs_latest/ext-all.js"></script>

<script type="text/javascript" src="js/Multiselect/Multiselect.js"></script>
<script type="text/javascript" src="js/Multiselect/DDView.js"></script>

<script type="text/javascript">
Ext.onReady(function()
{
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

/*
* Ext.ux.ItemSelector Example Code
*/

var formItemSelector = new Ext.form.Form({ labelWidth: 75 });

var itemSelector = new Ext.ux.ItemSelector({

name : 'itemselector',
fieldLabel : 'ItemSelector',

//store : null,

dataFields : ['code', 'desc'],

fromData : [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five']],
toData : [['6', 'Six']],

msWidth : 100,
msHeight : 200,

valueField : 'code',
displayField : 'desc'

});

formItemSelector.add(itemSelector);

formItemSelector.addButton('Get Value', function() { alert(formItemSelector.getValues(true)); })
formItemSelector.addButton('Mark Invalid', function() { itemSelector.markInvalid('Invalid'); })

formItemSelector.render('form-ct-itemselector');


});
</script>

</head>

<body>
hello
<div style="width:450px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<div id="form-ct-itemselector"></div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>

</body>
</html>

anjelika
7 Oct 2007, 8:04 AM
Heya,
I am using this excellent extension sience its first version, but now my customer asked me to make the Multiselect box fonts a bit smaller, so that they can see more of the options at one time.
Is there a simple way to do this?
I tried to search through css but couldn't find anything about this.
Thanks in advance.
Cristian

tjstuart
7 Oct 2007, 3:48 PM
Hi All,
I can't get this to work at all with eitehr ExtJS 2.0 or 1.1.1

Any ideas?

In IE I get a JS error that says "Liine 17. Object doesn't support this property or method"

In Firefox, I get 2 errors:

Error: Ext.form.Field has no properties
Source File: js/Multiselect/Multiselect.js
Line: 107

Error: Ext.form.Field has no properties
Source File: js/Multiselect/Multiselect.js
Line: 107


Hi pixelwiz,

Firstly this extension does not yet work with Ext2. Planning to upgrade when Ext2 goes beta/stable.

The error you are getting in IE seems to have something to do with the text above the widget "hello". If you remove it the error is gone. I think this might have something to do with Animal's DDView extension. I will investigate.

The error you are getting in Firefox ... I'm guessing this has to do with 'Ext.form.TextField.prototype.blankText' (line 107/Multiselect.js) not being valid in Ext2.

The extension works perfectly in Ext1.1.

Regards

tjstuart
7 Oct 2007, 3:56 PM
Heya,
I am using this excellent extension sience its first version, but now my customer asked me to make the Multiselect box fonts a bit smaller, so that they can see more of the options at one time.
Is there a simple way to do this?
I tried to search through css but couldn't find anything about this.
Thanks in advance.
Cristian

Hi Cristian,

There is no 'simple' way to change the font attributes for the Multiselect/ItemSelector widget only. You can however change the attributes of the 'x-combo-list-item' class specifically font-size. The downside with this approach is that all widgets that use this class will assume those attributes.

Regards

anjelika
8 Oct 2007, 8:48 AM
Hello,
Thanks for the tip.
Will try that and see how it affects the whole application.
Regards,
Cristian

vtswingkid
19 Oct 2007, 10:10 AM
The links seem to be down. Where can I get the source code.

foxguan
21 Oct 2007, 9:42 AM
First thank your excellent work, i am attracted by it.but the link of the demo and download is not available , when i click the link of the Ext.ux.Multiselect/ItemSelector [v2.0] ,the webpage shows the message as follow:


Object not found!

The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

If you think this is a server error, please contact the webmaster.
Error 404
www.figtreesystems.com
Mon Oct 22 03:12:20 2007
Apache/2.2.3 (Linux/SUSE)

Would you fix it ? your work is very helpful to me ,thank you !

tjstuart
21 Oct 2007, 5:13 PM
Sorry about that. Web Server upgraded over weekend. All back up now.

vtswingkid
22 Oct 2007, 9:59 AM
Nice work! I have added a few enhancements:
-imagePath: set to the path where the itemselector images are located
-switchToFrom: set to true to put the to box to the left of the from box
-enableToolbars: set to true to put a tool bar in the to and from boxes
these toolbars are accessed via toMultiselect.toolbar and fromMultiselect.toolbar
-allowDup: set to true to allow items to be copied to the "to" box multiple times

The dup required a small change to DDView.js
Remaining changes fell under Multiselect.js

I needed these extras, and I hope they will make it into the next version.

Cheers!

Diff follows:
diff origMult/DDView.js MultiselectItemSelector-2.1/DDView.js
392c392,404
< Ext.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
---
> if(!this.allowDup){
> Ext.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
> return true
> }
> var x=new Ext.data.Record();
> r.id=x.id;
> delete x;
> }
> if (data.copy) {
> var c = r.copy();
> if (this.fireEvent("drop", this, n, dd, e, data, c) !== false) {
> this.store.insert(insertAt++, c);
> }
394,405c406,409
< if (data.copy) {
< var c = r.copy();
< if (this.fireEvent("drop", this, n, dd, e, data, c) !== false) {
< this.store.insert(insertAt++, c);
< }
< } else {
< if (this.fireEvent("drop", this, n, dd, e, data, r) !== false) {
< if (data.sourceView) {
< data.sourceView.isDirtyFlag = true;
< data.sourceView.store.remove(r);
< }
< this.store.insert(insertAt++, r);
---
> if (this.fireEvent("drop", this, n, dd, e, data, r) !== false) {
> if (data.sourceView) {
> data.sourceView.isDirtyFlag = true;
> data.sourceView.store.remove(r);
406a411
> this.store.insert(insertAt++, r);
408d412
< this.isDirtyFlag = true;
409a414
> this.isDirtyFlag = true;
diff origMult/Multiselect.html MultiselectItemSelector-2.1/Multiselect.html
6c6
< <link rel='stylesheet' type='text/css' href='../../../ext-1.1/resources/css/ext-all.css'>
---
> <link rel='stylesheet' type='text/css' href='../ext/resources/css/ext-all.css'>
9,10c9,10
< <script type="text/javascript" src="../../../ext-1.1/adapter/ext/ext-base.js"></script>
< <script type="text/javascript" src="../../../ext-1.1/ext-all-debug.js"></script>
---
> <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
> <script type="text/javascript" src="../ext/ext-all-debug.js"></script>
diff origMult/Multiselect.js MultiselectItemSelector-2.1/Multiselect.js
62c62,63
< 'change' : true
---
> 'change' : true,
> 'drop' : true
112a114,118
> copy : false,
> allowDup : false,
> enableToolbar : false,
> focusClass : undefined,
>
150a157,162
> if(this.enableToolbar){
> var toolbardiv = this.list.createChild({tag:'div'});
> this.toolbar=new Ext.Toolbar(toolbardiv);
> lh = lh - 27;
> }
>
167c179
< , copy: false, allowCopy: false, dragGroup: this.dragGroup, dropGroup: this.dragGroup, jsonRoot: 'collection'
---
> , allowDup:this.allowDup, copy: this.copy, allowCopy: false, dragGroup: this.dragGroup, dropGroup: this.dragGroup, jsonRoot: 'collection'
173a186,188
> this.view.on('drop', function(ddView, n, dd, e, data, r){
> return this.fireEvent("drop", ddView, n, dd, e, data, r);
> }, this);
315a331,332
> if(this.imagePath && this.imagePath.charAt(this.imagePath.length-1)!="/")
> this.imagePath+="/";
354a372,376
> imagePath : "",
> switchToFrom : false,
> allowDup : false,
> enableToolbar: false,
> focusClass : undefined,
360,365c382,387
< this.iconUp = (this.iconUp) ? this.iconUp : "up2.gif";
< this.iconDown = (this.iconDown) ? this.iconDown : "down2.gif";
< this.iconLeft = (this.iconLeft) ? this.iconLeft : "left2.gif";
< this.iconRight = (this.iconRight) ? this.iconRight : "right2.gif";
< this.iconTop = this.iconTop || 'up2.gif';
< this.iconBottom = this.iconBottom || 'down2.gif';
---
> this.iconUp = this.imagePath + (this.iconUp || "up2.gif");
> this.iconDown = this.imagePath + (this.iconDown || "down2.gif");
> this.iconLeft = this.imagePath + (this.iconLeft || "left2.gif");
> this.iconRight = this.imagePath + (this.iconRight || "right2.gif");
> this.iconTop = this.imagePath + (this.iconTop || 'up2.gif');
> this.iconBottom = this.imagePath + (this.iconBottom || 'down2.gif');
375,376c397,398
< this.fromMultiselect = new Ext.ux.Multiselect({draggable: true, dragGroup: this.el.dom.id, width: this.msWidth, height: this.msHeight, dataFields: this.dataFields, data: this.fromData, displayField: this.displayField, valueField: this.valueField, store: this.fromStore, isFormField:false});
<
---
> this.fromMultiselect = new Ext.ux.Multiselect({enableToolbar:this.enableToolbar, allowDup:this.allowDup, copy:this.allowDup, draggable: true, dragGroup: this.el.dom.id, width: this.msWidth, height: this.msHeight, dataFields: this.dataFields, data: this.fromData, displayField: this.displayField, valueField: this.valueField, store: this.fromStore, isFormField:false});
> if(this.allowDup)this.fromMultiselect.on('drop', this.dropFrom, this);
385c407
< this.addIcon = td.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
---
> this.addIcon = td.createChild({tag:'img', src:this.switchToFrom?this.iconLeft:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
388c410
< this.removeIcon = td.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
---
> this.removeIcon = td.createChild({tag:'img', src:this.switchToFrom?this.iconRight:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
410c432,433
< this.toMultiselect = new Ext.ux.Multiselect({draggable: true, dragGroup: this.el.dom.id, width: this.msWidth, height: this.msHeight, displayField: this.displayField, valueField: this.valueField, store: this.toStore, isFormField:false});
---
> this.toMultiselect = new Ext.ux.Multiselect({enableToolbar:this.enableToolbar, allowDup:this.allowDup, draggable: true, dragGroup: this.el.dom.id, width: this.msWidth, height: this.msHeight, displayField: this.displayField, valueField: this.valueField, store: this.toStore, isFormField:false});
> if(this.allowDup)this.toMultiselect.on('drop', this.dropTo, this);
412,413c435,436
< this.fromMultiselect.render(divFrom);
< this.toMultiselect.render(divTo);
---
> this.fromMultiselect.render(this.switchToFrom ? divTo : divFrom);
> this.toMultiselect.render(this.switchToFrom ? divFrom : divTo);
510c533
< selectionsArray = [];
---
> if(!this.allowDup)selectionsArray = [];
513,515c536,545
< this.fromMultiselect.view.store.remove(record);
< this.toMultiselect.view.store.add(record);
< selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
---
> if(this.allowDup){
> var x=new Ext.data.Record();
> record.id=x.id;
> delete x;
> this.toMultiselect.view.store.add(record);
> }else{
> this.fromMultiselect.view.store.remove(record);
> this.toMultiselect.view.store.add(record);
> selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
> }
520c550,551
< this.toMultiselect.view.select(selectionsArray);
---
> if(this.allowDup)this.fromMultiselect.view.select(selectionsArray);
> else this.toMultiselect.view.select(selectionsArray);
535,536c566,569
< this.fromMultiselect.view.store.add(record);
< selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
---
> if(!this.allowDup){
> this.fromMultiselect.view.store.add(record);
> selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
> }
543a577,588
> dropTo: function(ddView, n, dd, e, data, r){
> return true;
> },
>
> dropFrom : function(ddView, n, dd, e, data, r){
> if (data.sourceView != ddView){
> data.sourceView.isDirtyFlag = true;
> data.sourceView.store.remove(r);
> }
> return false;
> },
>

vtswingkid
22 Oct 2007, 2:26 PM
I have a few more things also...I'll post them tommorrow...
readOnly: disables dragging and buttons
enableClear: puts a clear button in the toolbar for the todata
token: allows you to replace ',' for data separation

will hopefully get a labeling mechanism in...such as two fieldsets...one for each box.

tjstuart
22 Oct 2007, 4:01 PM
@vtswingkid

Good stuff mate!

I have a few other things to add to the next release as well. Maybe next week.

>> token: allows you to replace ',' for data separation

I would suggest 'delimeter' instead. But not that important.

Also, rather than post diff's could you post the complete working code. Maybe just PM it too me or attach to this thread.

Thanks for your efforts.

Cheers

vtswingkid
23 Oct 2007, 6:55 AM
Alright I've attached a zip with my changes.

Changes are as follows:
* Ext.ux.Multiselect:
- copy: passthru for Ext.ux.Itemselector
- allowDup: passthru for Ext.ux.Itemselector
- enableToolbar: puts a tool bar at the top of the box
- focusClass: 'undefined' bug fix for firefox maybe others
- delimiter: change the delimiter from the default ','
- legend: wraps the object with a fieldset and specified legend
* Ext.ux.ItemSelector:
- imagePath: set to the location of your directional icons
- switchToFrom: swap the location of the to and from boxes
- allowDup: allows duplication in the to box
- enableToolbar: places toolbars at the top of both boxes (.toMultiselect.toolbar, .fromMutliselect.toolbar)
- focusClass: undefined required bug fix for firefox and maybe others
- enableClear: places a toolbar with a clear button at the top of the to box
- delimiter: change the default from ','
- readOnly: disable drag and drop, and icons
- toLegend: wrap the to box in a fieldset with the specified legend
- fromLegend: wrap the from box in a fieldset with the specified legend
- toSortField: sort the to box according to the specified field
- toSortDir: specify the sort direction (default 'ASC')
- fromSortField: sort the from box according to the specified field
- fromSortDir: specify the sort direction (default 'ASC')
- rowdblclick event added
- change event added
* Ext.ux.DDView
- modified to allow duplication

tjstuart
23 Oct 2007, 4:59 PM
@vtswingkid

Fantastic! Hopefully release 2.2 in the next week or so.

Cheers

vtswingkid
24 Oct 2007, 7:00 AM
EDIT: Problem solved...Replaced the table with divs...see attached zip


Well, IE is putting up a fight. I fixed a sizing issue with the added fieldsets.

When I drag from one box to another the first time the boxes dissappear.
Seems like an onBlur issue. Any ideas? I am digging.

EDIT: Same things happens if I open a combobox in the same form...

Firefox works fine.

EDIT:....to duplicate this problem...
create a dialog box.
create a form.
insert a combobox.
insert an itemselector with some items.
...load it up and click on the combo box...the itemselector contents dissappear...click on the add or remove button and they comeback and stay back for good.
...reload...click and hold on an item...the boxes dissappear....
maybe indexes are changing in IE... stil guessing at this point.

tjstuart
24 Oct 2007, 3:59 PM
vtswingkid,

Haven't looked at this properly yet but it sounds like the IE-Zoom thingy so I have a suggestion....

For your from/to DIV's, try setting the 'zoom' style attrib to '1' eg.

in the CSS ...

.ux-mselect-from {float:left; zoom:1;}
.ux-mselect-to {float:left; zoom:1;}

or in the DOM ...

divFrom.dom.style.zoom=1;
divTo.dom.style.zoom=1;

Cheers

asudar
25 Oct 2007, 1:34 AM
Hi,
I like this ItemSelector. Its great!
But...
Are you plannig to implement search in the from field of the ItemSelector?
eg. when the list in the from field is very long, it would be useful to search with pressing the correspondent key, and the selection would move to the first item in the list, that begins with this letter.

vtswingkid
25 Oct 2007, 4:40 AM
TJStuart: I am not having any problems with it at this point. I'll just wait until you release 2.2 to see if anything new crops up. What additional features and fixes are you implementing?

asudar: I might take a poke at the search if I find some free time today.

curzonj
25 Oct 2007, 5:53 PM
Ext 2.0 is out now. Are there any plans to make this Extension compatable with Ext 2.0?

12ftguru
26 Oct 2007, 9:23 AM
Yes I know... Safari is the herald of eternal darkness :D

However, I have a quirky issue with the otherwise beautiful and much appreciated Multiselect. The issue is this, when I have elements in either of the to or from boxes, all is well. Unfortunately, as soon as either of those boxes becomes empty, Safari has a nutty and offsets the two boxes hugely (see attached). If I put something back in the box, Safari re-aligns the boxes.

This can be reproduced with Safari on the demo at:
http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/Multiselect.html

Any idea why?

vtswingkid
27 Oct 2007, 6:24 AM
Wow, safari really butchered that. I presume it is using my changes to the code. I don't think the original table layout would have allowed that. Though I could be wrong. I do not have access to safari, maybe you could investigate the differences between the populated and unpopulated boxes using "ctrl-shift-home" (maybe different for the mac...but it should bring up Jack's debugger) unless mac has a better way of viewing the dom.

To clarify are you using the code attached to my previous post? Or 2.1 code?

12ftguru
27 Oct 2007, 7:54 AM
I am using the 2.1 code straight from the demo. Safari's Dom inspection is a little on the anemic side for now, but I am not seeing anything truly weird. One thing I did notice is that safari renders the buttons aligned to the top, while FireFox does their vertical align center.

I am going to install the FirebugLite console and add in some console messages to see if I can figure it out. Any assistance/advice would be wonderful.

tjstuart
27 Oct 2007, 10:24 PM
@curzonj re. Ext 2.0 compatibility - Eventually yes I will support Ext 2.0 but (unfortunately) I'm on a tight schedule at the moment so I cannot give a firm date. I have had a look at the 1.x->2.0 migration guide and it doesnt look like too much is involved in migrating custom widgets.

@12ftguru re. Safari - I have done little testing on Safari. From your posts it would seem that the issues raised are cosmetic rather than functional. This is encouraging. I have the Safari beta 3 for Windows at work so will have a look tomorrow.

@vtswingkid re. next release - The 2.2 release is mainly user submitted enhancements (such as yours) and a few bug fixes. I do like the idea of a filter for the available list and I would really like to add keyboard support but I can't guarantee either for 2.2

Should have a release sometime this week.

galdaka
28 Oct 2007, 6:05 AM
You have plain to migrate this extension for Ext 2.0?

tjstuart
28 Oct 2007, 2:38 PM
You have plain to migrate this extension for Ext 2.0?

See my last post :)

tjstuart
29 Oct 2007, 6:38 PM
Ext.ux.Multiselect/ItemSelector [v2.2] is now available.

This release contains many enhancements most of which have come from other users.

I have acknowledged these folks below and on the demo page @ http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/Multiselect.html

The demo page now lists all available config options.

Note for Safari users ... I have done some testing with the Safari 3.0.3 beta for Windows and have found no problems.

@vtswingkid - I have tested all of your enhancements except for the fieldset/legend stuff. Again, many thanks for your efforts.





// 2.2 Changes 30 Oct 2007 Figtree Systems
// vtswingkid/Valcom Inc.
// paran01d/Grox Pty Ltd
// Fixes/Enhancements
// - General
// - can now add toolbars to Multiselect and ItemSelector lists
// - can now change the delimiter for getValue()
// - fieldset and legend support
// - ItemSelector
// - optional 'clear' button for selected list
// - support for local sorting of the available and selected lists
// - can now change the path for the navigation icons
// - can now choose which navigation icons to display
// - added 'change' and 'rowdblclick' events
// - support for duplication in the selected list
// - DDView
// - modified to allow duplication

vtswingkid
30 Oct 2007, 6:09 AM
Just real quick.

My DDView changes didn't make it into the 2.2.zip

You might update the header on the first message to 2.2

Might put a link to the zip in there too...
http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/MultiselectItemSelector-2.2.zip
The download link points to 2.1.zip

Might help to put a direct link to the download on the extensions page too.

And thanks for your work!

12ftguru
30 Oct 2007, 10:51 AM
Thanks for the update. The built in options help a lot. Sadly Safari for Mac is still making babies cry (See Attached). Since you don't have a Mac to test with, I will dig into it and see if I can figure out what brand of crack Safari is smoking. Any starting points would be appreciated. Should I start with the css or the table structure in the code?

Thanks,
John

12ftguru
30 Oct 2007, 11:07 AM
Nevermind... I am such a dork. It's working fine in Mac Safari. I missed one of the files when I copied the new one over. My bad.

Thanks so very much.

tjstuart
30 Oct 2007, 3:01 PM
My DDView changes didn't make it into the 2.2.zip

Whoops. Seems my copy/paste skills are not what they once were :) 2.2 archive now updated.


You might update the header on the first message to 2.2

You mean the thread title? How does one do that? I've been wondering this for a while. Bet it's obvious but I cannot find.


The download link points to 2.1.zip

Well spotted. Fixed.



Might help to put a direct link to the download on the extensions page too.


Will do.


And thanks for your work!

No problem

tjstuart
30 Oct 2007, 3:04 PM
Just found a small bug with markInvalid for ItemSelector 2.2. I'll try patch it today or tomorrow.

vtswingkid
31 Oct 2007, 7:07 AM
Goto your first post....click edit...click edit again...you should now be able to edit the title.

talshadar
2 Nov 2007, 11:21 AM
First this is a great object! It's exactly what I'm looking for. But I've been trying to figure out how to do something and can't make any headway. This question may sound really stupid but I'm still really new to the whole extJS let alone this object. I need to be able to dynamically add items to a multi-select box. Basically a user selects from multiple drop downs and when they click add some magic happens in the background and the result needs to be added to the multi-select box. I need to be able to select and remove from it as well.

I've looked through the mutliselect.js and found references on how it's internal functions remove/add items but I'm not able to make it work. Any help would be really appreciated.

Thanks!

norman
3 Nov 2007, 5:47 AM
tjstuart, use originalValue property to support "reset" and "isDirty" functionality

tjstuart
4 Nov 2007, 3:02 PM
I need to be able to dynamically add items to a multi-select box. Basically a user selects from multiple drop downs and when they click add some magic happens in the background and the result needs to be added to the multi-select box. I need to be able to select and remove from it as well.


This should be as simple as manipulating the Multiselect store and refreshing the view eg.




var store = new Ext.data.Store({...}); // create your store
var multiselect = new Ext.ux.Multiselect({...,store:store,...}); // tell multiselect about your store etc
store.load();
// use the methods provided by Ext.data.Store to manipulate your store
// eg. add/remove items then refresh the view

multiselect.view.refresh();

talshadar
5 Nov 2007, 8:19 AM
Thank you! I knew it was going to be simple but I'm still very knew to extJS completely so couldn't figure it out on my own. Thanks! and GREAT JOB on the extension!

12ftguru
6 Nov 2007, 6:47 AM
Thanks so much for your efforts on this. I had a quick question about 'allowBlank.' It looks like itemSelect doesn't have an option for allow blank. So, I was wondering if there would be a way to disable the submit button until at least one item is in the toField on the right. It seems easy enough but I can't quite figure out how to tell when ItemSelector toField has values or not. Where should I be looking?

talshadar
6 Nov 2007, 7:50 AM
I'm using the multi-select extension as a placeholder to hold multiple lines that I will then write to the database. What I need, ideally, is a way to hold the line I need to write, a counter as well as a human-readable caption. Is it possible to have 3 seperate fields in the multi-select?

That's question one, question two is: Is there a way to select ALL items in the multi-select without having to specify the valueField value?? IE: multiselect.setValue(*) kind of thing??

tjstuart
6 Nov 2007, 9:14 PM
but I can't quite figure out how to tell when ItemSelector toField has values or not. Where should I be looking?

Use the getCount() method of the selected items store eg.


itemSelector.toStore.getCount()

tjstuart
6 Nov 2007, 9:25 PM
I'm using the multi-select extension as a placeholder to hold multiple lines that I will then write to the database. What I need, ideally, is a way to hold the line I need to write, a counter as well as a human-readable caption. Is it possible to have 3 seperate fields in the multi-select?

You mean to display three separate fields? Then unfortunately no. Multiselect works with a display/value pair only. You could however store extra fields in your data-store and extract them with a query based on selected items in a Multiselect.



That's question one, question two is: Is there a way to select ALL items in the multi-select without having to specify the valueField value?? IE: multiselect.setValue(*) kind of thing??

I'll get back to you on that.

talshadar
7 Nov 2007, 6:33 AM
Thanks for your quick reply - but that gave me a better idea. Instead of grabbing the selected value from the multiselect - I can just use the data store. I need to really grab every item in the list and since it's fed from the data store, just grabbing that gives me what I need.

Thank you!!

Matthew

vtswingkid
12 Nov 2007, 7:15 AM
IE6 DOCTYPE BUG:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This breaks the itemselector in IE6.
I have seen messages that indicate it also breaks other components of ext in IE6.

tjstuart, do you know how to fix this in the code? Or should I leave out or try another doctype?

vtswingkid
12 Nov 2007, 10:29 AM
Any ideas on allowing horizontal scrolling for items who's descriptions are too long?

Simply setting the overflow on the innerlist does not do it. All of the items seem to conform to the width of the parent.

EDIT: here is a solution... though the select boxes are still constrained to the parent box.. Atleast scrolling now occurs for long items.

tjstuart
13 Nov 2007, 2:34 PM
Hi vtswingkid.

I'll try have a look at the issues you raised next week as I'm snowed under with my real job at the moment :(

Cheers

vtswingkid
14 Nov 2007, 9:26 AM
I am working on a port to ext-2.0. I may abandon ddview being that it would require porting too.

tjstuart
14 Nov 2007, 2:43 PM
I have an un-tested (although it appears to work) Ext2 port of the Multiselect component.

Animal has advised me that he has an Ext2 compliant version of DDView. He has offered the code.

I could probably have the whole extension upgraded by end of next week (still busy with real job).

How close are you to completing your port? Should I bother upgrading the 2.2 component?

vtswingkid
15 Nov 2007, 6:00 AM
I am hoping to have alot done today. I am redoing the layout with ext 2.0 components. I then plan on building in the drag drop stuff in as well. However, if I could get my hands on his 2.x compatiple ddview code I would use it. Will search around and see if I can find it. This version will not work on 1.x so you may not want to keep it. I just need to start moving forward on my port to 2.x.


EDIT: I have attached a 2.x compatible multiselect. Currently, drag drop is disabled.
Assumming DDView is updated to 2.x and extends dataview, it will be a pretty easy drop in. I may look into bypassing DDView tommorrow. See the Multiselect2.html for examples.

tjstuart
15 Nov 2007, 2:57 PM
I've PM'd you the DDView Ext2 code as I'm unsure if Animal wants it on the forums.

Gonzo
16 Nov 2007, 2:35 PM
Hi, I've downloaded the multiselect2 demo and firebu shows an error on line 309 of Multiselect2.js:

309 this.el.setWidth(p.body.first().getWidth());

"p.body.first().getWidth is not a function"

any clue?

PD: this is happening on page load

I changed that line to:
this.el.setWidth( p.body.getWidth() );

and it seems to be working, but I'm not sure what was that line for :)
Hope it helps!

bye

vtswingkid
16 Nov 2007, 2:44 PM
For further comments regarding the [2.x] version of this project please refer to this thread...

http://extjs.com/forum/showthread.php?p=87934#post87934

Otherwise keep your [1.x] comments here I [email protected]#$

poplau
19 Nov 2007, 12:45 AM
the Ext.ux.Multiselect's load data.
i want to clear it's data,
how to do it?thank you.

vtswingkid
19 Nov 2007, 5:49 AM
The datastore for the multiselect box is available as the object store.

so if your multiselect is in variable x you should be able to run...

x.store.removeAll();

elrems
27 Nov 2007, 11:45 PM
vtswingkid (http://extjs.com/forum/member.php?u=210) has ported it componant to Ext2. :)

See this thread http://extjs.com/forum/showthread.php?t=18426

There is a live demo page for the Ext2 widget :
http://members.cox.net/vtswingkid/ex...tiselect2.html (http://members.cox.net/vtswingkid/ext-ux/multiselect/Multiselect2.html)


http://www.soubeyrand.info/desktop/
[FONT=Courier New][SIZE=2]
R

tjstuart
28 Nov 2007, 1:25 AM
An Ext2 compliant port of this extension will be released in a few days. I will also update the User Extensions and Demo page.

I would like to thank "vtswingkid" for his enhancements to the Ext1.x version and subsequent port to Ext2.

I am un-decided as to how best to handle the versioning of the Ext2 compliant release. Unless a sound reason to do otherwise is provided, I will set the Ext2 compliant version of this extension to start at version 3.0.

I intend to keep the constructors and config-options the same as the Ext1.x version as well as the names of the files which form the extension. This should provide a seamless upgrade process.

In short ...

Ext1.x users will use the 1.x-2.x series of Multiselect/ItemSelector

conversely

Ext2.x users will use the 3.x (and above) series of Multiselect/ItemSelector

paliwalg
29 Nov 2007, 5:16 AM
Can any one please help me out in adding the keyboard arrow key navigation for multiselect list.
Thanks

Shmoo
6 Dec 2007, 12:49 AM
Great job guys! I really liked the work you did!

This was mentioned before... the horizontal scrolling doesn't seem to work for me. I'm using the 2.2 version of MultiSelector and the latest FireFox version (2.0.0.11).

Attached is the screenshot. Any suggestions on how to enable it for the ItemSelector? Thanks.

tjstuart
7 Dec 2007, 7:50 PM
@shmoo - Thats strange. I cannot replicate. Could you post your code?

Shmoo
9 Dec 2007, 9:45 PM
Thanks for responding quickly to my PMs. :D

Once again, very nice work indeed! ;)

wisely
10 Dec 2007, 1:18 AM
Hi,

I am trying to use Ext.ux.Multiselect with EXT 1.1.
But i encounter the following error on ie6 and ie7:

I have a Jsp page with a fews input fields like textFields and Combos and also 1 Multiselect.
On load of JSP, the multiselect is able to populate data correctly. However, when i select other fields, the multiselect data become blank blue screen.

My code:

<input type="hidden" id="someStatus" value="" name="someStatus" />
<input type="hidden" id="$someStatus" name="$someStatus" value="" />


var store = new Ext.data.SimpleStore({
fields: ['key', 'value'],
data : someList
});

var multiselect = new Ext.ux.Multiselect({
store : store ,
valueField : 'key',
displayField : 'value',
width : 150,
height : 100,
allowBlank : true
});

Ext.cams.widgets.push({
init : function(){
this.component =multiselect;
this.component.applyTo('$someStatus');

this.component.on('valid',function(f){
Ext.getDom(someStatus').value = f.getValue();
});
this.component.on('change',function(f){
Ext.getDom(someStatus').value = f.getValue();
});
}
});

Please help. Thanks

tjstuart
10 Dec 2007, 3:32 PM
Hi,

I am trying to use Ext.ux.Multiselect with EXT 1.1.
But i encounter the following error on ie6 and ie7:

I have a Jsp page with a fews input fields like textFields and Combos and also 1 Multiselect.
On load of JSP, the multiselect is able to populate data correctly. However, when i select other fields, the multiselect data become blank blue screen.


This is the IE-Zoom issue that has been discussed several times on these forums. You need to set the zoom style attribute to '1' for any surrounding containers/elements.

So if you have wrapped the Multiselect in a DIV or a SPAN or whatever then you need to set the style zoom:1 on it.

Try using Firebug to determine what is wrapping the multiselect and set zoom:1 on it. Then try it in IE.

Cheers

wisely
11 Dec 2007, 11:04 PM
Thanks. It works.:D

boneysekh
4 Feb 2008, 6:20 PM
HEy there.. This is great work from you..

Any idea when the version 3.0 would be released?

Regards,
Boney

sjmittal
5 Feb 2008, 5:18 AM
Hi,
I am trying similar thing for item selector.
What I want is that upon the change of item in a combo box the contents of item selector should get changed.

So in change listener of the combo box I get the new contents and I do the following lines of code:


itemSelector.fromData = columns; //columns contain the new contents
itemSelector.fromMultiselect.view.refresh();
But this does not work.
I have checked that I got the right itemSelector object and columns also have the data in right format ie: [['a','A '], ...]

Please let me know what I am missing here.

Thanks
Sachin



This should be as simple as manipulating the Multiselect store and refreshing the view eg.




var store = new Ext.data.Store({...}); // create your store
var multiselect = new Ext.ux.Multiselect({...,store:store,...}); // tell multiselect about your store etc
store.load();
// use the methods provided by Ext.data.Store to manipulate your store
// eg. add/remove items then refresh the view

multiselect.view.refresh();

haisrinu143
1 May 2008, 2:00 PM
Please let me know if we can use the Ext.ux.Multiselect/ItemSelector [v2.2]. I am a bit worried about the licensing issues in using this as it is an user extension.

Also let me know if this is compatible with ExtJs 2.0.

tjstuart
1 May 2008, 5:25 PM
I'm not up to speed with the new ExtJS licensing issues but as far as I am concerned you can do whatever you like with the extension. Use it royalty free, whatever suits you.

The Ext2 version is available here http://extjs.com/forum/showthread.php?t=20071

Ellevo
2 May 2008, 8:34 AM
Version 2.2 Works Perfect! Congratulations tjstuart!=D>

couetbis
6 Aug 2008, 4:15 AM
Hi,
I use Multiselect and it works fine. I would like to know how can I specifiy the init selection like this :

new Ext.ux.Multiselect({
name: 'edDiagnostiqueListeMulti',
fieldLabel: 'Liste multi',
labelSeparator: '',
focusClass: 'zoneFocusForm',
allowBlank: false,
store: new Ext.data.SimpleStore({
fields: ['id', 'valeur'],
data : [['4','quatre'],['3','trois'],['2','deux'],['1','un']]
}),
displayField: 'valeur',
valueField: 'id',
width: 190,
height: 150,
value: '['4', '2']',
id:'idDiagnostiqueListeMulti'
})
What's the good syntax ? Is it possible ?

tjstuart
6 Aug 2008, 6:00 PM
After the Multiselect has been rendered you can call setValue(...) eg.


multiselect.setValue('4,2');

couetbis
6 Aug 2008, 11:37 PM
Yes, I know that but it's only possible after render ? I dont' want variable name for multiselect.

Saeven
25 Nov 2008, 6:44 AM
Sorry to interject, but I'm a bit fuzzy on the idea. Does this thing work with Ext.data stores? Or does it require a static array to do its work?

Cheers & Thanks.
Alex

tjstuart
25 Nov 2008, 2:49 PM
Sorry to interject, but I'm a bit fuzzy on the idea. Does this thing work with Ext.data stores? Or does it require a static array to do its work?

Cheers & Thanks.
Alex

It works with stores ... http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/Multiselect.html

Pretty sure I wrote some docco on that page many moons ago.

jakehurst
2 Dec 2008, 12:00 PM
It works with stores ... http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/Multiselect.html

Pretty sure I wrote some docco on that page many moons ago.

tjstuart: Your site seems to be down. I'd love to get a copy of your extension.
All: does someone still have this extension hosted somewhere where I could download it?

tjstuart
2 Dec 2008, 2:41 PM
Works for me :-?

Rilax
20 Jan 2009, 2:44 AM
Hi everybody . First congratulations for your great works and sorry for my poor english I'm French...
I use an Itemselector with 2 static array and i want to block the add in the second array when his size is x ( a number, for instance 3).
How can i do this?
Thanks for your help.

tjstuart
21 Jan 2009, 4:50 PM
Hi everybody . First congratulations for your great works and sorry for my poor english I'm French...
I use an Itemselector with 2 static array and i want to block the add in the second array when his size is x ( a number, for instance 3).
How can i do this?
Thanks for your help.

The extension doesn't support this. However here is a quick hack that does what you want:-


Ext.ux.ItemSelector.prototype.valueChanged = function(store) {
var record = null;
var values = [];

if (store.getCount() > 2) {
this.toMultiselect.markInvalid('Too many items selected');
}

for (var i=0; i<store.getCount(); i++) {
record = store.getAt(i);
values.push(record.get(this.valueField));
}
this.fireEvent('change', this, values.join(this.delimiter), this.hiddenField.dom.value);
this.hiddenField.dom.value = values.join(this.delimiter);
}

Place that in your code *after* including ItemSelector.

Cheers

Rilax
22 Jan 2009, 12:08 AM
Thanks a lot for your answer.
Your hack mark invalid when there is more than 2 elements but I want that the add enabled when there is 2 elements. How Can I do this?

for (var i=0; i<store.getCount(); i++) {
record = store.getAt(i);
values.push(record.get(this.valueField));
}
this.fireEvent('change', this, values.join(this.delimiter), this.hiddenField.dom.value);
this.hiddenField.dom.value = values.join(this.delimiter);
And what do this part of code?
Cheers

tjstuart
22 Jan 2009, 1:25 AM
Thanks a lot for your answer.
Your hack mark invalid when there is more than 2 elements but I want that the add enabled when there is 2 elements. How Can I do this?

Whoops, I had hard-coded a maximum of 2 whilst I was testing it. Simply change the '2' in

if (store.getCount() > 2) {
to whatever your limit is.


And what do this part of code?

Overwriting (ie. replacing) the 'valueChanged' function prototype of the ItemSelector extension. We do this so we can add/remove functionality to an existing function without having to edit the extension itself.

Rilax
22 Jan 2009, 1:30 AM
Whoops, I had hard-coded a maximum of 2 whilst I was testing it. Simply change the '2' in

if (store.getCount() > 2) {to whatever your limit is.



Overwriting (ie. replacing) the 'valueChanged' function prototype of the ItemSelector extension. We do this so we can add/remove functionality to an existing function without having to edit the extension itself.

Ok! Thanks i have already change the limit in 3 but my problem is :
I want to disabled the add when the number of data is over the limit and not only mark invalid.
I have write enabled in the precedent post but it's a mistake, i would like to say disabled ( I'm french...)
Cheers

manu8285
2 Feb 2009, 11:52 PM
Hi,
I have created a shuttle using the Ext.ux.itemSelector..
I have a problem with disabling the shuttle. When I disable it...the shuttle is just masked but still we can swap the elements across the shuttle..which is not required. Do give a solution for this.

stratboogie
13 Feb 2009, 10:05 AM
I cannot select the values that are loaded inthe multi-selector. I am missing something in the config?



DepartmentListbox = new Ext.ux.Multiselect({
allQuery: "GetAll",
displayField: "Department",
fieldLabel: "Department",
name: "DepartmentListbox",
store: new Ext.data.Store({
baseParams: {
a: "GetAll"
},
proxy: new Ext.data.HttpProxy({ url: "Department.aspx" }),
reader: new Ext.ux.hhj.DataReader({ id: "DepartmentId" }, ["DepartmentId", "Department"])
}),
listeners: {
render: {
fn: function() {
DepartmentListbox.store.load();
DepartmentListbox.enable();
}
}
},
valueField: "DepartmentId",
width: 200,
allowBlank: true
})


thx
Tim

tjstuart
17 Feb 2009, 4:12 PM
I cannot select the values that are loaded inthe multi-selector. I am missing something in the config?



DepartmentListbox = new Ext.ux.Multiselect({
allQuery: "GetAll",
displayField: "Department",
fieldLabel: "Department",
name: "DepartmentListbox",
store: new Ext.data.Store({
baseParams: {
a: "GetAll"
},
proxy: new Ext.data.HttpProxy({ url: "Department.aspx" }),
reader: new Ext.ux.hhj.DataReader({ id: "DepartmentId" }, ["DepartmentId", "Department"])
}),
listeners: {
render: {
fn: function() {
DepartmentListbox.store.load();
DepartmentListbox.enable();
}
}
},
valueField: "DepartmentId",
width: 200,
allowBlank: true
})


thx
Tim

Are you getting some kind of runtime error? Have you tried Firebug? Put it up as a live example and I'll take a look.

dHANEESH
20 Feb 2009, 10:28 PM
Hi all,

i just want to one thing that how can we implement "Select All" option in multiselect.
Please help...

Thanks in advance
dhaneesh

NoahK17
24 Feb 2009, 12:06 PM
So have we figured out how to "keep selections" as you click around WITHOUT holding down CTRL or SHIFT yet?

Does anyone have a simple override? I can't believe this wasn't a config toggle from the beginning.

talshadar
10 Mar 2009, 6:53 AM
****SOLVED****

I had a spelling error when including the css (MultiSelect.css instead of Multiselect.css) and that fixed it.

****SOLVED****


I'm implementing the itemselector for the selection of users and having used it before I know there's a solution to the problem I'm having but I can't see it. I create the form, create the itemselector, then add it to the form and render the form - exactly as your example has it. But no matter what I do - it stacks the 2 selection boxes vertical instead of beside each other. It doesn't matter what size I make the form. Any suggestions would be awesome.




frmActionItem = new Ext.form.Form({id:"actionItemForm",width:1100, labelWidth:100, style:"margin:10px;"});

frmActionItem.column({width:1100,style:"margin-left:10px;", clear:false});

var itemSelector = new Ext.ux.ItemSelector({

name : 'itemselector',
fieldLabel : 'ItemSelector',
dataFields : ['code', 'desc'],
fromData : [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five']],
toData : [['6', 'Six']],
msWidth : 150,
msHeight : 150,
valueField : 'code',
displayField : 'desc',
drawLeftIcon : true,
drawRightIcon : true,
imagePath : "images",
enableClear : true
});

frmActionItem.fieldset(
{legend:"Action Item:", id:"fsActionItem"},
itemSelector
);

frmActionItem.render(actionItemTab.el);

http://extjs.com/forum/attachment.php?attachmentid=12415&stc=1&d=1236696755

talshadar
13 Mar 2009, 1:41 PM
A weird problem. I have been testing the ItemSelector in firefox and everything works like a dream. I open the same page in IE - and though the selectors show up - there is no data. There are no errors, just no data. Any suggestions? See me above post for code example. With a change - using data stores instead of hard coded data.




fromStore : dsEmailUserList,
toStore : dsEmailRecipients,

dsEmailUserList = new Ext.ux.DynamicJsonStore({});
dsEmailRecipients = new Ext.ux.DynamicJsonStore({});

NoahK17
17 Mar 2009, 10:25 AM
Hi all,

i just want to one thing that how can we implement "Select All" option in multiselect.
Please help...

Thanks in advance
dhaneesh
Yes, please. What's the easiest way to "select all"?

talshadar
18 Mar 2009, 5:52 AM
I'm posting the code I'm using. The issue is that firefox displays everything without a problem but in IE 6 the data isn't loading. I don't get any errors, it just doesn't load anything. I'm hoping I'm just missing something stupid.

Another really odd thing - the multiselect works fine - I've replaced the itemSelect with the multiselect and it works without issue. Weird.




var dsEmailRecipients, dsEmailUserList;

dsEmailUserList = new Ext.ux.DynamicJsonStore({});
dsEmailRecipients = new Ext.ux.DynamicJsonStore({});

frmActionItem = new Ext.form.Form({id:"actionItemForm",width:600, labelWidth:100});

itemSelector = new Ext.ux.ItemSelector({
name : 'itemselector',
fieldLabel : 'Email Recipients',
fromStore : dsEmailUserList,
toStore : dsEmailRecipients,
dataFields : ['Name', 'EmailAddress'],
valueField : 'EmailAddress',
displayField : 'Name',
msWidth : 150,
msHeight : 150,
drawLeftIcon : true,
drawRightIcon : true,
drawUpIcon : false,
drawDownIcon : false,
drawTopIcon : false,
drawBotIcon : false,
imagePath : "images",
enableClear : true,
delimiter : "|"
});


frmActionItem.fieldset(
{id:"fsEmailRecipients", hideMode:"visibility", hideLabel:true},
itemSelector
//btnEmailTest
);

ActionsList_CPC.ActionsListEdit.GetEmailRecipients(getEmailRecipients_Callback, Ext.util.errorHandler);

The ActionsList_CPC.ActionsListEdit.GetEmailRecipients is a CSharp function that returns a datatable of results to the getEmailRecipients_Callback function.



function getEmailRecipients_Callback(response)
{
if (response.rows)
{
dsEmailUserList.loadData(response.rows);
}
}

tjstuart
19 Mar 2009, 3:07 PM
Are you 100% certain that IE is not loading the data? Try alerting some store elements after load. I recall problems with IE where you need to set zoom=1 on outer containers if things aren't displaying.

Also, are you using the the Ext1.x version?

ndtreviv
30 Mar 2009, 3:23 AM
I'm getting the same issue. If I load the Multiselect as part of a fieldset, which is in turn part of a form into an Ext JS window, there is a load order problem with IE which means that the Store records never get rendered into the multiselect box GUI element.

I've tracked this through the code and found that it goes all the way back into the DataView element that part of the Multiselect setup extends from.

I've found that if I do a render listener, and then set a timeout of about 2-3 seconds, setting the store at the end of the timeout, the records get rendered.

I am finding that this is also an issue with ComoBox.

Here's some test-harness code for you to prove that it is reproducible:

wintest.html:


<html>
<head>
<meta http-equiv="PRAGMA" content="NO-CACHE">
<meta http-equiv="expires" content="Mon, 19 Jan 2009 10:7:44 GMT">
<style type='text/css'>
@import url("/uib/widgets/CategoryManager/resources/css/ext-all.css");
@import url("/uib/widgets/CategoryManager/resources/css/xtheme-uib.css");
@import url("/uib/widgets/CategoryManager/styles/Multiselect.css");
@import url("/uib/widgets/CategoryManager/styles/styles.css");
</style>

</style>
<script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/ext/ext-base.js"></script>
<script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/Portal.js"></script>
<script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/DDView.js"></script>
<script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/ItemSelector.js"></script>
<script type="text/javascript" src="/uib/widgets/CategoryManager/scripts/MultiSelect.js"></script>
<script language="javascript" type="text/javascript">
Ext.ns("UIB.widget.CategoryManager");

var doEdit = function(){
UIB.widget.CategoryManager.EditDetailsWindow = new Ext.Window({
title: 'Edit Category Details',
width:700,
height:500,
shadow:true,
autoScroll: true,
modal : true,
plain : true,
autoLoad: 'winnode_edit.html?id=701843774741116732&ct=UIB.widget.CategoryManager.EditDetailsWindow&_t=' + new Date(),
scripts: true,
x: 0,
y: 0
});
UIB.widget.CategoryManager.EditDetailsWindow.show();
}

</script>
</head>
<body>
<div id='cat-man-ct'><input type='button' value='Do Edit' onclick='doEdit()'></div>
</body>
</html>


winnode_edit.html:


<script language="javascript" type="text/javascript">
Ext.ns('UIB');
Ext.ns('UIB.widget');
Ext.ns('UIB.widget.CategoryManager');

UIB.widget.CategoryManager.DatabaseListStore = new Ext.data.SimpleStore({
data : [['One', 'One'],['Two', 'Two'],['Three', 'Three']],
fields: ['id', 'name'],
id: 0
})

UIB.widget.CategoryManager.EditCatForm = new Ext.form.FormPanel({
url: 'node_update.jsp',
shim: 'false',
bodyStyle: {padding:5},
bodyBorder: false,
items: [
new Ext.form.FieldSet({
bodyStyle: {marginBottom: 150},
title: "Search Details",
items: [
new Ext.form.TextField({
name:"name",
fieldLabel: "Search Name",
allowBlank: false,
value: "Test"
}),
new Ext.form.ComboBox({
name:"language",
fieldLabel: "Language",
store: new Ext.data.SimpleStore({
data: [['English','English'],['French', 'French']],
id: 0,
fields: ['id', 'name']
}),
displayField: 'name',
mode: 'local',
triggerAction: 'all',
editable: false,
value: "English"
}),
new Ext.form.NumberField({
name:"drenumresults",
fieldLabel: "Results per page",
allowBlank: false,
value: 10,
maxLength: 3,
width: 30,
value: 10
}),
new Ext.form.NumberField({
name:"dreminscore",
fieldLabel: "Minimum relevance",
allowBlank: false,
value: 40,
maxLength: 3,
width: 30,
value: 40
}),
new Ext.ux.Multiselect({
name: 'databases',
fieldLabel: 'Databases',
store: UIB.widget.CategoryManager.DatabaseListStore,
valueField: 'id',
displayField: 'name',
width:150,
height:150,
allowBlank: true,
listeners: {
scope: this,
render: function(c){
//Uncomment out commented code below to see store load working:
//setTimeout(function(){
var d = 'One,Two';
// Ext.getCmp(c.id).view.setStore(UIB.widget.CategoryManager.DatabaseListStore);
c.setValue(d);
//}, 3000);
}
}
}),
new Ext.form.Hidden({
name: "catid",
value: "701843774741116732"
}),
new Ext.form.Hidden({
name: "type",
value: "agt"
})
]
})
]
});

UIB.widget.CategoryManager.EditDetailsWindow.add(UIB.widget.CategoryManager.EditCatForm);
UIB.widget.CategoryManager.EditDetailsWindow.doLayout();
</script>


Can anyone offer advice on solving this issue? I don't want to have to put timeouts on setting field stores - it's not good practice.

Added:
It may be worth mentioning that if I remove all the form fields above the Multiselect, it renders without issue first time, without timeout. Also, if I leave the form fields above it IN the code, but put the whole lot in the FormPanel element instead of the FieldSet element, it also renders without needing the timeout.
This would tell me that it's definitely a render->availability issue with IE7.

Any help appreciated.
Cheers,
ndtreviv

mike1993
10 Apr 2009, 10:00 AM
ndtreviv,

MS listeners: render - load your store.
Store listeners: load( or add) - set your MS item

mike1993
10 Apr 2009, 11:28 AM
Could anyone post 2.2 source code. Download link does not work.

Big thanks!

tjstuart
13 Apr 2009, 4:00 PM
Could anyone post 2.2 source code. Download link does not work.

Big thanks!

http://www.figtreesystems.com/ext/ext-ux/1.1/Multiselect/MultiselectItemSelector-2.2.zip

Seems to work for me.

ndtreviv
13 Apr 2009, 11:45 PM
ndtreviv,

MS listeners: render - load your store.
Store listeners: load( or add) - set your MS item

That's a good way to set the selected items - better than the way I'm doing it for sure. However, setting my items isn't the issue at the moment. Actually getting any list items to RENDER (not JUST selected ones - ALL of them) is the issue.

The short of it is:
When you load a MultiSelect in a Window, the list items don't render in IE7 because the HTML element to which it is being rendered doesn't seem to exist properly at the time when the store is loaded.

Once again, any solutions?

tjstuart
14 Apr 2009, 8:39 PM
That's a good way to set the selected items - better than the way I'm doing it for sure. However, setting my items isn't the issue at the moment. Actually getting any list items to RENDER (not JUST selected ones - ALL of them) is the issue.

The short of it is:
When you load a MultiSelect in a Window, the list items don't render in IE7 because the HTML element to which it is being rendered doesn't seem to exist properly at the time when the store is loaded.

Once again, any solutions?

Probably need to set zoom:1 on your container. Search around for "IE zoom bug" or something like that.

Stephen Davison
15 Apr 2009, 1:50 PM
tjstuart,
Thank you for contributing the MultiSelect list. It has been a huge help to me.

With ext-2.2 it works perfectly (for me), but I'm seeing something strange in ext-2.2.1 and 3.0-rc1. What's happening is that a multiselect component causes the containing form's isDirty() method to always return true. (I'm creating the multiselect with isFormField true. And running Firefox 3.0.8 and IE-7 under WindowsXP). I'm hesitant to report this as a bug since it's still included under the examples even in 3.0-rc1.

Thanks again for the much needed multiselect component.

Regards,
Stephen

talshadar
16 Apr 2009, 1:39 PM
Funny thing - I came back to this problem and had rearranged the page a bit - and it appears to be loading the data - but instead of putting it where it's supposed - the data is sitting by itself down at the bottom of the screen - and ass so as I click to enable the fieldset it's in - the data is gone. I'm including a screen shot.

I have no idea how to fix this

talshadar
17 Apr 2009, 6:17 AM
I am using Ext1.1 and you're right hte data is being loaded but off at hte bottom of the page in no-mans land. I have no idea why. You say set zoom=1 .. in what container?? I have it set in the form div - but I can't set a div for the itemSelect to render into (that i know of at least) - and I couldn't find anything to allow me to set it to the itemSelect directly. I would really LOVE to be able to use this extension - especially with some of the "additions" they want to the app. Any help is SO appreciated!!

Matthew


Are you 100% certain that IE is not loading the data? Try alerting some store elements after load. I recall problems with IE where you need to set zoom=1 on outer containers if things aren't displaying.

Also, are you using the the Ext1.x version?

talshadar
17 Apr 2009, 8:16 AM
How's this for not making sense:

if I set the msWidth and msHeight attributes for the itemselector ... it doens't put the actual data in the control itself. BUT if I don't set the msWidth and msHeight ... it puts the data in the right place. Of course it also makes the control HUGE and stacks the To and From fields vertically.

Does that make any kind of sense ???

So if I add the following to the itemSelector config

width : 600,
height : 100,

And modified the msWidth and msHeight in itemSelector.js ... then it works the way it's supposed to. It still doens't make any sense to me at all. Plus, hitting the CLEAR button pops up a this.fields is null or not an object.

This is weird - has anyone else noticed similiar behaviour??

tjstuart
19 Apr 2009, 4:01 PM
How's this for not making sense:

if I set the msWidth and msHeight attributes for the itemselector ... it doens't put the actual data in the control itself. BUT if I don't set the msWidth and msHeight ... it puts the data in the right place. Of course it also makes the control HUGE and stacks the To and From fields vertically.

Does that make any kind of sense ???

So if I add the following to the itemSelector config

width : 600,
height : 100,

And modified the msWidth and msHeight in itemSelector.js ... then it works the way it's supposed to. It still doens't make any sense to me at all. Plus, hitting the CLEAR button pops up a this.fields is null or not an object.

This is weird - has anyone else noticed similiar behaviour??

If you put an example online somewhere, I could take a look. I have a feeling that it may have something to do with fromLegend/toLegend (or lack thereof) ... try setting those ... just a hunch as I haven't looked at the code for years.

skarnam
3 May 2009, 10:37 PM
Hi,
I am trying to the example for ItemSelector and I want to use it on a page which already has a form. However, the ItemSelector generates the form tag and it creates an invalid HTML markup. Can you please suggest as how I can use the ItemSelector within an existing form?

Thanks,
Sateesh

henryivy
12 May 2009, 4:38 AM
Hi,
I am using Ext.ux.ItemSelector of version of ExtJs 2.2, I am binding the data using Ext.data.HttpProxy to fetch data and once I move bulk of data from left to right item box using button, some of the selected item’s index value becomes -1. Due to that the bulk drag operation fails with the following js error ‘Error: 'undefined' is null or not an object’. If I move individually it works fine. Please help me how to resolve this.

Remy
1 Jun 2009, 12:09 PM
Is it possible to use this UX to transform an existing HTML select element?

beeuser
15 Jun 2009, 6:56 AM
Hello,

Is it possible to show me an example of how to bind an itemselector to a form?

I mean I have a grid bound to a form, and when I click on a row in the grid, the form fills in with the data from that row, just like this one:

http://extjs.com/deploy/dev/examples/form/form-grid.html

But I'd like to know how to fill the data for the itemselector when a row in the grid is selected.

Thanks.

talshadar
25 Jun 2009, 8:46 AM
I've used this extension alot so when it came time for me to have to create my own, I used it as an example. And it seems to work (haven't finished testing yet) but I can't fix the layout properly. Basically I'm trying to get 2 combo boxes to line up beside each other. Nothing was working and the itemSelector version kind of does what I need so I based mine off of it. I'm incluidng my extension code as well as the code to use it. I'm hoping some one can give me a pointer.

DualCombo Extension




Ext.namespace("Ext.ux");

Ext.ux.DualCombo = function(config)
{
Ext.ux.DualCombo.superclass.constructor.call(this, config);
//don't think I need to actually add anything else here for it to work
};

Ext.extend(Ext.ux.DualCombo, Ext.form.ComboBox, {

//basic config and properties
firstWidth : 100,
secondWidth : 100,
firstId : null,
secondId : null,
firstTabIndex : 1,
secondTabIndex : 2,
firstDataFlds : null,
secondDataFlds : null,
firstData : null,
secondData : null,
firstDelimiter : ',',
secondDelimiter : ',',
firstStore : null,
secondStore : null,
firstDisplayFld : null,
secondDisplayFld : null,
firstValueFld : null,
secondValueFld : null,
firstSortFld : null,
secondSortFld : null,
firstSortDir : 'ASC',
secondSortDir : 'ASC',
firstEmptyTxt : 'Please select ...',
secondEmptyTxt : 'Please select ...',
isFormField : true,
fieldLabel : '',
selectOnFocus : true,
typeAhead : true,

onRender : function(ct, position) {

var divFirst, divSecond, table, tr, td;

this.el = ct;

divFirst = this.el.createChild({tag:'div', cls:'.ux-dcombo-first'});
divSecond = this.el.createChild({tag:'div', cls:'.ux-dcombo-second'});

//table = this.el.createChild({tag:'table'}); //, cls:'ux-mselect-icons'});
//table.setHeight(this.msHeight);
//tr = table.createChild({tag: 'tr'});
//if (tr.dom.tagName.toUpperCase() == 'TBODY') { tr = tr.child('tr'); }

//td = Ext.get(tr.dom.appendChild(document.createElement('td')));
//td.dom.vAlign='middle';

this.FirstCombo = new Ext.form.ComboBox({fieldLabel:this.fieldLabel,id:this.firstId,tabIndex:this.firstTabIndex,
hiddenName:this.hiddenName,displayField:this.firstDisplayFld,valueField:this.firstValueFld,
store:this.firstStore,width:this.firstWidth,selectOnFocus:this.selectOnFocus,typeAhead:this.typeAhead,mode:"local",
forceSelection: true,triggerAction: "all",emptyText:this.firstEmptyText});

this.SecondCombo = new Ext.form.ComboBox({fieldLabel:this.fieldLabel,id:this.secondId,tabIndex:this.secondTabIndex,
hiddenName:this.hiddenName,displayField:this.secondDisplayFld,valueField:this.secondValueFld,
store:this.secondStore,width:this.secondWidth,selectOnFocus:this.selectOnFocus,typeAhead:this.typeAhead,mode:"local",
forceSelection: true,triggerAction: "all",emptyText:this.secondEmptyText});

this.FirstCombo.render(divFirst);
this.SecondCombo.render(divSecond);

//this.defaultAutoCreate.name = this.name;
//this.hiddenName = this.name;
//this.hiddenField = ct.createChild(this.defaultAutoCreate);

}

});

Using it:




cboSStatus = new Ext.ux.DualCombo
({
firstWidth : 50,
secondWidth : 180,
firstId : 'cmbId',
secondId : 'sStatusID',
firstTabIndex : 10,
secondTabIndex : 11,
//firstDataFlds : null,
//secondDataFlds : null,
//firstData : null,
//secondData : null,
//firstDelimiter : ',',
//secondDelimiter : ',',
firstStore : storeCondition,
secondStore : dsStatus,
firstDisplayFld : 'condition',
secondDisplayFld : 'status',
firstValueFld : 'conditionid',
secondValueFld : 'code',
firstEmptyTxt : 'Condition...',
secondEmptyTxt : 'Please select ...',
isFormField : true,
fieldLabel : 'Status',
selectOnFocus : true,
typeAhead : true
});

It creates 2 combos with the relevant data exactly the way I want - it just doesn't align them - it puts one on top of the other instead of beside each other. I'm hoping some one can catch what I'm missing.

Thanks!!

NoahK17
18 Aug 2009, 8:25 AM
Component: xtype: Multiselect
Version ExtJS: 2.2.1
Browser: IE 6
Layout: Column

Result? Component does not show up at all.

bobjbain
27 Aug 2009, 1:07 AM
Hi,

I've just implemented the ItemSelector using Ext3.0 and am having problems with the sorting.

I am using a pre-loaded DataStoe as my source for the fromList, which works fine (it has 525 items). However when I move an item from the from list to the toList and then back again it always appears at the bottom of the fromList.

I would like to have the items resorted when it's moved back.

I have tried using the fromSortField in the ItemSelector and SortFied in the DataStore but to no avail!!

Anyone have any ideas

joutsource
7 Dec 2009, 3:03 PM
Hi,

Thanks for this great add-on.

I integrated in our application and seems working except an issue of scrollbar position.

We have 10+ items in list and we have restricted height such that it only show 5 items at a time and rest are visible when we scroll.

We are retrieving the selected values from database and then select them using setValue method.

Now the problem is, view is not scrolling down to the position of selected item.

jsemmanuel
17 Dec 2009, 11:41 PM
Hi

I have the following code (using Ext JS Library 3.0.3)


<html>
<head>
<title>Welcome</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="css/multiselect.css">
<script type="text/javascript" src="js/ux/Multiselect.js"></script>
<script type="text/javascript" src="js/ux/DDView.js"></script>
<script type="text/javascript" src="multiselect testcase.js"></script>
</head>
<body>


</body>
</html>




Ext.onReady(function(){
Ext.QuickTips.init();
var countryStore=new Ext.data.ArrayStore({
baseParams:{task:'list_countries'},
fields:['id','name'],
mode:'local',
data:[
['il','IL Country'],
['ep','EP Country'],
['br','BR Country'],
['er','ER Country'],
['vd','VD Country'],
['bf','BF Country'],
['gc','GC Country'],
['mp','MP Country']
],
autoLoad:true
})
var cmpAddForm=new Ext.form.FormPanel({
bodyStyle:'padding:10px',
width:500,
height:200,
items:[
new Ext.form.TextField({
name:'name',
fieldLabel:'Campaign Name',
allowBlank: false,
width:340
}),
{
xtype:'multiselect',
store:countryStore,
displayField:'name',
valueField:'id',
width:250,
height:100,
margins:0,
name:'geo',
fieldLabel:'Target Countries',
legend:'Select multiple countries'
}
]
})
var cmpAddWindow=new Ext.Window({
title:'Add a campaign',
width:550,
layout:'fit',
items:[
cmpAddForm
],
listeners:{
show: function (){
cmpAddForm.getForm().reset();
}
},
closeAction:'hide'
})
cmpAddWindow.show();
})


It shows fine on chrome, ie and safari but displays incorrectly in firefox 3.5. Screen shots are attached. Notice that in firefox I get an extra scrollbar towards the right.

danderson
29 Dec 2009, 1:30 PM
It shows fine on chrome, ie and safari but displays incorrectly in firefox 3.5. Screen shots are attached. Notice that in firefox I get an extra scrollbar towards the right.

have you found a remedy for this, by chance? the only workaround i've found was to add a 10px margin to the bottom http://www.extjs.com/forum/showthread.php?t=77693

thx.

celiane
1 Mar 2010, 12:35 AM
Hello,

Could you add the following:

- In the xtype: 'multiselect', could you add checkbox for selection (easier than CTRL, more readable)
- In the reload, add a mask which indicates that the load is being
- In the getValue () return names <input name="" and values <input value=""

thank you

talshadar
5 Apr 2010, 6:26 AM
I"m using the item selector with a data source grabbed from a database - one for the From and one for To fields. I can load data into both without a problem but what I'm trying to figure out how to do is load the full list in the From field - but move the selected items (a separate dataset I pull from another table) out of the From field into the To field. I can't find any information on doing this.

Can anyone give a suggestion??

sitarlo
7 Apr 2010, 11:08 AM
When I populate the multiselect using an ArrayStore, everything works fine, but when I use a JsonStore the multiselect is populated but there's no text, just a blank record that I can highlight and move between the multiselects. When I look at the DOM in firebug all the records are setup correctly and everything looks right. The displayField and valueField configs are set correctly, but when I inspect the element of a blank record in the multiselect box the div for each row has no text in it. How can all the records be added to the multiselect's listview, but not the text? Any Ideas?

sitarlo
7 Apr 2010, 1:03 PM
Ok, so I had to specify mapping=0, mapping=1, etc... in my JsonStore fields config and it works.

siberian
11 Jun 2010, 12:04 AM
In this case I have a store with ~200 items in it.

When applied to a normal listview all display.

When applied to a multiselect it only displays enough to fill the specified height. Increasing the height increases the number of visible items.

Anyone have any tips? This component is absolutely fantastic, just need to work through this problem.

Thanks!
John-



MyApp.CategorySelectorView = Ext.extend(Ext.Panel, {
layout: 'fit',
initComponent: function() {
var dv = [{
items: [{
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
imagePath: '/images/',
multiselects: [{
width: 250,
height: 250,
store: categorySelectorStore,
displayField: 'categoryname',
valueField: 'id',
autoscroll: true
}, {
width: 250,
height: 250,
//store: someArray (id->value) autoconverts to store
displayField: 'categoryname',
valueField: 'id',
//data: string literal
}]
}]

}];
this.items = dv;
MyApp.CategorySelectorView.superclass.initComponent.call(this);
}
});
Ext.reg('categorySelector', MyApp.CategorySelectorView);


and the listview version


{
width: 150,
xtype: 'listview',
title: 'List Categories',
width: 250,
height: 250,
store: categorySelectorStore,
displayField: 'categoryname',
valueField: 'id',
autoscroll: true,
"columns": [
{
"dataIndex": "categoryname",
"header": "Name"
}
]
}

Here is an annotated visual

20907

Radha.kancharla
14 Jun 2010, 10:46 AM
Is ItemSelector widget is in stable release ?

I have downloaded ext-3.2.1 version and couldn't find ItemSelector.js

siberian
14 Jun 2010, 11:05 AM
Unfortunately its not in the base extjs that I know of which is unfortunate, its a great component!

Even so I was really hoping someone could help shed some light on why its rendering this way. I seem to be the only person that has this problem so its obviously something dumb on my side :(

Tx!
John-

maz56
16 Jun 2010, 11:28 PM
Loading a form from a remote source does not populate the toMultiselect's box. I fixed this by adding the following function after getValue in ItemSelector.js:



setValue: function(values) {
this.reset();
this.fromMultiselect.setValue(values);
this.fromTo();
},
It would be great if this was included in the next Ext JS release.

siberian
16 Jun 2010, 11:29 PM
I was just searching for a solution to this. Thanks. You are truly Awesome.

J


Loading a form from a remote source does not populate the toMultiselect's box. I fixed this by adding the following function after getValue in ItemSelector.js:



setValue: function(values) {
this.reset();
this.fromMultiselect.setValue(values);
this.fromTo();
},
It would be great if this was included in the next Ext JS release.

Radha.kancharla
17 Jun 2010, 10:28 AM
Can any one let me know how are you submitting selected values ?

Antjac
10 Nov 2010, 7:31 AM
Hi,

I'm using 2 itemselectors for my project. It's all right but i've a little problem with the D&D.
When I drag drom the first itemselector, i can drop to the second one... I'll like to avoid it.

How can i do ?

Thx,

dterle
18 Nov 2010, 2:41 AM
Same problem 10 minutes ago.

Use dragGroup: "zone1" & dropGroup: "zone1" on each list (same names in From and To lists of the SAME multiselect).

Exemple :

multiselects: [{
width: 270,
height: 250,
dragGroup: "zone1", // Pour limiter drag&drop à ce multiselect
dropGroup: "zone1",
store: new Ext.data.SimpleStore( ...)
},
{
width: 270,
height: 250,
dragGroup: "zone1", // Pour limiter drag&drop à ce multiselect
dropGroup: "zone1",
store: new Ext.data.SimpleStore( ... )
}And for exemple "zone2" for the second multiselect group.

benmclendon
9 Dec 2010, 12:00 PM
Thanks MAZ56, Perfect!!


Loading a form from a remote source does not populate the toMultiselect's box. I fixed this by adding the following function after getValue in ItemSelector.js:



setValue: function(values) {
this.reset();
this.fromMultiselect.setValue(values);
this.fromTo();
},
It would be great if this was included in the next Ext JS release.

sothea
3 Jan 2011, 6:57 PM
I have problem with itemselector. I have many tabs with the same itemselector (tab can add or remove, but it has the same data), but when I close the tab, the double click of itemselect is disable. Please help me.

orionx7
10 Feb 2011, 9:56 AM
Ok, so I had to specify mapping=0, mapping=1, etc... in my JsonStore fields config and it works.



{
xtype: 'multiselect',
fieldLabel: 'Select a example',
name: 'multiselect',
width: 350,
height: 200,
allowBlank:false,
store: new Ext.data.JsonStore({
autoLoad: true,
url: 'example.php',
root: 'data',
totalProperty: 'total',
idProperty: 'id',
autoDestroy: true,
remoteSort: true,
sortInfo: {field: 'text', direction: 'ASC'},
storeId: 'dsExample',
fields: [
{name: 0, mapping: 'text'},
{name: 1, mapping: 'id'}
],
baseParams: {_action: 'select'}
})
}

Cédric VIDREQUIN
22 Sep 2011, 11:20 PM
Hello,

I'm trying to use the MultiSelect 2.2 in a SpringRoo project. I add the JavaScript sources in the load-scripts.tagx file like this :


<jsp:root xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:spring="http://www.springframework.org/tags" version="2.0">
(...)
<spring:url value="/resources/CSS/ext-all.css" var="ext_all_css" />
<spring:url value="/resources/JS/ExtJs/adapter/ext/ext-base-debug.js" var="ext_base_debug_js" />
<spring:url value="/resources/JS/ExtJs/ext-all-debug.js" var="ext_all_debug_js" />
<spring:url value="/resources/CSS/extensible-all.css" var="extensible_all_css" />
<spring:url value="/resources/JS/Extensible/extensible-all-debug.js" var="extensible_all_debug_js" />
<spring:url value="/resources/JS/ExtJs/i18n/ext-lang-${pageContext.response.locale}.js" var="ext_lang_js" />
<spring:url value="/resources/JS/Extensible/i18n/extensible-lang-${pageContext.response.locale}.js" var="extensible_lang_js" />
(...)
<spring:url value="/resources/CSS/Multiselect.css" var="Multiselect_css" />
<spring:url value="/resources/JS/Multiselect.js" var="Multiselect_js" />
<spring:url value="/resources/JS/DDView.js" var="DDView_js" />
(...)
<link rel="stylesheet" type="text/css" href="${ext_all_css}"> <!-- required for FF3 and Opera --> </link>
<link rel="stylesheet" type="text/css" href="${extensible_all_css}"> <!-- required for FF3 and Opera --> </link>
<link rel="stylesheet" type="text/css" href="${Multiselect_css}" > <!-- required for FF3 and Opera --> </link>
(...)
<script src="${ext_base_debug_js}" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
<script src="${ext_all_debug_js}" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
<script src="${extensible_all_debug_js}" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
<script src="${ext_lang_js}" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
<script src="${extensible_lang_js}" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
<script src="${DDView_js}" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
<script src="${Multiselect_js}" type="text/javascript"> <!-- required for FF3 and Opera --> </script>
(...)
</jsp:root>


But when I load my page, I have this first error :

sp is undefined in ext-base-debug.js (line 251)
And when I try to show the MultiSelector, I have this second error (maybe related to the first one) :

this.classRe is undefined in DDView.js (line 34)

I red that the first error can appear when something tries to extend something else that is not defined yet. But here it happens in "ext-base-debug.js" and not in "DDView.js", and only if I load "DDView.js". But "DDView.js" is supposed to be loaded after "ext-base-debug.js" ...

Can someone give me a clue please ?

Cédric VIDREQUIN
23 Sep 2011, 5:10 AM
Hello again,

I found the source of the problem : versions !

The last version of Multiselector uses DDView object that extends Ext.View.

As I use ExtJs 3.3.1, Ext.View is not defined.

So I have to use an older version of MultiSelector and ItemSelector.

I hope this will help someone.

chiranjeevitg
7 May 2012, 5:29 AM
Hi,

Thanks for the plugin it helped alot, I am looking for multiselect functionality without using the CTRL key, I am able to select the values using CTRL key, but I am looking for selecting the multiple values by mouse click, please help on this.


Thanks.

wonderway
5 Dec 2013, 8:25 PM
guys, i can't access demo and download page :(

cuongtl
13 Mar 2014, 12:14 AM
guys, i can't access demo and download page :(

i have got the same trouble

nawaha
4 Sep 2014, 8:25 PM
Loading a form from a remote source does not populate the toMultiselect's box. I fixed this by adding the following function after getValue in ItemSelector.js:



setValue: function(values) {
this.reset();
this.fromMultiselect.setValue(values);
this.fromTo();
},
It would be great if this was included in the next Ext JS release.

Great thanks to Maz56, i find it :)