PDA

View Full Version : [2.0] Ext.ux.Multiselect/ItemSelector v3.0



Pages : [1] 2

tjstuart
5 Dec 2007, 4:59 PM
29 April 2008

Note from Brian re. why extension not in 2.1

"Sorry about that. Yes, it was planned for 2.1 but due to many factors, we didn't quite get it in. However, it will definitely be in the next release. We apologize for the delay."

"FYI, the plans are to get it into the next version, i.e., either 2.1.1 or 2.2 (not sure yet which it will be). But yes, if you need it today, you should use the existing ux."




22 February 2008 - Attention All

The Ext development team have decided to incorporate the Multiselect portion of this extension into the Ext core for the [see note above] release.

I have handed over the code. Given this, no further development (by me) will take place (in the short term) on either Multiselect or ItemSelector.

Once the Ext team have incorporated the Multiselect portion I will be able to alter ItemSelector to use the core version of Multiselect.

Thanks for your patience and I hope you'll agree that this extension will become even better given the expertise of the Ext core dev team.


*** Alot of people are asking for this patch. So I've placed here on page 1. This patch fixes the "cannot drag back from selected to available ***

Download patch for 3.0 http://extjs.com/forum/attachment.php?attachmentid=4903&d=1204167059



Extension Page http://extjs.com/learn/Extension:Multiselect2
Demo http://www.figtreesystems.com/ext/ext-ux/2.0/Multiselect/Multiselect.html
Download http://www.figtreesystems.com/ext/ext-ux/2.0/Multiselect/MultiselectItemSelector-3.0.zip


--------------------

I would like to thank "vtswingkid" for his port to Ext2.

I have kept 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.

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

sfwalter
6 Dec 2007, 5:00 AM
nice job!

vtswingkid
6 Dec 2007, 6:11 AM
Looks good!

Does anyone else have a layout issue with IE and the multiselector?

I find that it is all shifted left about 5 pixels until a mouse over. Could use a fix if anyone has the time. It doesn't occur with the itemselector.

Cheers!

John Holmes
6 Dec 2007, 7:39 AM
Re-posted here to hilight the need of this modify in the official version.

Hope it is useful.

I have changed the valueChange method in this way, to allow the item selector to remove items loaded in the toStore from the fromStore when using 2 data store wich have data.



valueChanged: function(store) {
var record = null;
var values = [];
for (var i=0; i<store.getCount(); i++) {
record = store.getAt(i);
values.push(record.get(this.valueField));
if(!this.allowDup) {

var index = this.fromMultiselect.view.store.find(this.valueField, record.get(this.valueField));
var rdup = this.fromMultiselect.view.store.getAt(index);

if(rdup) {

this.fromMultiselect.view.store.remove(rdup);
}
}
}

this.fromMultiselect.view.refresh();
this.fromMultiselect.store.sort(this.displayField,'ASC');

this.hiddenField.dom.value = values.join(this.delimiter);
this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
}


Alos i suggest to add two config params like

allowToSort
allowFromSort

to disable/enable automaitc sorting

tjstuart
6 Dec 2007, 7:08 PM
Looks good!

Does anyone else have a layout issue with IE and the multiselector?

I find that it is all shifted left about 5 pixels until a mouse over. Could use a fix if anyone has the time. It doesn't occur with the itemselector.

Cheers!

Yes I noticed that but it was after several beers so I thought it was just my eyes playing tricks on me :D I'll have a look next week.

tjstuart
6 Dec 2007, 7:11 PM
Re-posted here to hilight the need of this modify in the official version.

Hope it is useful.

I have changed the valueChange method in this way, to allow the item selector to remove items loaded in the toStore from the fromStore when using 2 data store wich have data.

// code snipped

Alos i suggest to add two config params like

allowToSort
allowFromSort

to disable/enable automaitc sorting

I'll look into adding the valueChange thing in the next release.

Whilst I haven't looked at the source to confirm I would have thought that the sorting would not occur if you don't specify toSortField and fromSortField.

John Holmes
7 Dec 2007, 1:54 AM
I'll look into adding the valueChange thing in the next release.

Whilst I haven't looked at the source to confirm I would have thought that the sorting would not occur if you don't specify toSortField and fromSortField.

About the allow sort,

if you don't specify the 'sortsField' the TO sort will not occour, the FROM sort il always done by DisplayField.

Could be useful to disable all sorting.

John Holmes
7 Dec 2007, 3:30 AM
I have found another bug:

when you drop an intem from TOList to FROMList and then try to readd the item dblclicking it, some error occour.

tjstuart
11 Dec 2007, 2:54 PM
Just bumping this thread as I would prefer all questions and bug reports etc to be reported here as this is the current maintenance version. This way I don't have to browse two threads discussing the same thing.

tidal
12 Dec 2007, 10:15 AM
Hi!

I created an extension to your Ext.ux.ItemSelector extension,
because I needed a way to filter the data in the fromStore.
This mainly just adds a search-field (TwinTriggerField) above
the ItemSelector, which will filter the data on remote.

I don

tjstuart
12 Dec 2007, 2:45 PM
@tidal - nice job. looks interesting. i'll look at incorporating in a future release. cheers!

mdissel
12 Dec 2007, 2:45 PM
May somebody be interested in this...
... if not, at least I needed it :)


Can you post a screenshot of how this looks?

tidal
13 Dec 2007, 2:48 AM
@mdissel:
hhm, ok, I

Domitian
15 Dec 2007, 1:33 AM
So I had a minor problem with the multi-select after calling the doLayout method on the formPanel. After I set the value on some form fields in my formPanel, the doLayout eventually calls getRawValue on each form component within the panel. In the case of the multi-select, this resulted in getValue getting called with the this.view still being null since onRender hasn't been called yet. I went ahead and fixed this method by checking if the view was null or not yet. Here's the minor fix:



getValue: function(valueField){
if(this.view)
{
var returnArray = [];
var selectionsArray = this.view.getSelectedIndexes();
if (selectionsArray.length == 0) {return '';}
for (var i=0; i<selectionsArray.length; i++) {
returnArray.push(this.store.getAt(selectionsArray[i]).get(((valueField != null)? valueField : this.valueField)));
}
return returnArray.join(this.delimiter);
}
else
{
return "";
}
},

racke
16 Dec 2007, 5:35 AM
Hi!

I'm trying to put the ItemSelector on a form, When I pre-populate the fromSelector, it works fine.
Code:

var fromStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'userMgr.shtml?action=getAllRoles'
}),

reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'totalCount',
id: 'id'
}, [
{name: 'rolename', mapping: 'rolename'},
{name: 'rolevalue', mapping: 'rolename'}
])
});
var rolesSelector = new Ext.ux.ItemSelector({
name: 'roles',
fieldLabel: "selectRole",
valueField: "rolevalue",
dataFields: ["rolevalue", "rolename"],
displayField: "rolename",
toData: [],
anchor: '90%',
fromStore: fromStore,
imagePath: 'resources/multiSelector',
allowBlank: true,
fromLegend: "toSelect",
toLegend: "selected"
});
fromStore.load();
The problem is when I load the selected data from server like below, although the values are setted correctly, the selected items are not populated to the toSelector.
Code:
formPanel = new Ext.form.FormPanel({
baseCls: 'x-plain',
labelWidth: 75,
url:'userMgr.shtml?action=updateUser',
reader: new Ext.data.JsonReader({
root: 'results'
}, ['id','username','realname','password','cellphone','email',{name: 'roles', mapping: 'roles'}]
),
defaultType: 'textfield',
items: [
username,
realname,
password,
cellphone,
email,
rolesSelector
]
});
formPanel.form.load({url:'userMgr.shtml?action=loadSingleUser&id='+selectedId,
waitMsg:'Loading'});


So I try to override the 'setValue()' in ItemSelector.
Code:
setValue: function(values) {
if (!values || (values == '')) { return; }
if (!(values instanceof Array)) { values = values.split(this.delimiter); }
var records = [];

for(var i=0; i<values.length; i++){
//find the items in fromSelector
recordIdx = this.fromMultiselect.view.store.findBy(function(record, id){
var json = record.json;

for(var p in json){
if(json[p]==values[i])
return true;
}
return null;
});
record = this.fromMultiselect.view.store.getAt(recordIdx);

records.push(record);
}
if(!this.allowDup)selectionsArray = [];
for(var i=0; i<records.length; i++){
record = records[i];
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));
}
}
this.toMultiselect.view.refresh();
this.fromMultiselect.view.refresh();
if(this.toSortField)this.toMultiselect.store.sort(this.toSortField, this.toSortDir);
if(this.allowDup)this.fromMultiselect.view.select(selectionsArray);
else this.toMultiselect.view.select(selectionsArray);
this.valueChanged(this.toMultiselect.store);
}
but to find that datas in 'this.fromMultiselect.view.store' are not completely loaded, I must explicitly wait a while using methods like 'while(this.fromMultiselect.view.store.getCount()==0){
setTimeout(Ext.emptyFn, 100);
}'

I'm confusing about why the 'fromMultiselect.view.store' is not loaded.

can anyone help?

Thanks,
Rick

pgiraud
17 Dec 2007, 6:09 AM
I don't know if it has already been discussed here but I think it would be helpful if we add a selectAll() method to the MultiSelect form field.

Here's a snippet of code that does the job :



selectAll: function() {
var selections = [];
for (var i = 0; i < this.view.store.getTotalCount(); i++) {
selections.push(i);
}
this.view.select(selections);
this.hiddenField.dom.value = this.getValue();
this.validate();
},

I added it just after the setValue method.

Regards,
Pierre

tjstuart
17 Dec 2007, 2:34 PM
@racke - could you possibly post a working example online. it's near impossible to decipher what's going on without something to debug. also, in future post your code using the PHP code formatting button.

@everyone else - thanks for the submissions. some good stuff there. i'm off on holidays for christmas and will return 7 January 2008. will try to have 3.1 ready for release mid January. merry christmas to all. cheers

attiato
7 Jan 2008, 2:32 AM
Is there a way to put a Loading indicator for the multiselect field, because if used in a form, where the store returns many records, it takes time to load the data in the field, and the user doesn't know he has to wait!

By the way how does the field validation for the itemselector work in a form?
Thanx in advance! :D

seibert
9 Jan 2008, 6:02 AM
@tjstuart - How do i use the fromstore ?

I use the same html of your but i put:


fromStore: test

and


var test = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: perm.php?act=getAct'
})
});
test.load();


return of php:


[["123","One Hundred Twenty Three"], ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"], ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]]


But not show in the select....

seibert
9 Jan 2008, 6:23 AM
I did use the FromStore.. thanks...

tjstuart
9 Jan 2008, 3:09 PM
Is there a way to put a Loading indicator for the multiselect field, because if used in a form, where the store returns many records, it takes time to load the data in the field, and the user doesn't know he has to wait!

By the way how does the field validation for the itemselector work in a form?
Thanx in advance! :D

Re. loading indicator. take a look at the LoadMask class.

Re. validation. you need to handle this yourself. you can either use getValue on form submit or probe the stores directly or monitor the 'change' event.

jsakalos
10 Jan 2008, 1:41 PM
Hi tjstuart,

I cannot drag items back once they are in toMultiselect.

Complete showcase: http://aariadne.com/bugs/itemselect.html

DDView.js and Multiselect.js are in subdirectory bugs/multiselect.

Seems to be sth with ddGroups as left DDView is not receiving drop event at all.

Cheers,

tjstuart
10 Jan 2008, 5:26 PM
Hi tjstuart,

I cannot drag items back once they are in toMultiselect.

Complete showcase: http://aariadne.com/bugs/itemselect.html

DDView.js and Multiselect.js are in subdirectory bugs/multiselect.

Seems to be sth with ddGroups as left DDView is not receiving drop event at all.

Cheers,

Hi jsakalos,

This is a bug. It will be fixed in the next release. In the meantime I have attached a patched version of Multiselect.js.

Regards

jsakalos
10 Jan 2008, 5:51 PM
Thank you very much, the patched version works perfect. :)

jsakalos
11 Jan 2008, 7:40 AM
Hi tjstuart,

itemselector doesn't have setValue method and I needed one so I've written this code:


,setValue: function(val) {
if(!val) {
return;
}
val = val instanceof Array ? val : val.split(',');
var rec, i, id;
for(i = 0; i < val.length; i++) {
id = val[i];
if(this.toStore.getById(id)) {
continue;
}
rec = this.fromStore.getById(id);
if(rec) {
this.toStore.add(rec);
this.fromStore.remove(rec);
}
}
}
Take a look at it please if it fits into your concept of itemselector. It works fine for me as I need to fill the right multiselect with items list of which is delivered from server. The only (little) problem is that change event is fired for each item added to the right multiselect, however, I can and I do buffer it.

dpasichnik
11 Jan 2008, 12:09 PM
Hello,

I enchanced look&feel of the multiselect, added 'Select All' button and Filter. That's what I needed for my own use and hope you'll add this functionality for the next release so it would be native.

Thank you all!

P.S. it's orange due to my skin, but I hope you'll manage to change it for your own colors easily by changing css

lkasdorf
14 Jan 2008, 4:07 PM
I'm trying to use multiselect to present a simple 1 column list of files. When you select a file in the list, I'll enable a "View" button and a "Delete" button.

Anyway- I've not yet discovered how I can determine what is selected in the list. First, here is my dataStore that I am feeding the multiselect with:



dsUploadList = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
//where to retrieve data
url: 'getCloserDocsList.php', //url to data object (server side script)
method: 'POST'
}),
reader: new Ext.data.JsonReader(
{
root: 'files'
},
[
{name: 'filePath'}, {name: 'fileName'}
]
),
sortInfo: {field: 'fileName', direction: "ASC"},
}


And here is where I create the multiselect:


{
xtype:"multiselect",
id:"docFilePicker",
fieldLabel:"Uploaded Documents",
name:"uploadedDocs",
dataFields:["filePath", "fileName"],
store:dsUploadList,
valueField:"fileName",
displayField:"fileName",
width:270,
height:112,
allowBlank:true,
enableToolbar:false,
isFormField:false,
border:false,
listeners: {
change: function(sm, row, rec) {
// I would expect row to be an index, instead it is the value
enableDocButtons(row);
}
}


As you can see in my comment, I was expecting to see an index value reported somewhere in the change event. I can read the value of the item selected, but I need the index so that I can retrieve the entire record from the store. The events that multiselect generates are not documented, so a view of the source revealed that it supports click, dblclick, change, and drop. And, sure enough, I see:



this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);


..so I see that is indeed sending the value rather than the index. I'm sure I could tweak the multiselect object to do what I want, but I want to play by the rules here and use this the way it was intended.

I view the multiselect object in firebug and I don't see any sort of index.

I am also unclear of the role of the "ItemSelect" object? Does this only come into play if I'm doing D&D?

All I need here is a simple pickable list- just a combo box that stays open. Maybe this is not the ideal object for my use? I suppose I could use a 1 column grid, but that seems like overkill...

Thanks for any insight and for writing this code!

tjstuart
14 Jan 2008, 5:47 PM
@jsakalos - noted and will include in next release.

@dpasichnik - well done! looks good. will look at possible inclusion in next release.

@lkasdorf - firstly, the 'change' event does what it is supposed to do ie. it gives the new and old value. secondly, if you want to get the indexes of the selected items then you could use something like:-



multiSelect.view.getSelectedIndexes()


Obviously replace 'multiSelect' with whatever you have named your object.

ortizSWF
16 Jan 2008, 11:42 AM
Get selected texts

File: Multiselect.js


textDelimiter:'|',

getSelectedTexts: function() {
var selectedItems = this.view.getSelectedNodes();
var selectedTexts = [];
for (var i = 0; i < selectedItems.length; i++) {
selectedTexts.push(selectedItems[i].innerHTML);
}
return selectedTexts.join(this.textDelimiter);
},


Method:


Ext.getCmp('lstId').getSelectedTexts(); // => text1 | text2 | ... | ...


Nice extension.

vtswingkid
16 Jan 2008, 12:27 PM
tjstuart:
I added a drag disable function to the ddview...this allows you to disable the drag and drop after the ddview is rendered.

vtswingkid
18 Jan 2008, 9:12 AM
I am trying to track down an error in IE. If I open a form with the itemselector the first time...everything drags fine. If I close it and open that form again, when I drag, IE errors. If IE ignores the errors everything still functions fine.

The error is breaking on:
b=el.getBoundingClientRect();
In function:
getXY
In object:
Ext.lib.Dom
In file:
ext-base.js

Has anyone else seen or fixed this?

EDIT:
This is a tough one. It appears that DDView is not cleaning up very well after itself and neither is multiselect. So attached is a good start to that. But I still have yet to remove my problem....

Here is a simple test scenario for IE7...run the code below...click go (it opens a window)... close the window...click go again (it opens the same window)...try dragging something in the itemselector(errors, though if errors are turned off it still seems to work fine)...



Ext.onReady(function(){


function go(){

var win =new Ext.Window({

width:400,

height:300,

title:'Radio Group Test',

items:[{

xtype:'form',

labelWidth:75,

labelAlign:'right',

bodyStyle:'background-color:#DFE8F6; padding-top:10px',

border:false,

items:[{

xtype:'itemselector',

name:'test1',

hideLabel:true,

dataFields:['id','name'],

valueField:'id',

displayField:'name',

msWidth:150,

msHeight:240,

toStore:new Ext.data.SimpleStore({

fields:['id','name']

}),

fromStore:new Ext.data.SimpleStore({

fields:['id','name'],

data:[[0,'zero'],[1,'one'],[2,'two']]

}),

imagePath:'ext-ux/multiselect',

switchToFrom:true,

toLegend:'Selected Items',

fromLegend:'Available Items'

}]

}],

listeners:{

'close':function(){


}

}

});

win.show();

}

new Ext.Button({

renderTo:document.body,

text:'go',

handler:go
});

},this);

lessthantristan
18 Jan 2008, 7:29 PM
I posted this as a bug, and was advised to mention it here.
http://extjs.com/forum/showthread.php?t=23465

however, i'm not sure if this is a problem with the extension, or the way Ext itself handles escaping get/post values.

tjstuart
20 Jan 2008, 2:51 PM
I posted this as a bug, and was advised to mention it here.
http://extjs.com/forum/showthread.php?t=23465

however, i'm not sure if this is a problem with the extension, or the way Ext itself handles escaping get/post values.

Shouldn't this handled (decoded) by your web server? Unfortunately I'm not familiar with django or Python however I would have thought whatever your HTTP posting to would handle this. Do you have the same problem when posting to another web server?

vtswingkid
21 Jan 2008, 1:12 PM
I still have not figured out the above bug for IE. It is a strange one...

I did a quick fix for the disable and enable functions.
A mask is used to disable the multiselects...this takes care of dragging and anything that may be in the toolbar.
The itemselectors icon events check the disable flag before continuing.

tjstuart
21 Jan 2008, 2:43 PM
I still have not figured out the above bug for IE. It is a strange one...

I did a quick fix for the disable and enable functions.
A mask is used to disable the multiselects...this takes care of dragging and anything that may be in the toolbar.
The itemselectors icon events check the disable flag before continuing.

Hi vtswingkid,

Sorry I haven't gotten back to you sooner but I'm flat out at the moment. Seems there will be quite a number of things to add to the next release. I'm on a tight schedule with a huge project at the moment so can't give any firm dates for v3.1. I will get to it soonish however. I was able to replicate the IE bug but nothing came to mind immediately.

I may just have to do a bug-fix release (3.0.1) and leave out some of the features others have suggested.

Cheers buddy

mikee
21 Jan 2008, 4:14 PM
Hi all...

I'm trying to figure out how to get access to the variables inside the MultiSelect extension.

This example is (mostly) based on Toby's Demo posted at:

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

Using the "Get Value" Button, this example shows that variable access from a "native handler" works great.

Where things get tricky (for me) is that I need access to the Selected-Column at a later stage during the "jsPost" routine (shown below). Firebug shows the data is more-or-less accessible, but I can't seem to programatically figure out how the get to it.

--

The idea is that a user would drag-drop some selection, fill out some additional form-fields on the page, and finally trigger the "jsPost" routine. I can get to all other form-variables, just not the ones inside the multiSelection-extension....

Any guidance is very much appreciated.

thanks,

-- MikeE



--


<html>
<head>

<title>Ext.ux.Multiselect/ItemSelector</title>

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

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

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

<script type="text/javascript">
function jsPost(OBJECT) {
alert("SelectedItems -->" + OBJECT.getForm().findField("itemselector"));
// The above does NOT work. Looking for a way to get something along the lines of:
// 10,Ten,9,Nine,2,Two -- note: access is needed to both fields in each PAIR
// (per the way fromData defines the fields ["1", "One"], ["2", "Two"] )

}
</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.FormPanel({
labelWidth: 75,
width:700,
items:[{
xtype:"itemselector",
name:"itemselector",
fieldLabel:"ItemSelector",
dataFields:["code", "desc"],
fromData:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toData:[["10", "Ten"]],
msWidth:250,
msHeight:200,
valueField:"code",
displayField:"desc",
//imagePath:"ext-ux/multiselect",
//switchToFrom:true,
toLegend:"Selected",
fromLegend:"Available",
toTBar:[{
text:"Clear",
handler:function(){
var i=formItemSelector.getForm().findField("itemselector");
i.reset.call(i);
}
}]
}],
buttons:[{
text:"Get Value",
handler: function(){
alert(formItemSelector.getForm().getValues(true));
}
},{
text:"Mark Invalid",
handler: function(){
formItemSelector.getForm().findField("itemselector").markInvalid("Invalid");
}
}]
});
formItemSelector.render("form-ct-itemselector");


});
</script>

</head>

<body style="margin:20px;">

<div style="width:800px;">
<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>


// unclear how to get/pass access to the variables containing the Selected Items
<a href='javascript:jsPost(formItemSelector)'>JSSubmit</a>


</body>
</html>

tjstuart
21 Jan 2008, 6:43 PM
// The above does NOT work. Looking for a way to get something along the lines of:
// 10,Ten,9,Nine,2,Two -- note: access is needed to both fields in each PAIR
// (per the way fromData defines the fields ["1", "One"], ["2", "Two"] )



function jsPost(formPanel) {
var itemSelector = formPanel.getForm().findField("itemselector");
var selectedItemsStore = itemSelector.toMultiselect.store;
var record;
var buf = [];
for (var i=0; i<selectedItemsStore.getCount(); i++) {
record = selectedItemsStore.getAt(i);
buf.push(record.get("code") + "," + record.get("desc"));
}
alert(buf.join(","));
}

mikee
21 Jan 2008, 8:20 PM
Major kudos to Toby Stuart for his assistance in getting this working.
(Scoping issue among other things)

Below is a copy of the code with all fixes applied. I hope this helps anyone else who might be interested in using this awesome extension.

thanks again Toby,

-- MikeE





<html>
<head>

<title>Ext.ux.Multiselect/ItemSelector</title>

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

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

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

<script type="text/javascript">
var formItemSelector;
function jsPost(formPanel) {
var itemSelector = formPanel.getForm().findField("itemselector");
var selectedItemsStore = itemSelector.toMultiselect.store;
var record;
var buf = [];
for (var i=0; i<selectedItemsStore.getCount(); i++) {
record = selectedItemsStore.getAt(i);
buf.push(record.get("code") + "," + record.get("desc"));
}
alert(buf.join(","));
}
</script>

<script type="text/javascript">
Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

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

formItemSelector = new Ext.form.FormPanel({
labelWidth: 75,
width:700,
items:[{
xtype:"itemselector",
name:"itemselector",
fieldLabel:"ItemSelector",
dataFields:["code", "desc"],
fromData:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toData:[["10", "Ten"]],
msWidth:250,
msHeight:200,
valueField:"code",
displayField:"desc",
//imagePath:"ext-ux/multiselect",
//switchToFrom:true,
toLegend:"Selected",
fromLegend:"Available",
toTBar:[{
text:"Clear",
handler:function(){
var i=formItemSelector.getForm().findField("itemselector");
i.reset.call(i);
}
}]
}],
buttons:[{
text:"Get Value",
handler: function(){
alert(formItemSelector.getForm().getValues(true));
}
},{
text:"Mark Invalid",
handler: function(){
formItemSelector.getForm().findField("itemselector").markInvalid("Invalid");
}
}]
});
formItemSelector.render("form-ct-itemselector");


});
</script>

</head>

<body style="margin:20px;">

<div style="width:800px;">
<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>


// unclear how to get/pass access to the variables containing the Selected Items
<a href='javascript:jsPost(formItemSelector)'>JSSubmit</a>


</body>
</html>

lessthantristan
21 Jan 2008, 8:28 PM
Shouldn't this handled (decoded) by your web server? Unfortunately I'm not familiar with django or Python however I would have thought whatever your HTTP posting to would handle this. Do you have the same problem when posting to another web server?

ok, i think i've found the problem.
when you store the value you store it in a hidden field which is set to the result of getValue(), this hidden field is what is submitted, and is thus encoded (by the browser) because it is seen as a single value rather than a select field with multiple values.

This has to be done from the client side. Think of the case where the select box's values contain commas. how is the server supposed to tell the difference between a delimiter comma and the commas that are part of a value. hence the encoding of commas which are part of a value.

I think a select box needs to be used to hold the values rather than a hidden field.
Now that i know the issue, i'll have a look myself to see what i can do about it.

vtswingkid
22 Jan 2008, 6:18 AM
Heh, I knew this would come up one of these days.
I avoid this problem by passing ids.
So each item i have has an id and if an item has a comma in it it does not matter.
I believe there was code put in to change the delimiter a while back though.

Yep...
delimiter:'@@@'
middot makes a good delimiter too.

vtswingkid
22 Jan 2008, 6:22 AM
Toby: I still haven't figured anything out with that IE bug...
Though here is another scenario that may focus our attention more.

hit the go button 4 times and drag the 4 windows created by that appart.
dragging works on all of them.
now close one window.
The bug is on all of them...
Something in cache getting deleted?
The icon buttons and the double click are not impacted by this delete.
So the dragging pops an error on getXY but with the errors ignored our application still works fine...

*pulling hair out* Rob.

mikee
22 Jan 2008, 2:44 PM
I noticed a minor cosmetic issue that seems to manifest in both IE and FF.

Easy to replicate based on Stuart's Live Example:

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

add the "frame: " tag as shown below.
If its set to false (default) the "Mark_Invalid" button works as expected, nice and clean.
If its set to true, the "Mark_Invalid" button works, but the BOTTOM of the red-box intersects with some other line, and produces a jagged/fuzzy line along the bottom of the box.

Obviously minor, but I thought that if I noticed it, I might as well report it to help make multiSelect even better.

Thanks again for a great extension,

-- MikeE

=================================================

Update:the following form example seems to act much like the example in this post. This now appears to be an ext2 issue, not a multiSelect thing. Can someone confirm the behavior independently?

http://extjs.com/deploy/dev/examples/form/dynamic.html <-- also has jagged/fuzzy alarm-box lines
(if you fill out an invalid email address for instance)
=================================================


--

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

formItemSelector = new Ext.form.FormPanel({
labelWidth: 75,
width:700,
frame: true, // <-- false, no problem -- true, fuzzy alert-bottom-line
items:[{

mayank.1941
22 Jan 2008, 9:28 PM
Feature Request:
1) Add methods to getToValues() String[] ; and getFromValues() String[]
These methods are needed to get the values as an array instead of a long string that a) needs to be parsed, b) delimiter could be an issue, c) needed for an RPC application.
2) setMinSelected and setMaxSelected methods. This shold be used to limit on how many or few items can be selected.
3) How about adding add all and remove all arrows in the center.
4) Add the ability to filter both, from and to list from a shared filter box at top/bottom (configurable).
5) Method to select/unselect items in from and to lists.
6) Can the from and to lists adjust width based on content width, should be optional.

christanto
25 Jan 2008, 2:54 AM
Is there an easy way to implement setValue in ItemSelector to set fromData or toData (or both)?
This kind of feature is required so that ItemSelector can accept value given by form load action.

vtswingkid
25 Jan 2008, 6:23 AM
Use the load event to fill the stores from a server, or setup the stores as json stores or something.

Submit/Load:
Currently this is done with a hidden input that stores a delimited string.
If you need it in a different format, cook the data prior to a submit.

talshe
29 Jan 2008, 4:10 AM
Yes I noticed that but it was after several beers so I thought it was just my eyes playing tricks on me :D I'll have a look next week.

any news about this problem?

sjmittal
4 Feb 2008, 9:01 AM
Hi,
I am facing a very basic problem trying to create and load an instance of multi item selector.
The error I get is:
"tpl has no properties"
the code that has error is the bold line in the DDView.js:
Ext.ux.DDView = function(config) {
if (!config.itemSelector) {
var tpl = config.tpl;
if (this.classRe.test(tpl)) {
config.tpl = tpl.replace(this.classRe, 'class=$1x-combo-list-item $2$1');
}
else {
config.tpl = tpl.replace(this.tagRe, '$1 class="x-combo-list-item" $2');
}
config.itemSelector = ".x-combo-list-item";
}
problem is that tpl is undefined.
Strangely I am have this problem only when I access the page from a web server.
If I directly open the page in browser it works fine. I am working on ff.

It looks like some js is not getting loaded properly.

Please help!

Thanks
Sachin



var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: 'Profile Form',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',

items: [new Ext.form.ComboBox({
fieldLabel: 'Table Name',
hiddenName:'table',
store: new Ext.data.SimpleStore({
fields: ['table', 'table-count'],
data : tables
}),
valueField:'table',
displayField:'table-count',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a table to profile...',
selectOnFocus:true,
width:190,
listeners: {change: handleTableChange}
}),new Ext.ux.ItemSelector({
hiddenName: 'column',
fieldLabel: 'Columns Selector',
dataFields: ['column', 'column-type'],
fromData: columns,
msWidth: 190,
msHeight: 200,
valueField: 'column',
displayField: 'column-type'
})
]
});

simple.render(document.body);

tjstuart
4 Feb 2008, 3:49 PM
Hi Sachin,

I don't mind looking at this problem but you will need to put up a live example. I haven't the time to piece together your example with stores etc.

Also, you should post your questions in the MultiselectItemSelector thread http://extjs.com/forum/showthread.php?t=20071&page=5

Cheers

tjstuart
4 Feb 2008, 3:51 PM
any news about this problem?

No not as yet. I'm flat out at the moment. My apologies. Will try and have it solved in next release...just too busy now :( Trust you understand.

sjmittal
5 Feb 2008, 4:34 AM
Hi,
I am facing a problem loading a form panel consisting of a combo box and a multi item selector.
Initially combo box is filled with data and upon selection of an item the mult item selection box would be populated.

When I load the html page, I get the following error in ext-all.js
this.data has no properties line:43

here is the html code:








<html>
<head>
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<link rel="stylesheet" type="text/css" href="examples.css"/>

<link rel='stylesheet' type='text/css' href='Multiselect.css'>

<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="Multiselect.js"></script>
<script type="text/javascript" src="DDView.js"></script>
</head>
<body>

<script type="text/javascript">

var tables = [

['KidzeeIndentOrderDetails' , 'KidzeeIndentOrderDetails - 67656'] ,

['ZcaMisCollectionDetails' , 'ZcaMisCollectionDetails - 20819'] ,

['KidzeeCandidateMaster' , 'KidzeeCandidateMaster - 19510'] ,

['ZcaCourseEnquiry' , 'ZcaCourseEnquiry - 14387'] ,

['ZcaMisStudentMaster' , 'ZcaMisStudentMaster - 13947'] ,

['ZcaMisBillingDetails' , 'ZcaMisBillingDetails - 12328'] ,

['KidzeeProductDespatch' , 'KidzeeProductDespatch - 11418'] ,

['InventoryForwardDetails' , 'InventoryForwardDetails - 10472'] ,

['InventoryOpeningBalance' , 'InventoryOpeningBalance - 9887'] ,

['InventoryDispatchedQuantity' , 'InventoryDispatchedQuantity - 9518'] ,

['KidzeeArchiveEnquiryDetails' , 'KidzeeArchiveEnquiryDetails - 9338'] ,

['InventoryDispatchedBalance' , 'InventoryDispatchedBalance - 9154'] ,

['ZcaMisStudentGuardianDetails' , 'ZcaMisStudentGuardianDetails - 8894'] ,

['KidzeeIndentValidatedOrder' , 'KidzeeIndentValidatedOrder - 7717'] ,

['KidzeeTeacherQualification' , 'KidzeeTeacherQualification - 6818'] ,

['ZcaMisUserTracking' , 'ZcaMisUserTracking - 5836'] ,

['KidzeeIndentValidatedOrderBackup' , 'KidzeeIndentValidatedOrderBackup - 5445'] ,

['ZcaCourseEnquiryArchive' , 'ZcaCourseEnquiryArchive - 4175'] ,

['ZcaMisAuditorTracking' , 'ZcaMisAuditorTracking - 3993'] ,

['KidzeeEnquiryDetails' , 'KidzeeEnquiryDetails - 3578'] ,

['KidzeeTeacherExperienceDetails' , 'KidzeeTeacherExperienceDetails - 2851'] ,

['KidzeeTeacherDetails' , 'KidzeeTeacherDetails - 2533'] ,

['KidzeeTeachersProfile' , 'KidzeeTeachersProfile - 2516'] ,

['KidzeeStudentIcardDetails' , 'KidzeeStudentIcardDetails - 1980'] ,

['KidzeeIndentOrderPayment' , 'KidzeeIndentOrderPayment - 1886'] ,

['SchoolUsers' , 'SchoolUsers - 1560'] ,

['KidzeeTeacherTrainingDetails' , 'KidzeeTeacherTrainingDetails - 1488'] ,

['NaukriExperienceDetails' , 'NaukriExperienceDetails - 1311'] ,

['KidzeeIndentProducts' , 'KidzeeIndentProducts - 1205'] ,

['KidzeeCatalogProducts' , 'KidzeeCatalogProducts - 1176'] ,

['KidzeeDespatchDetails' , 'KidzeeDespatchDetails - 1064'] ,

['InventoryVendorProducts' , 'InventoryVendorProducts - 804'] ,

['InventoryGoodsReceivedItems' , 'InventoryGoodsReceivedItems - 734'] ,

['NewCode' , 'NewCode - 722'] ,

['KidzeeExamCandidateAnswers' , 'KidzeeExamCandidateAnswers - 681'] ,

['KidzeeJunkEnquiryDetails' , 'KidzeeJunkEnquiryDetails - 658'] ,

['InventoryGodownStockStatus' , 'InventoryGodownStockStatus - 628'] ,

['KidzeeOrder' , 'KidzeeOrder - 598'] ,

['KidzeeMediaAllZonalData' , 'KidzeeMediaAllZonalData - 596'] ,

['ZcaMisCourseCategoryRelation' , 'ZcaMisCourseCategoryRelation - 519'] ,

['KidzeeRoyaltyDetails' , 'KidzeeRoyaltyDetails - 448'] ,

['LocationMaster' , 'LocationMaster - 442'] ,

['KidzeeMenuRights' , 'KidzeeMenuRights - 438'] ,

['KidzeeUserDetails' , 'KidzeeUserDetails - 437'] ,

['KidzeeCentreDetails' , 'KidzeeCentreDetails - 417'] ,

['LitmusMenuRights' , 'LitmusMenuRights - 367'] ,

['LitmusUserDetails' , 'LitmusUserDetails - 365'] ,

['InventoryGoodsReceipt' , 'InventoryGoodsReceipt - 337'] ,

['KidzeeIndentProductSublist' , 'KidzeeIndentProductSublist - 314'] ,

['KidzeeAuditorCentreDetails' , 'KidzeeAuditorCentreDetails - 284'] ,

['KidzeeMarketingEastQuery' , 'KidzeeMarketingEastQuery - 282'] ,

['SchoolPaymentDetails' , 'SchoolPaymentDetails - 276'] ,

['InventoryForwardHistory' , 'InventoryForwardHistory - 260'] ,

['InventoryPurchaseOrder' , 'InventoryPurchaseOrder - 255'] ,

['ZcaFranchiseeEnquiry' , 'ZcaFranchiseeEnquiry - 248'] ,

['KidzeeCCPTEQualification' , 'KidzeeCCPTEQualification - 244'] ,

['KidzeeCCPTEExperienceDetails' , 'KidzeeCCPTEExperienceDetails - 244'] ,

['KidzeeMarketingEastZonalData' , 'KidzeeMarketingEastZonalData - 242'] ,

['KidzeeMenuAccessDetails' , 'KidzeeMenuAccessDetails - 240'] ,

['KidzeeAuditedQuestionsDetails' , 'KidzeeAuditedQuestionsDetails - 234'] ,

['NaukriQualification' , 'NaukriQualification - 230'] ,

['LitmusCentreDetails' , 'LitmusCentreDetails - 219'] ,

['KidzeeMarketingNorthQuery' , 'KidzeeMarketingNorthQuery - 215'] ,

['NaukriUserDetails' , 'NaukriUserDetails - 199'] ,

['KidzeeMarketingNorthZonalData' , 'KidzeeMarketingNorthZonalData - 193'] ,

['KidzcareEnquiryDetails' , 'KidzcareEnquiryDetails - 192'] ,

['ZcaMisAuditorCentreDetails' , 'ZcaMisAuditorCentreDetails - 189'] ,

['KidzeeIndentImages' , 'KidzeeIndentImages - 181'] ,

['NaukriProfessionalQualification' , 'NaukriProfessionalQualification - 179'] ,

['KidzeeIndentImageDetails' , 'KidzeeIndentImageDetails - 177'] ,

['KidzeeProducts' , 'KidzeeProducts - 174'] ,

['KidzeeIndentSublist' , 'KidzeeIndentSublist - 163'] ,

['KidzeeReceiptDetails' , 'KidzeeReceiptDetails - 152'] ,

['KidzeeExamQBTypeC' , 'KidzeeExamQBTypeC - 141'] ,

['ZcaMisCourseModuleDetails' , 'ZcaMisCourseModuleDetails - 125'] ,

['KidzeeMarketingSouthQuery' , 'KidzeeMarketingSouthQuery - 117'] ,

['KidzeeEventDetails' , 'KidzeeEventDetails - 106'] ,

['NaukriUserSearch' , 'NaukriUserSearch - 103'] ,

['KidzeeIECTECEnquiryDetails' , 'KidzeeIECTECEnquiryDetails - 101'] ,

['KidzeeMarketingSouthZonalData' , 'KidzeeMarketingSouthZonalData - 98'] ,

['KidzeeMerchantDescription' , 'KidzeeMerchantDescription - 95'] ,

['KidzeeMarketingWestQuery' , 'KidzeeMarketingWestQuery - 86'] ,

['KidzeeMenuMaster' , 'KidzeeMenuMaster - 81'] ,

['KidzeeExamQBTypeA' , 'KidzeeExamQBTypeA - 77'] ,

['NaukriPostJob' , 'NaukriPostJob - 74'] ,

['NextValues' , 'NextValues - 70'] ,

['InventoryVendorDetails' , 'InventoryVendorDetails - 70'] ,

['ZcaMscitEnquiry' , 'ZcaMscitEnquiry - 69'] ,

['LitmusMenuAccessDetails' , 'LitmusMenuAccessDetails - 68'] ,

['ZcaFacultyEnquiry' , 'ZcaFacultyEnquiry - 67'] ,

['KidzeeMarketingWestZonalData' , 'KidzeeMarketingWestZonalData - 64'] ,

['KidzeeHighEnquiryDetails' , 'KidzeeHighEnquiryDetails - 56'] ,

['KidzeeIndentCatalog' , 'KidzeeIndentCatalog - 50'] ,

['CourseCatalogProducts' , 'CourseCatalogProducts - 44'] ,

['KidzeeMarketingBudgetAllZonalData' , 'KidzeeMarketingBudgetAllZonalData - 38'] ,

['CourseBasketProducts' , 'CourseBasketProducts - 34'] ,

['LitmusMenuMaster' , 'LitmusMenuMaster - 32'] ,

['ZcaMisAuditorDetails' , 'ZcaMisAuditorDetails - 28'] ,

['ZcaCentreEnquiry' , 'ZcaCentreEnquiry - 27'] ,

['KidzeeAuditorTracking' , 'KidzeeAuditorTracking - 26'] ,

['KidzeeAuditQualityDetails' , 'KidzeeAuditQualityDetails - 26'] ,

['KidzeeBusinessInformation' , 'KidzeeBusinessInformation - 25'] ,

['KidzeeFileDownloads' , 'KidzeeFileDownloads - 23'] ,

['KidzeePaymentDetails' , 'KidzeePaymentDetails - 21'] ,

['ZcaMisAuditorMaster' , 'ZcaMisAuditorMaster - 20'] ,

['ZcaMisCourseMaster' , 'ZcaMisCourseMaster - 19'] ,

['KidzeeMerchantCategory' , 'KidzeeMerchantCategory - 19'] ,

['InventoryTermsMaster' , 'InventoryTermsMaster - 19'] ,

['KidzeeAuditorQuestions' , 'KidzeeAuditorQuestions - 18'] ,

['KidzeeMathFunEnquiryDetails' , 'KidzeeMathFunEnquiryDetails - 15'] ,

['LitmusNextValues' , 'LitmusNextValues - 14'] ,

['KidzeeContestDetails' , 'KidzeeContestDetails - 14'] ,

['KidzeeExcelUploadDetails' , 'KidzeeExcelUploadDetails - 11'] ,

['KidzeeExamQBTypeB' , 'KidzeeExamQBTypeB - 10'] ,

['KidzeeProductPayment' , 'KidzeeProductPayment - 10'] ,

['KidzeeExamUserDetails' , 'KidzeeExamUserDetails - 8'] ,

['ZcaIndentProducts' , 'ZcaIndentProducts - 8'] ,

['ZcaIndentCatalogProducts' , 'ZcaIndentCatalogProducts - 8'] ,

['KidzeeExamRegistration' , 'KidzeeExamRegistration - 7'] ,

['KidzeeProductCat' , 'KidzeeProductCat - 7'] ,

['Nutrition' , 'Nutrition - 6'] ,

['KidzeeMediaUpload' , 'KidzeeMediaUpload - 5'] ,

['InventoryGodownDetails' , 'InventoryGodownDetails - 5'] ,

['ZcaIndentCatalog' , 'ZcaIndentCatalog - 5'] ,

['ZcaIndentImageDetails' , 'ZcaIndentImageDetails - 4'] ,

['ZcaIndentImages' , 'ZcaIndentImages - 4'] ,

['InventorySaleRejectDetails' , 'InventorySaleRejectDetails - 4'] ,

['KidzeeAuditorRemarkDetails' , 'KidzeeAuditorRemarkDetails - 4'] ,

['KidzeeAttachedFormsDetails' , 'KidzeeAttachedFormsDetails - 3'] ,

['KidzeeFranchiseeOrientation' , 'KidzeeFranchiseeOrientation - 3'] ,

['CourseBasketCatalog' , 'CourseBasketCatalog - 3'] ,

['KidzeeZonalObservationAction' , 'KidzeeZonalObservationAction - 3'] ,

['ZedCourseDetails' , 'ZedCourseDetails - 3'] ,

['ZcaIndentOrderDetails' , 'ZcaIndentOrderDetails - 2'] ,

['ZcaIndentOrderPayment' , 'ZcaIndentOrderPayment - 2'] ,

['ZcaCentreCourseMapping' , 'ZcaCentreCourseMapping - 2'] ,

['KidzeeMasterFranchiseDetails' , 'KidzeeMasterFranchiseDetails - 2'] ,

['LitmusCandidateMaster' , 'LitmusCandidateMaster - 1'] ,

['InventoryCapitalAssets' , 'InventoryCapitalAssets - 1'] ,

['InventoryDispatchDetails' , 'InventoryDispatchDetails - 1'] ,

['KIDZCARECENTREDETAILS' , 'KIDZCARECENTREDETAILS - 1'] ,

['KidzeeAuditNILDetails' , 'KidzeeAuditNILDetails - 1'] ,

['ZcaIndentPaymentDetails' , 'ZcaIndentPaymentDetails - 1'] ,

['ZedUserDetails' , 'ZedUserDetails - 1'] ,

['ZicaStudentsExperienceDetails' , 'ZicaStudentsExperienceDetails - 0'] ,

['ZicaStudentsProfile' , 'ZicaStudentsProfile - 0'] ,

['ZicaStudentsQualification' , 'ZicaStudentsQualification - 0'] ,

['ZcaIndentProductDespatch' , 'ZcaIndentProductDespatch - 0'] ,

['ZcaMisAuditQualityDetails' , 'ZcaMisAuditQualityDetails - 0'] ,

['ZcaMisCertificateIssue' , 'ZcaMisCertificateIssue - 0'] ,

['ZcaIndentDespatchDetails' , 'ZcaIndentDespatchDetails - 0'] ,

['ZcaFacultyEnquiryArchive' , 'ZcaFacultyEnquiryArchive - 0'] ,

['ZcaCentreEnquiryArchive' , 'ZcaCentreEnquiryArchive - 0'] ,

['Table1' , 'Table1 - 0'] ,

['temp_newcode' , 'temp_newcode - 0'] ,

['ZcaArchiveMisBillingDetails' , 'ZcaArchiveMisBillingDetails - 0'] ,

['ZcaArchiveMisCollectionDetails' , 'ZcaArchiveMisCollectionDetails - 0'] ,

['ZcaAwardScheme' , 'ZcaAwardScheme - 0'] ,

['KidzeeAuditorDetails' , 'KidzeeAuditorDetails - 0'] ,

['KidzeeAuditorLockDetails' , 'KidzeeAuditorLockDetails - 0'] ,

['KidzeeCCPTEProfileDetails' , 'KidzeeCCPTEProfileDetails - 0'] ,

['KidzeeIndentHistory' , 'KidzeeIndentHistory - 0'] ,

['KidzeeDropoutDetails' , 'KidzeeDropoutDetails - 0'] ,

['KidzeeAccessDetails' , 'KidzeeAccessDetails - 0'] ,

['InventoryTransferDetails' , 'InventoryTransferDetails - 0'] ,

['InventoryVendorOrder' , 'InventoryVendorOrder - 0'] ,

['InventoryStockStatus' , 'InventoryStockStatus - 0'] ,

['InventoryStockTransferDetails' , 'InventoryStockTransferDetails - 0'] ,

['InventoryStockTransferHistory' , 'InventoryStockTransferHistory - 0'] ,

['InventoryTaxInvoiceDetails' , 'InventoryTaxInvoiceDetails - 0'] ,

['InventoryPurchaseOrderProducts' , 'InventoryPurchaseOrderProducts - 0'] ,

['InventoryPurchaseRejectDetails' , 'InventoryPurchaseRejectDetails - 0'] ,

['InventoryPurchaseDetails' , 'InventoryPurchaseDetails - 0'] ,

['InventoryForwardSubDetails' , 'InventoryForwardSubDetails - 0'] ,

['InventoryDeliveryDetails' , 'InventoryDeliveryDetails - 0'] ,

['InventoryDeliveryOrder' , 'InventoryDeliveryOrder - 0'] ,

['dtproperties' , 'dtproperties - 0'] ,

['CourseBasketPaymentDetails' , 'CourseBasketPaymentDetails - 0'] ,

['CaseStudy' , 'CaseStudy - 0'] ,

['LitmusCandidateDetails' , 'LitmusCandidateDetails - 0'] ,

['KidzeePropertyData' , 'KidzeePropertyData - 0'] ,

['QRTZ_JOB_DETAILS' , 'QRTZ_JOB_DETAILS - 0'] ,

['NaukriProfileDetails' , 'NaukriProfileDetails - 0'] ,

['MathafunFranchiseEnquiry' , 'MathafunFranchiseEnquiry - 0'] ,

['KidzeeIndentPaymentDetails' , 'KidzeeIndentPaymentDetails - 0'] ,

['KidzeeIndentValidateHistory' , 'KidzeeIndentValidateHistory - 0'] ,

['KidzeeParentsFeedback' , 'KidzeeParentsFeedback - 0'] ,

['KidzeeMerchandOrder' , 'KidzeeMerchandOrder - 0'] ,

['KidzeeMerchandOrderPayment' , 'KidzeeMerchandOrderPayment - 0'] ,

['KidzeeMerchandPayment' , 'KidzeeMerchandPayment - 0']

];

Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var columns = [[]];
function handleTableChange(field, newValue, oldValue) {
Ext.Ajax.request({
url: '../ajaxreporttemplate/getcolumns.jsp',
params: {
table: newValue
},
failure: function(response, options) {
Ext.MessageBox.alert('Warning','Error getting columns for ' + newValue + ' ... please retry.');
},
success: function(response, options) {
var column = Ext.data.Record.create([
{name: 'name'},
{name: 'type'}
]);

var myReader = new Ext.data.XmlReader({
record: "column"
}, column);

var records = myReader.read(response);

columns = new Array();
for(var i = 0; i < records.totalRecords; i++) {
var record = new Array();
//alert(records.records[i].get('name'));
record[record.length] = records.records[i].get('name');
record[record.length] = records.records[i].get('type');;
columns[columns.length] = record;
}

simple.items.get(1).fromData = columns;
simple.items.get(1).toMultiselect.view.refresh();
simple.items.get(1).fromMultiselect.view.refresh();
}
});
};



var bd = Ext.getBody();

/*
* ================ Simple form =======================
*/
bd.createChild({tag: 'h2', html: 'Profile Prototype'});


var simple = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
frame:true,
title: 'Profile Form',
bodyStyle:'padding:5px 5px 0',
width: 450,
defaults: {width: 230},
defaultType: 'textfield',

items: [new Ext.form.ComboBox({
fieldLabel: 'Table Name',
name:'table',
store: new Ext.data.SimpleStore({
fields: ['table', 'table-count'],
data : tables
}),
valueField:'table',
displayField:'table-count',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a table to profile...',
selectOnFocus:true,
width:190,
listeners: {change: handleTableChange}
}),new Ext.ux.ItemSelector({
fieldLabel: 'Columns Selector',
name: 'column',
dataFields: ['column', 'column-type'],
fromData: columns,
msWidth: 450,
msHeight: 200,
valueField: 'column',
displayField: 'column-type'
})
]
});

simple.render(document.body);

});

</script>

</body>
</html>


Please help me with the same.
The multi item selector code is used unzipping MultiselectItemSelector-3.0.zip and ext 2.0 is used for the ext libraries.

Thanks
Sachin

sjmittal
5 Feb 2008, 4:38 AM
Thanks I have posted my question again with the html code in the following thread.

http://extjs.com/forum/showthread.php?t=20071&page=5

Please let me know if anything else is needed from my side.

Thanks again for your help.

Sachin

dantheman
5 Feb 2008, 10:18 AM
Hi,
I am facing a problem loading a form panel consisting of a combo box and a multi item selector.
Initially combo box is filled with data and upon selection of an item the mult item selection box would be populated. <snip>Hope you don't mind a question
(this sounds an awful lot like some widgets I've built recently) ...

If I'm understanding your intention, I think it would be much easier to simply
manage a dataview than a full-blown multi-select. That is, unless the
items populated into the multi-select are then filtered by the user a second time ...

just a thought,
--dan

sjmittal
5 Feb 2008, 10:50 AM
yes this works.

Thanks
Sachin


Hope you don't mind a question
(this sounds an awful lot like some widgets I've built recently) ...

If I'm understanding your intention, I think it would be much easier to simply
manage a dataview than a full-blown multi-select. That is, unless the
items populated into the multi-select are then filtered by the user a second time ...

just a thought,
--dan

ljenkins
6 Feb 2008, 6:47 AM
Hi all,

It seems upgrade to latest version of Ext breaks the MultiSelect/itemselector display. Text in boxes are cropped or does not display in FF when within a FormPanel. Works fine in Safari and IE 6. Any ideas?

css is set below. MultiSelect worked fine in FormPanel in FF prior to Ext upgrade to version 2.0.1


.ux-mselect{
overflow:auto;
background:white;
position:relative; /* for calculating scroll offsets */
zoom:1;
overflow:auto;
}
.ux-mselect-item{
font:normal 12px tahoma, arial, helvetica, sans-serif;
padding:2px;
border:1px solid #fff;
white-space: nowrap;
cursor:pointer;
}
.ux-mselect-selected{
border:1px dotted #a3bae9 !important;
background:#DFE8F6;
cursor:pointer;
}

ljenkins
6 Feb 2008, 6:56 AM
Ok, I fixed my own problem. Looks like the width needs to be specified in FormPanel so that the MultiSelect/ItemSelector displays appropriately in FF, which is strange because I did not have to specify it before move to Ext 2.0.1.

crxtech
6 Feb 2008, 10:53 AM
Use the load event to fill the stores from a server, or setup the stores as json stores or something.

Submit/Load:
Currently this is done with a hidden input that stores a delimited string.
If you need it in a different format, cook the data prior to a submit.

I'm trying to do this, but all my form fields load with data, except the itemselector field. Am I doing something wrong?

Load the rec for the form:

Ext.getCmp("programArea").getForm().loadRecord(programAreaGrid.getSelectionModel().getSelected());

Grid code that the rec comes from:

columns: [
{id:'PRA_ID', hidden:true, dataIndex: 'PRA_ID'},
{id:'PRG_Area_ID', hidden:true, dataIndex: 'PRG_Area_ID'},
{id:'PRA_Type_ID', hidden:true, dataIndex: 'PRA_Type_ID'},
{id:'Prg_Area_Type', header: "Program Area", dataIndex: 'Prg_Area_Type', width:175},
{id:'Effort', header: "% Effort", dataIndex: 'Effort', width:50},
{id:'categories', header: "Category", dataIndex: 'categories', width:460}
],

itemselector:

{
xtype:"itemselector",
name:"PRA_Type_ID",
id:"PRA_Type_ID",
fieldLabel:"Categorys",
fromStore: programAreaFromDS,
toStore: programAreaToDS,
msWidth:180,
msHeight:100,
bodyStyle:'padding:0px',
drawUpIcon:false,
drawDownIcon:false,
drawTopIcon:false,
drawBotIcon:false,
valueField:"PRA_Type_ID",
displayField:"categories",
toLegend:"Selected",
fromLegend:"Available"
}

richgoldmd
6 Feb 2008, 6:17 PM
I have an ItemSelector in a form. The ItemSelector is nested within a fieldset. I find that if I set msHeight or msWidth to anything, the MultiSelect boxes grow or shrink to the size of the items rather than scrolling. They have the two different heights, depending on the contents, and they are centered vertically, giving a disconcerting appearance.

If I do not set msHeight or msWidth, I get the expected behavior, but the boxes are not sized to my liking. I can't find an explanation why setting either of these values causes this behavior, and omitting them changes the behavior.

Any ideas?

cadudecastroalves
8 Feb 2008, 10:55 AM
Hello.

I'm trying to populate a multiselect with the JSON data retrieved from the server according a selected combobox option. How can I do it?

Thanks in advance.

crxtech
8 Feb 2008, 11:10 AM
Hello.

I'm trying to populate a multiselect with the JSON data retrieved from the server according a selected combobox option. How can I do it?

Thanks in advance.

I just did the same thing, but with itemselector. Here is my code:

Drop Down:

new Ext.form.ComboBox({
store: programAreaddDS,
waitMsgTarget: true,
listeners:{
select:{fn:function(combo, value) {
var PRA_Type_ID = Ext.getCmp('PRA_Type_ID');
PRA_Type_ID.setValue('');
PRA_Type_ID.fromStore.filter('PRG_Area_ID', combo.getValue());
PRA_Type_ID.toStore.filter('PRG_Area_ID', combo.getValue());
}}
},
fieldLabel: 'Program Area',
id: 'program_Area',
title:'Program Areas',
labelStyle: 'font-weight:bold;',
name: 'Prg_Area_Type',
displayField:'Prg_Area_Type',
valueField: 'PRG_Area_ID',
hiddenName: 'PRG_Area_ID',
triggerAction: 'all',
forceSelection:true,
typeAhead:true,
mode: 'local', //uses ds already loaded
emptyText:'Select Program Areas...',
selectOnFocus:true,
allowBlank:false
})



itemselector code:

{
xtype:"itemselector",
name:"PRA_Type_ID",
id:"PRA_Type_ID",
fieldLabel:"Categorys",
fromStore: programAreaFromDS,
toStore: programAreaToDS,
msWidth:180,
msHeight:100,
bodyStyle:'padding:0px',
drawUpIcon:false,
drawDownIcon:false,
drawTopIcon:false,
drawBotIcon:false,
valueField:"PRA_Type_ID",
displayField:"categories",
toLegend:"Selected",
fromLegend:"Available"
}

DataStore code:

//readers
var reader2 = new Ext.data.JsonReader({
idProperty:'PRG_Area_ID',
root:'data',
fields: [
{name: 'PRG_Area_ID', type: 'int'},
{name: 'Prg_Area_Type', type: 'string'}
]
});
var reader3 = new Ext.data.JsonReader({
idProperty:'PRA_Type_ID',
root:'data',
fields: [
{name: 'PRA_Type_ID', type: 'int'},
{name: 'PRG_Area_ID', type: 'int'},
{name: 'categories', type: 'string'}
]
});

//datastores
var programAreaddDS = new Ext.data.Store({
url: 'JSON/programAreaddJson.cfm', method:'POST',
reader: reader2,
sortInfo:{field:'Prg_Area_Type', direction:'ASC'}
});
var programAreaFromDS = new Ext.data.Store({
url: 'JSON/programAreaFromJson.cfm', method:'POST',
reader: reader3,
sortInfo:{field:'categories', direction:'ASC'}
});
var programAreaToDS = new Ext.data.Store({
url: 'JSON/programAreaToJson.cfm', method:'POST',
reader: reader3,
sortInfo:{field:'categories', direction:'ASC'}
});

tjstuart
10 Feb 2008, 3:37 PM
Hello All,

Looks like I'll have some time to do a 3.1 release. I'm going to spend some time going through the enhancements and bug fixes that have been suggested to date. I expect to have a release available in the coming weeks (approx two weeks). I can't guarantee that all enhancements will make it in 3.1. Thanks for your patience.

Cheers

tfrugia
11 Feb 2008, 4:47 PM
I do not have an easy way of sending you an example of this problem, but I am hoping you may have seen this and know of a quick fix.



var itemSel = new Ext.ux.ItemSelector({
name: "itemselector_" + seminarID,
id: "itemselector_" + seminarID + "_id",
fromStore: dsAvailableContacts,
toStore: dsAttendingContacts,
valueField: "MINISTRYCONTACTID",
displayField: "FULLNAME",
msHeight: 250,
msWidth: 300,
toLegend: 'Available Contacts',
fromLegend: 'Selected Contacts'
});


This loads just fine, and I can drag and drop back and forth. What I am seeing is quite random (meaning I can drag and drop 10-15 times and then this occurs). When I click an item (seems to be in both boxes), I get this error:



Ext.fly(n) has no properties
http://localhost/js/ext/source/widgets/form/ddview.js
Line 176


Followed immediately by:



this.store.getAt(selectionsArray[i]) has no properties
http://localhost/js/ext/source/widgets/form/multiselect.js
Line 127


I can make this happen every time, just takes dragging and dropping quite a few times.

I am on MultiselectItemSelector-3.0-patch(2).zip

spaque99
15 Feb 2008, 11:37 AM
Hello all,

I have been struggling with a problem today with the component. When I was removing it from my application and re-adding it later on. After long investigations I found out that it was because there was still some elements registered in the Ext.dd.ScrollManager.

Also, investigating, I noticed that the Ext.ux.Multiselect and Ext.ux.ItemSelector objects were not destroying some internal objects. Here is what I added

To Ext.ux.Multiselect


onDestroy: function() {
if( this.view ) {
this.view.destroy();
}
Ext.ux.Multiselect.superclass.onDestroy.call(this);
}
To Ext.ux.ItemSelector


onDestroy: function() {
if( this.fromMultiselect ) {
this.fromMultiselect.destroy();
}
if( this.toMultiselect ) {
this.toMultiselect.destroy();
}
Ext.ux.ItemSelector.superclass.onDestroy.call(this);
},
and finally in Ext.ux.DDView, I modified destroy to unregister the elements from the Ext.dd.ScrollManager


destroy: function() {
this.purgeListeners();
this.getEl().removeAllListeners();
this.getEl().remove();
if (this.dragZone) {
Ext.dd.ScrollManager.unregister(this.dragZone.el);
if (this.dragZone.destroy) {
this.dragZone.destroy();
}
}
if (this.dropZone) {
Ext.dd.ScrollManager.unregister(this.dropZone.el);
if (this.dropZone.destroy) {
this.dropZone.destroy();
}
}
}
I am not sure if this code should be done inside the DragZone and DropZone objects in ext framework, but that sure solved the problem here.

Thought you'd like to know those changes.

Thanks
Seb

adrian__08
20 Feb 2008, 2:42 AM
Hi all,

I have a small issue with refreshing the data from a ItemSelector.

I made a form panel, and inside it's items there is a ItemSelector, a ComboBox,...
The idea is that when I select something from the ComboBox, I want the fromData field to be contain something else.



var fp = new Ext.form.FormPanel({
/////////
item:[{
{
xtype:'fieldset',
collapsible: true,
autoHeight:true,
items :[
{
xtype:"itemselector",
name:"namehere",
fromData: '[]',
///////
}] });

cb1.on('select',function(combo,record,index)
///Here I have an Ext.Ajax.request, and on success I would like the itemselector to have different values on the Available column.

vtswingkid
20 Feb 2008, 7:00 AM
Thank you Spaque99!

I added the onDestroy changes, and sure enough IE is happy!

Here is a zip with those updates...I call it 3.0.1.

Adrian__08: Assign a data store to the fromStore property. Then use the fromStore property to manipulate the datastore on combo events.

fxz101
20 Feb 2008, 8:04 PM
Thank you Spaque99!

I added the onDestroy changes, and sure enough IE is happy!

Here is a zip with those updates...I call it 3.0.1.

Adrian__08: Assign a data store to the fromStore property. Then use the fromStore property to manipulate the datastore on combo events.

Thanks for the update. I got error
"this.data has no properties ext-all.js Line 43"

here is my code:


var results = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'search.php'
}),
reader: new Ext.data.JsonReader({
root: 'result',
totalProperty: 'totalresults'
}, ["id","name" ])
});
results.load();


{
xtype:"itemselector",
name:"result",
fieldLabel:"Results",
dataFields:["id", "name"],
fromStore: results,
msWidth:200,
msHeight:100,
valueField:"id",
displayField:"name",
toLegend:"Selected",
fromLegend:"Available"
},

vtswingkid
21 Feb 2008, 4:49 AM
you need to specify either a toStore or toData also. It can be empty

tjstuart
21 Feb 2008, 7:44 PM
Attention All

The Ext development team have decided to incorporate the Multiselect portion of this extension into the Ext core for the 2.1 release.

I have handed over the code. Given this, no further development (by me) will take place (in the short term) on either Multiselect or ItemSelector.

Once the Ext team have incorporated the Multiselect portion I will be able to alter ItemSelector to use the core version of Multiselect.

Thanks for your patience and I hope you'll agree that this extension will become even better given the expertise of the Ext core dev team.

Cheers

Toby Stuart

ApocalypseCow
22 Feb 2008, 3:50 AM
great news, it really is a very useful and well developed component.

Ph03nixSA
26 Feb 2008, 7:29 AM
I use form.load() to retreive JSON data to populate form fields. Everything is working 100% except for the Multiselect/ItemSelector

I need to beable to multiselect options from left panel into right panel by passing id values

how can I do this?

How you understand ;)

tjstuart
26 Feb 2008, 2:38 PM
I use form.load() to retreive JSON data to populate form fields. Everything is working 100% except for the Multiselect/ItemSelector

I need to beable to multiselect options from left panel into right panel by passing id values

how can I do this?

How you understand ;)

Hi Ph03nixSA,

jsakalos posted a solution to this a while ago. He added a 'setValue' method to ItemSelector. This should work for you. See his post http://extjs.com/forum/showthread.php?p=108003#post108003

Cheers

Ph03nixSA
26 Feb 2008, 9:49 PM
thanks very much .. will have a look at this :D

Ph03nixSA
27 Feb 2008, 1:23 AM
Hi
Okay this does not work either .. from what I see it looks for the index from the value Array
instead of looking for the value from the value Array and then referencing the index id ...

I have two values coming through 1,4 but this function does not find 4 only 1 which makes me assume that its only getting the index and not the index reference of the value 1 or 4.

hope that makes sence

Ph03nixSA
27 Feb 2008, 1:51 AM
UPDATE:

Out of pure frustration I quickly wrote this modification to the class


,
getIdByValue: function(store,value){
for(i in store.data.items)
{
for(j in store.data.items[i].data)
{
if(store.data.items[i].data[j] == value) return store.getAt(i);
}
}
return false;
},
setValue: function(val) {
if(!val) {
return;
}
if(typeof(val) =='string')
{
val = val.split(',');
}

var rec, i, id;
for(i = 0; i < val.length; i++) {
id = val[i];
if(this.getIdByValue(this.toStore,id)) {
continue;
}
rec = this.getIdByValue(this.fromStore,id);



if(rec) {
this.toStore.add(rec);
this.fromStore.remove(rec);
}
}
}

if there is an easier way to simplify this code (as I am still new with Ext JS) please let me know :)

jsakalos
27 Feb 2008, 4:19 AM
I've already posted setValue function a couple of pages back in this thread.

Ph03nixSA
27 Feb 2008, 5:23 AM
LOL , yeah I know .. and it did not work. The above example works beautifully for getting the index of a particular value. Its exactly what I need as the data saved in the database is not the index of the option(left panel) but the value of the option(left panel)

jsakalos
27 Feb 2008, 6:34 AM
OK, mine works for me, yours for you...;)

organizedChaos
27 Feb 2008, 4:36 PM
hello jsakalos,

I saw the bug in the Multiselect.js that you discovered a few pages back. Is it possible to get a copy of that multiselect.js that fixed the bug. It says that the file was attached but I do not see it along with the post.

Thanks,
-OC

jsakalos
27 Feb 2008, 5:13 PM
tjstuart most likely removed that file. Please ask him to re-post.

tjstuart
27 Feb 2008, 6:51 PM
hello jsakalos,

I saw the bug in the Multiselect.js that you discovered a few pages back. Is it possible to get a copy of that multiselect.js that fixed the bug. It says that the file was attached but I do not see it along with the post.

Thanks,
-OC

Strange as I did not remove anything. Anyways I have attached again. This patch fixes the cannot drag from selected to available bug.

organizedChaos
28 Feb 2008, 7:31 AM
Thanks I will give it a shot!
:D
-OC

ketanAtExt
28 Feb 2008, 8:45 AM
Do we have any code that only displays the item list and arrows? What I want is only the arrows and right part of the arrows. I will populate the right part with my own array and then move the items up and down. I do not want the left part. I tried to remove the left part but I think it is too tightly coupled with the right part.

Any ideas?

vtswingkid
28 Feb 2008, 12:47 PM
ketanAtExt: I would recommend wrapping the multiselect box and adding functional arrows. Itemselector is a good teacher, and no there is currently no code that does that. Keep in mind this is being rolled into Ext and may be altered a bit.

tjstuart
28 Feb 2008, 2:48 PM
As vtswingkid said, you should be able to do that fairly easily with a Multiselect and a couple of arrow icons. Have a look at the 'up' and 'down' methods of the ItemSelector.

tjstuart
28 Feb 2008, 3:05 PM
@ketanAtExt - I had a spare moment. Find example below. I was lazy so you will need to replace the buttons with icons and position them where you want.



<html>
<head>

<title>Multiselect with up/down navigation</title>

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

<script type='text/javascript' src='../../../ext-2.0/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='../../../ext-2.0/ext-all.js'></script>

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


<script type="text/javascript">

var formMultiselect;

function up() {
var multiSelect = formMultiselect.getForm().findField("multiselect");
var record = null;
var selectionsArray = multiSelect.view.getSelectedIndexes();
selectionsArray.sort();
var newSelectionsArray = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = multiSelect.view.store.getAt(selectionsArray[i]);
if ((selectionsArray[i] - 1) >= 0) {
multiSelect.view.store.remove(record);
multiSelect.view.store.insert(selectionsArray[i] - 1, record);
newSelectionsArray.push(selectionsArray[i] - 1);
}
}
multiSelect.view.refresh();
multiSelect.view.select(newSelectionsArray);
}
}

function down() {
var multiSelect = formMultiselect.getForm().findField("multiselect");
var record = null;
var selectionsArray = multiSelect.view.getSelectedIndexes();
selectionsArray.sort();
selectionsArray.reverse();
var newSelectionsArray = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = multiSelect.view.store.getAt(selectionsArray[i]);
if ((selectionsArray[i] + 1) < multiSelect.view.store.getCount()) {
multiSelect.view.store.remove(record);
multiSelect.view.store.insert(selectionsArray[i] + 1, record);
newSelectionsArray.push(selectionsArray[i] + 1);
}
}
multiSelect.view.refresh();
multiSelect.view.select(newSelectionsArray);
}
}

Ext.onReady(function(){

formMultiselect = new Ext.form.FormPanel({
labelWidth: 75,
labelAlign: "right",
width:700,
items:[{
xtype:"multiselect",
fieldLabel:"Multiselect",
name:"multiselect",
dataFields:["code", "desc"],
data:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
valueField:"code",
displayField:"desc",
width:250,
height:200,
allowBlank:true,
legend:"Multiselect",
tbar:[{text:"clear",handler:function(){formMultiselect.getForm().findField("multiselect").reset();}}]
}],
buttons:[{
text:"Up",
handler: up
},{
text:"Down",
handler: down
}]
});
formMultiselect.render("form-ct-multiselect");
});
</script>

</head>

<body style="margin:20px;">

<div style="width:800px;">
<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-multiselect"></div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>

<br><p>


</body>

</html>

ketanAtExt
29 Feb 2008, 8:10 AM
Thanks for your suggestions:

I did removed the left part i.e from part and just maintained the arrows and right part. I have attached the doc. This is what I wanted.

Now my requirement and tough part begins. I want a combobox next to each item.

for e.g combobox next to Doc Id, combobox next to Doc Class and so on. So that I can move the text plus combobox up and down. I think this is tough part to do. Any ideas??

Ph03nixSA
4 Mar 2008, 1:49 AM
noticed the item selector did not have a validateValue function

EDIT: I originally put the validation method on here but realised its more to it that that, when will a fully working version of this module be released or at least Ext JS 3.1 as they mentioned it will be in that release?

for now I have fully customized and rewriting this module to work properly but I would rather have ext JS support it :P


also has the bug for the moving items from right panel to left been fixed yet?
as i did read of a "patch" but there was no link.

Ph03nixSA
4 Mar 2008, 1:50 AM
one more thing. I noticed in my form, I have clipping at the bottom for the item selector,
any work around for this?

doppelganger
5 Mar 2008, 9:59 AM
Hello,

First of all, thanks a lot for a great extension. Unfortunately, I stuck with passing parameters problem when trying to change <select multiple> instances in our application with it.

I noticed that by default ItemSelector create <input type="hidden" name="fieldName"> element and place there all selected values, separated with delimiter (comma by default). So after submitting the form server get query like this: ?fieldName=var1,var2,var3.

Yet the <select multiple> HTML tag has different behavior and after submitting the form server get query like this:
?fieldName=var1&fieldName=var2&fieldName=var3. In this case, server can automatically transform fieldName to array (we working with TomCat).

So the question is -- is there any way to mimic standard behavior in ItemSelector extension?

tjstuart
5 Mar 2008, 4:42 PM
also has the bug for the moving items from right panel to left been fixed yet?
as i did read of a "patch" but there was no link.

The patch mysteriously disappeared. I re-added it on the previous page of this thread.

tjstuart
5 Mar 2008, 4:43 PM
Attention All

The Ext development team have decided to incorporate the Multiselect portion of this extension into the Ext core for the 2.1 release.

I have handed over the code. Given this, no further development (by me) will take place (in the short term) on either Multiselect or ItemSelector.

Once the Ext team have incorporated the Multiselect portion I will be able to alter ItemSelector to use the core version of Multiselect.

Thanks for your patience and I hope you'll agree that this extension will become even better given the expertise of the Ext core dev team.

Cheers

Toby Stuart

Shmoo
10 Mar 2008, 6:21 PM
Congratulations in getting to the core! =D>

sjivan
12 Mar 2008, 10:05 AM
fyi for those still using this with Ext 2.0.2 and without a legend specification for ItemSelector, the following change need to be made



if(!this.legend) { fs.el.down('.'+fs.headerCls).remove();}


to



if(!this.legend) { var e = fs.el.down('.'+fs.headerCls); if(e) {e.remove();}}


since Ext 2.0.2 no longer rendrers the header if there is not title, header or checkboxToggle

Sanjiv

vibez
13 Mar 2008, 1:33 AM
fyi for those still using this with Ext 2.0.2 and without a legend specification for ItemSelector, the following change need to be made



if(!this.legend) { fs.el.down('.'+fs.headerCls).remove();}


to



if(!this.legend) { var e = fs.el.down('.'+fs.headerCls); if(e) {e.remove();}}


since Ext 2.0.2 no longer rendrers the header if there is not title, header or checkboxToggle

Sanjiv

Great stuff!

Although i'm still getting this error using 2.0.2 when using a multiselect


Ext.ux.DDView is not a constructor

snow
13 Mar 2008, 5:04 AM
Hi,

I'm struggling to find a way to submit an ItemSelector form.

Taking the example code @ http://aariadne.com/bugs/itemselect.html

How would I turn this into a POST, with HTML output onto a new page.

I've tried modifying




Ext.getCmp('form').getForm().submit();
to this
Ext.getCmp('form').getForm().submit({url:'/prod/ace2.pl?mode=farm_list&act=man&stage=3&'});



Fibebug is saying I have a sytax error when it receives the HTML header - ext-all.js line 24

Thanks

Capi666
18 Mar 2008, 7:16 AM
How can load the data? More or less this



xtype:"multiselect",
name:"fechas",
fieldLabel:m3_fechas,
dataFields:["code", "desc"],
valueField:"code",
displayField:"desc",
width: 200,
listeners: {
change: function(sm, row, rec) {
alert(row);
}

...
...

var aa = [["1", "One"], ["2", "Two"], ["3", "Three"]];

top2.getForm().findField('fechas').data(aa);


Thanks,

Capi666
18 Mar 2008, 8:34 AM
Solved

vibez
18 Mar 2008, 1:49 PM
Can anyone help me in figuring out how to add a loadMask multiselect field?

I use a json store for the data, so need to show a loading indicator when fetching the records

george.antoniadis
24 Mar 2008, 3:45 AM
Solved

May I ask how you solved this?
I'm trying to re-load the store from another URL, the store gets refreshed but the interface doesn't reflect the changes.
I tried view.refresh with no luck.

Maybe you could post your way so I can get an idea? :) tnxx

tjstuart
24 Mar 2008, 4:07 PM
Can anyone help me in figuring out how to add a loadMask multiselect field?

I use a json store for the data, so need to show a loading indicator when fetching the records

You should be able to use the LoadMask class which I believe works with widgets that have an underlying store. I'd have a look myself but am really busy at the moment.

loeppky
24 Mar 2008, 4:53 PM
Can anyone help me in figuring out how to add a loadMask multiselect field?


I do this with the ItemSelector class. I have extended it and called the class Lauch.form.ItemSelector that has specifics for my applications needs. Anyways, the key is to add the masks after rendering.


/**
* @see superclass.onRender
* Adds load masks to the stores.
*/
onRender: function(ct, position) {
Launch.form.ItemSelector.superclass.onRender.call(this, ct, position);
new Ext.LoadMask(this.fromMultiselect.el, {
store : this.fromStore
});
new Ext.LoadMask(this.toMultiselect.el, {
store : this.toStore
});
}

Capi666
25 Mar 2008, 12:57 AM
May I ask how you solved this?
I'm trying to re-load the store from another URL, the store gets refreshed but the interface doesn't reflect the changes.
I tried view.refresh with no luck.

Maybe you could post your way so I can get an idea? :) tnxx

Sorry, i hadn

vibez
25 Mar 2008, 1:11 AM
Cheers guys :)

Capi666
25 Mar 2008, 8:21 AM
Hi, i want solve two problems...

1- I only want select one row, how can i do?
2- When load the screen, how can select the first row?

Thanks,

tjstuart
25 Mar 2008, 2:57 PM
1- I only want select one row, how can i do?

I assume you mean you would like to limit the user selection to one item. Is that correct? If so, use the minLength and maxLength config options of Multiselect.


2- When load the screen, how can select the first row?

Use the setValue(...) method (you will need to pass the value of the first item).

Fede
26 Mar 2008, 4:03 AM
If posible to disable ItemSelector with any function or method?

And have validation (for example if one item must be selected).

Thx,
Fede

vtswingkid
26 Mar 2008, 5:26 PM
itemselector.disable(); should do it.

I have done manual validation by checking the selections in the store...
itemselector.toStore gives you access to the store.

Capi666
27 Mar 2008, 1:24 AM
Use the setValue(...) method (you will need to pass the value of the first item).

I don

Capi666
27 Mar 2008, 3:05 AM
I assume you mean you would like to limit the user selection to one item. Is that correct? If so, use the minLength and maxLength config options of Multiselect.


I write:



Ext.ux.Multiselect = Ext.extend(Ext.form.Field, {
...
...
minLength:1,
maxLength:1,
...
...
...



But don

tjstuart
27 Mar 2008, 9:20 PM
[QUOTE=Capi666;143752]
I write this but don

tjstuart
27 Mar 2008, 9:25 PM
[QUOTE=Capi666;143804]I write:



Ext.ux.Multiselect = Ext.extend(Ext.form.Field, {
...
...
minLength:1,
maxLength:1,
...
...
...



But don

Capi666
28 Mar 2008, 2:59 AM
But... with combobox can i do the apparence as same the multiselect with variuos rows? How? I only know xtype: 'combo'.

Thanks,

dtnguyen02
29 Mar 2008, 2:03 PM
How do I get the patch release of Multiselect.js that fixes the problem that tjstuart posted about..
"I cannot drag items back once they are in toMultiselect.
Complete showcase: http://aariadne.com/bugs/itemselect.html .... Seems to be sth with ddGroups as left DDView is not receiving drop event at all..." ??

tjstuart
29 Mar 2008, 3:07 PM
How do I get the patch release of Multiselect.js that fixes the problem that tjstuart posted about..
"I cannot drag items back once they are in toMultiselect.
Complete showcase: http://aariadne.com/bugs/itemselect.html .... Seems to be sth with ddGroups as left DDView is not receiving drop event at all..." ??

The patch is on page 8 of this thread.

dtnguyen02
29 Mar 2008, 3:26 PM
thank you very much =)

extnewuser3
31 Mar 2008, 1:54 PM
Hi All,

I need to set the selected values in multiple select while loading the form containing multiple select any ideas?
here is my code posted.
http://extjs.com/forum/showthread.php?p=145645#post145645

Thanks,
-Naveen

TobiasS
31 Mar 2008, 10:44 PM
Hello everyone,

is there any way to display several columns in the Multiselector, as in a grid?

Thanks a lot!

tjstuart
2 Apr 2008, 4:30 PM
Hello everyone,

is there any way to display several columns in the Multiselector, as in a grid?

Thanks a lot!

Unfortunately no.

Fede
3 Apr 2008, 2:37 AM
I have a problem in Firefox for see the 2 boxes of the ItemSelector.
I only can see, avaliables items. I try to resize but I only see avaliables items.

In IE I can see complete.

I think I can be related with CSS, but I don't modified anything of the ext-all.css.
I'm working with Slate Theme.

Do you know where is the problem?

Thx,
Fede

Fede
3 Apr 2008, 7:40 AM
I forget to post my code:

The specific code for the Item Selector is:


var ds_elements_empty = new Ext.data.SimpleStore({
fields: [
{name: 'id_con'},
{name: 'name'},
]
});

// DataStore for itemSelector
var ds_elements_disp = new Ext.data.Store({
autoLoad: true,
url: 'admin/generic/list?mierda=on&element=destination_elements',
reader: new Ext.data.JsonReader({
id: 'id_con',
root: 'results',
totalProperty: 'total'
}, [
{name: 'id_con'},
{name: 'name'},
])
});

// ItemSelector
var is_destinations = new Ext.ux.ItemSelector({
name : 'members',
fieldLabel : 'Elementos',
msWidth : 200,
msHeight : 200,
fromStore : ds_elements_disp,
toStore : ds_elements_empty,
valueField : 'id_con',
displayField : 'name',
toLegend : selected,



And the code for all the windows + tabPanel + form is:
[code]
CreateDestinations = function(dataStore) {

var ds_elements_empty = new Ext.data.SimpleStore({
fields: [
{name: 'id_con'},
{name: 'name'},
]
});

// DataStore for itemSelector
var ds_elements_disp = new Ext.data.Store({
autoLoad: true,
url: 'admin/generic/list?mierda=on&element=destination_elements',
reader: new Ext.data.JsonReader({
id: 'id_con',
root: 'results',
totalProperty: 'total'
}, [
{name: 'id_con'},
{name: 'name'},
])
});

// ItemSelector
var is_destinations = new Ext.ux.ItemSelector({
name : 'members',
fieldLabel : 'Elementos',
msWidth : 200,
msHeight : 200,
fromStore : ds_elements_disp,
toStore : ds_elements_empty,
valueField : 'id_con',
displayField : 'name',
toLegend : selected,
fromLegend : avaliables
});

// Form Panel CODE
var tabs = new Ext.form.FormPanel({
url:'admin/destinations/add',
autoScroll: 'true',
items: [{
xtype:'tabpanel',
activeTab: 0,
layoutOnTabChange:true,
deferredRender:false,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
items:[
{
title:'General',
layout:'form',
defaultType: 'textfield',
items: [
{
xtype:'fieldset',
title: 'General',
collapsible: true,
collapsed: false,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[
{
fieldLabel: 'Nombre',
name: 'name',
allowBlank: false,
itemCls: 'required',
msgTarget: 'side',
vtype: 'alphanumeric'
},
{
fieldLabel: 'Descripci

tjstuart
21 Apr 2008, 4:04 PM
As alot of people are asking for the patch that fixes the "cannot drag back from selected to available" I've updated the first page of this thread with a link to the patch.

Cheers

wm003
21 Apr 2008, 9:53 PM
22 February 2008 - Attention All

The Ext development team have decided to incorporate the Multiselect portion of this extension into the Ext core for the 2.1 release.



mmh...now as 2.1 is out...i cannot find the multiselect widget in the ExtJS 2.1 distribution anywhere.:-/

brian.moeskau
21 Apr 2008, 10:14 PM
Sorry about that. Yes, it was planned for 2.1 but due to many factors, we didn't quite get it in. However, it will definitely be in the next release. We apologize for the delay. :(

tjstuart
23 Apr 2008, 4:04 PM
Sorry about that. Yes, it was planned for 2.1 but due to many factors, we didn't quite get it in. However, it will definitely be in the next release. We apologize for the delay. :(

No problems Brian. The widget is almost 100% bugfree (both Multiselect and ItemSelector). Just make sure you include the patch from page 1 of this thread.

Look forward to Jack's ListView in 3.0 ... a much needed widget.

Cheers

Toby

Thomas H.
24 Apr 2008, 12:32 AM
Hello Toby,

yes I also need a ListBox. But I can

brian.moeskau
24 Apr 2008, 3:50 AM
FYI, the plans are to get it into the next version, i.e., either 2.1.1 or 2.2 (not sure yet which it will be). But yes, if you need it today, you should use the existing ux. ;)

AndrewK
28 Apr 2008, 12:53 AM
Is there anyway to add onChange event handler?
I tried:
formMultiselect.on('change',qwe);

AndrewK
28 Apr 2008, 6:03 AM
Also I have problem with multiselect's height ?
is it possible, that multiselect take all available space by height (red arrow)
and is it possible to see gray arrow always?

haisrinu143
28 Apr 2008, 12:42 PM
I would like to know the probable date on which this (Multiselect ComboBox) will be part of Ext JS library. If it is in the near future, that will save us some development time. Please let me know.

tjstuart
28 Apr 2008, 4:06 PM
All,

Please re-read page one (http://extjs.com/forum/showthread.php?t=20071) of this thread. I have updated it with some important notes and tried to highlight the important items.

I will try to respond to all of your questions but as you may appreciate I have a real job and may not find the time.

I'm happy to take a quick look at suspected bugs but only if they are fully accessible online. I dont have time to download and re-create/produce.

Thanks for you patience.

Cheers

Toby

mleework
8 May 2008, 1:19 PM
How can I get the index or value of the current selected item in Multiselect when the user click the item. When I look at the source code, I saw onViewClick, one of the parameter is index. I would assume that index is the index of the current selected item. The following are my code




aMultiselect = new Ext.ux.Multiselect({
width:160,
height:300,
data: Ext.ogmData.edit,
dataFields:["code", "desc"],
displayField:"desc",
valueField:"code",
hideLabel: true,
imagePath:"extjs/MultiselectItemSelector-3.0/",
legend:"Selected"
})
aMultiselect.on('click', function (vw, index, node, e) {
alert(index);
});


Am I doing it right? The index return array of object rather than number. I just want current selected item not list of items has been selected. Please help.

Paul Middelkoop
13 May 2008, 1:52 AM
When is use an ItemSelector with 2.0.2 or 2.1 it doesn't work if I don't provide legends. This worked fine in the 2.0.

I get an "fs.el.down("." + fs.headerCls) has no properties" error.

When I remove the following lines it works fine:

if(!this.legend) {
fs.el.down('.'+fs.headerCls).remove();
}

Is it save to remove these lines?

wiredmonkey
16 May 2008, 8:17 AM
Hi

I m using ext 2.1 and downloaded multiselect 3.0. There was an issue when dragging and dropping from selected to available I ve read this thread and found the fix available. However after a few times of dragging back and forth (selected/available), I get the following error:

Ext.fly(n) has no properties
http://localhost/js/ext/source/widgets/form/ddview.js
Line 176

Followed immediately by:

this.store.getAt(selectionsArray[i]) has no properties
http://localhost/js/ext/source/widgets/form/multiselect.js
Line 127

Its easy enough to replicate, looking into the ddview.js line number 172, i noticed that var i this.getSelectedIndexes()[0]; is returning an undefined value?

Can anyone shed any light on this?

p.s i m aware multiselect is being included in the next release, but I m desperate to get this code working for a project.

Cheers

Shaun

percious
16 May 2008, 11:22 AM
One of the problems I ran into with this widget was that I was not running my script at the root of the document tree.

Now, I realize that you added imagePath to the class to handle this, but in the past I have seen a more graceful way of solving this problem. Namely, using a css class to initialize the images. This is how the file manager works.

Here are a couple of patches to make this work. If a user wanted to override the button images, they could just modify the necessary image links in their own css. I think this is an elegant solution.

Here are the patches:
http://twtools.googlecode.com/files/mutiselect.js-percious.diff
http://twtools.googlecode.com/files/mutiselect.css-percious.diff

enjoy!
-chris

percious
16 May 2008, 11:24 AM
Hi

I m using ext 2.1 and downloaded multiselect 3.0. There was an issue when dragging and dropping from selected to available I ve read this thread and found the fix available. However after a few times of dragging back and forth (selected/available), I get the following error:

Ext.fly(n) has no properties
http://localhost/js/ext/source/widgets/form/ddview.js
Line 176

Followed immediately by:

this.store.getAt(selectionsArray[i]) has no properties
http://localhost/js/ext/source/widgets/form/multiselect.js
Line 127

Its easy enough to replicate, looking into the ddview.js line number 172, i noticed that var i this.getSelectedIndexes()[0]; is returning an undefined value?

Can anyone shed any light on this?

p.s i m aware multiselect is being included in the next release, but I m desperate to get this code working for a project.

Cheers

Shaun

Hmm, I was seeing this problem too. Are you loading with json? Here is the fix I came up with:


mbms_cm.GroupSelector = Ext.extend(Ext.ux.ItemSelector, {
fieldLabel: "selectRole",
valueField: "name",
dataFields: ["group_id", "name"],
displayField: "name",
valueField:"group_id",
xtype:"itemselector",
name:"itemselector",
fieldLabel:"ItemSelector",
fromStore: new mbms_cm.GroupFromStore({}),
toStore: new mbms_cm.GroupToStore({}),
//toData:[["10", "Ten"]],
msWidth:250,
msHeight:200,
//imagePath:"ext-ux/multiselect",
//switchToFrom:true,
toLegend:"Has Access",
fromLegend:"No Access",

//this is a patch so group selector works well with json
valueChanged: function(store) {
var record = null;
var values = [];
for (var i=0; i<store.getCount(); i++) {
record = store.getAt(i);
values.push(record.json[this.valueField]);
}
//values = store.data
this.hiddenField.dom.value = values.join(this.delimiter);
this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
},
});

cirvine
24 May 2008, 10:16 AM
I have an Itemselector on a form, and I want to catch the Drop event when someone moves an item from the "From" side to the "To" side to do some additional processing.

But after much messing around with listeners and component.on("drop") code, I don't seem to be able to catch any "drop" event....I must be missing something obvious but I can't see it. If anyone out there is catching drop events on ItemSelectors, please help!

tjstuart
25 May 2008, 3:31 PM
I have an Itemselector on a form, and I want to catch the Drop event when someone moves an item from the "From" side to the "To" side to do some additional processing.

But after much messing around with listeners and component.on("drop") code, I don't seem to be able to catch any "drop" event....I must be missing something obvious but I can't see it. If anyone out there is catching drop events on ItemSelectors, please help!

Any reason why you can't use the 'change' event of ItemSelector or the 'datachanged' event of the toStore?

cirvine
26 May 2008, 7:14 AM
Well, 'change' fires when the component is first loaded as well, annoyingly. How can you tell a "component being created" Change event from a "something just got dropped" Change event?

Infoglobal
27 May 2008, 8:22 AM
When there are many items selected is complicated to know the position of the item.

I'm wondering if it is posible to add in the window selected items, the order of the element in the list to the name that appear in the window in parentesis for example

Tx

tjstuart
27 May 2008, 8:03 PM
Well, 'change' fires when the component is first loaded as well, annoyingly. How can you tell a "component being created" Change event from a "something just got dropped" Change event?

This works for me ...



...
itemSelector.render(...);
itemSelector.toMultiselect.on('drop', function() {alert('drop fired');});


I'm guessing you didn't know that it's actually the to/selected Multiselect widget that fires the 'drop'.

sinma
27 May 2008, 10:40 PM
Very useful extension. Thanks for share it!

sgr2
29 May 2008, 1:17 AM
Hi,
I wrote a little function for the ItemSelector.

I add a fromBar that call the function copyFromTo():


coypFromTo:function(){
this.reset();
this.toMultiselect.store.removeAll();
range = this.fromMultiselect.store.getRange();
this.fromMultiselect.store.sort(this.displayField,'ASC');
this.toMultiselect.store.add(range);
this.toMultiselect.store.sort(this.displayField,'ASC');
this.fromMultiselect.store.removeAll();
this.valueChanged(this.fromMultiselect.store);
}


it's like the button "All | >>" ;)

A little tips for center the ItemSelector in a FieldSet:

Ext.get('itemselector').center(Ext.get('itemcmp'));
where itemselector is my ItemSelector Item and itemcmp is my FieldSet container

shade
30 May 2008, 11:51 AM
For anyone having problems with list scrolling under Ext 2.1, replace line 55 with this:

fs.el.child("div.x-fieldset-body").removeClass("x-fieldset-body");

cirvine
2 Jun 2008, 7:09 AM
Thanks tjstuart.

I now have yet another stupid question...

GridPanel has the reconfigure() function which allows you to throw in a new store which has been generated elsewhere. Is there any kind of equivalent for Multiselect?

Edit: Simpler than I thought. If you ever have a new store being reloaded in response to user actions elsewhere in a complex layout, just add these two convenience functions to Multiselect (this is for an itemselect):


switchFromStore: function(newstore){
range = newstore.getRange();
this.fromMultiselect.store.removeAll();
this.fromMultiselect.store.add(range);
//this.valueChanged(this.fromMultiselect.store);
},

switchToStore: function(newstore){
range = newstore.getRange();
this.toMultiselect.store.removeAll();
this.toMultiselect.store.add(range);
//this.valueChanged(this.toMultiselect.store);
}


You may or may not want the valueChange event to be fired depending on the circumstances...

nebbian
8 Jun 2008, 6:40 PM
If you're trying to get this field to automatically fill itself in with the correct values (like any other form item will when editing a record) then you need the following code. This is slightly different to the one that jskalos posted on page 3 because it copes with empty setValues properly, it also copes with gridPanel values that use mapping.

Simply add this code to the Ext.ux.Multiselect.js file:



setValue: function(val) {

this.reset();

if((val != null) && val.match('[a-zA-Z]'))
{

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

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



if(!val) {
return;
}
val = val instanceof Array ? val : val.split(this.delimiter);
var rec, i, id;
for(i = 0; i < val.length; i++) {
id = val[i];
if(this.toStore.getById(id)) {
continue;
}
rec = this.fromStore.getById(id);
if(rec) {
this.toStore.add(rec);
this.fromStore.remove(rec);
}
}
},

anjelika
16 Jun 2008, 5:01 AM
Hello,
Is there a way to pre-select a default value of MultiSelect?
Thanks

tjstuart
16 Jun 2008, 4:16 PM
Hello,
Is there a way to pre-select a default value of MultiSelect?
Thanks

Use the setValue() method.

anjelika
16 Jun 2008, 11:33 PM
That worked, thank you!

brian.moeskau
19 Jun 2008, 8:56 PM
Just an update to let everyone know that I've added these controls into SVN under the 2.x examples folder (thanks very much to TJ). For now, both controls should still be treated as examples because we are planning on updating the APIs for both in a future release. There are some things we have planned that should make them even better, after which the MultiSelect will become a core form component.

For this release, I did not want to make breaking changes that would affect current users, but I did want to make the controls available as part of the release so more people will see them and try them out. So you can continue using the controls with your current code, but just expect that the APIs will be changing soon (for the better!).

tamao
25 Jun 2008, 6:36 PM
Hi all,
I am new with MultiSelector extension,

When my list is long, I can't scroll to last record to select(no scrollbar).

Can you tell me what is wrong?. thank you very much.

andrew
26 Jun 2008, 5:04 AM
Hello everybody.
I'm using Multiselect 3.0 with patch applied, but i'm getting error, dragging items several times from available to selected and back.
Here is stack trace:


Ext.fly(n) has no properties
getDragData(Object browserEvent=Event mouseout button=0 type=mouseout) ddview.js (line 176)
apply() ext-base.js (line 9)
handleMouseDown(Object browserEvent=Event mouseout button=0 type=mouseout) ext-all.js (line 9942)
h(Object browserEvent=Event mouseout button=0 type=mouseout) ext-all.js (line 1629)
getViewWidth(mousedown clientX=0, clientY=0) ext-base.js (line 10)
[Break on this error] dragData.repairXY = Ext.fly(n).getXY();

Can anyone help me on this?

scastros
15 Jul 2008, 8:06 AM
Hi everybody,

I have read almost every post in threads related to MultiSelect/ItemSelector, but I didn't find how to show a tooltip for every item in an ItemSelector. Is this posible? Any hints/ideas?

Thanks in advance!

ApocalypseCow
16 Jul 2008, 5:04 AM
Hi everybody,

I have read almost every post in threads related to MultiSelect/ItemSelector, but I didn't find how to show a tooltip for every item in an ItemSelector. Is this posible? Any hints/ideas?

Thanks in advance!

You can modify the template used in the onRender to include a qtip like this:

ext:qtip="{' + this.displayField + '}"
which would produce a tooltip for each entry.

scastros
16 Jul 2008, 6:05 AM
Thanks, ApocalypseCow, worked like a charm!

fuleonardo
20 Jul 2008, 1:55 AM
the method formItemSelector.getForm().getValues(true) is to get all values

and how can i get my selected item in the right panel?

thanks

tjstuart
22 Jul 2008, 7:33 PM
the method formItemSelector.getForm().getValues(true) is to get all values

and how can i get my selected item in the right panel?

thanks

Use the ItemSelector getValue() method.

cdrascic
23 Jul 2008, 2:33 PM
Hello this is my first post.

I am working in ext 2.1 and using the itemselector, I would like to update the toStore from a combobox. What I found is everything works the way it should when I step through it in firebug and pause on this.toMultiselect.store.add(range); which is in the function below.

If I run it without setting a breakpoint, the control loads and displays data fine. When I select a value from the combobox to update the itemselector is returns the correct data for the new store but it will not show the value in the selectbox. Has anyone run into this? What is the correct way refresh one of the select boxes with data from a new store?


switchToStore: function(newstore){
this.toMultiselect.store.removeAll();
range = newstore.getRange();
this.toMultiselect.store.add(range);
},

I added it to Multiselect.js.

My code for the control is:


Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var item1 = new Ext.Panel({
id: 'item1',
title: 'Agents IDs',
html: '<div class="text-content">Agent skill still allows you to assign agentid\'s to agent groups. To begin select a agent group from the dropdown below.<div id="item1"><input type="text" id="local-skills" size="20"/></div></div>',
cls:'empty'
});

var item2 = new Ext.Panel({
title: 'Avaya Dial Prefix',
html: '&lt;empty panel&gt;',
cls:'empty'
});

var item3 = new Ext.Panel({
title: 'SS7 Triggers',
html: '&lt;empty panel&gt;',
cls:'empty'
});

var ds_cbogroupdef = new Ext.data.Store({
autoLoad: true,
url: '/agent_skill_list/getGroupDefs.asp',
reader: new Ext.data.JsonReader({
id: 'agentgroupdefid',
root: 'cbogroupdef'
}, [
{name: 'agentgroupdefid'},
{name: 'agentgroupdef'},
])
});

var ds_available = new Ext.data.Store({
autoLoad: true,
url: '/agent_skill_list/getAgentIDs.asp',
reader: new Ext.data.JsonReader({
id: 'agentguid',
root: 'data'
}, [
{name: 'agentguid'},
{name: 'agentid'},
])
});

var ds_selected = new Ext.data.Store({
autoLoad: true,
url: '/agent_skill_list/getSelectedAgentIDs.asp',
reader: new Ext.data.JsonReader({
id: 'agentguid',
root: 'selected'
}, [
{name: 'agentguid'},
{name: 'agentid'},
])
});

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region: 'north',
el: 'north',
height: 32
}),{
region: 'west',
id: 'west-panel',
title: 'Skill',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 0',
id: 'item1',
title: 'Agents IDs',
items:[{
xtype: "box",
autoEl:{html:'<div class="text-content">Agent skill allows you to assign agentids to agent groups. To begin select a agent group from the dropdown below.'}
},{
xtype: "combo",
id: 'cbo_agent_group',
store: ds_cbogroupdef,
displayField:'agentgroupdef',
valueField: 'agentgroupdefid',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a skill',
selectOnFocus:true,
onSelect: function(record){
this.setValue(record.data[this.valueField || this.displayField]);
this.collapse();
//alert(record.data.agentgroupdefid);
var SpotIDDataStore = new Ext.data.Store({
autoLoad: true,
url: '/agent_skill_list/getSelectedAgentIDs.asp',
baseParams:{agentgroupdefid: record.data.agentgroupdefid}, // trying to pass combobox selection here
reader: new Ext.data.JsonReader({
id: 'agentguid',
root: 'selected'
}, [
{name: 'agentguid'},
{name: 'agentid'},
])
});
var utiitemselect = Ext.getCmp('utiitemselect');
utiitemselect.switchToStore(SpotIDDataStore);
//utiitemselect.toMultiselect.store.load(SpotIDDataStore);
}
},{
xtype: "button",
id: "mai",
text:"Manage Agent Id\'s",
handler: function(){
UTIDataStore.reload({params: {start: 0, limit: 15}});
UTIListingWindow.show();
UTIListingEditorGrid.on('afteredit', saveTheUTI);
}

}]
},
new Ext.Panel({
region:'center',
items:[{
contentEl:'center1',
title: 'Assign Skills',
autoScroll:true
}]
})
]
});
var formItemSelector = new Ext.form.FormPanel({
labelWidth: 75,
width:600,
items:[{
id: "utiitemselect",
fieldLabel:"Results",
dataFields: ["agentguid", "agentid"],
displayField:"agentid",
valueField:"agentguid",
toSortField : "agentid",
toSortDir : "asc",
fromSortField : "agentid",
fromSortDir : "asc",
xtype:"itemselector",
name:"result",
fromStore: ds_available,
toStore: ds_selected,
msWidth:200,
msHeight:400,
//imagePath:"ext-ux/multiselect",
switchToFrom:true,
toLegend:"Selected",
fromLegend:"Available"
}],
buttons:[{
text:"Save AgentID\'s to Skill set",
handler: function(){
alert(formItemSelector.getForm().getValues(true));
}
}]
});

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


});

Thank you in advanced for any help.

tjstuart
23 Jul 2008, 3:53 PM
What is the correct way refresh one of the select boxes with data from a new store?

After manipulating the store you should call:-


this.toMultiselect.view.refresh();

FYI

toMultiselect is the SELECTED list
fromMultiselect is the AVAILABLE list

refresh the appropriate to suit your needs.

cdrascic
23 Jul 2008, 5:16 PM
Thanks for the response.

I added this.toMultiselect.view.refresh(); and it still doesn't work. So far it only works when I have the break point on range = newstore.getRange(); in


switchToStore: function(newstore){
this.toMultiselect.store.removeAll();
range = newstore.getRange();
this.toMultiselect.store.add(range);
this.toMultiselect.view.refresh();
},

Not sure what the problem is.

Ebse
24 Jul 2008, 7:55 AM
Hello,
I have a little question regarding itemselect.
Did somebody ever use this in a Autogrid?
Like this! Is this possible?

case 'ItemBox' :
c.editor = new Ext.grid.GridEditor(new Ext.ux.ItemSelector({


Thanks for your help
Ebse

magicyang918
28 Jul 2008, 12:07 AM
29 April 2008

Note from Brian re. why extension not in 2.1

"Sorry about that. Yes, it was planned for 2.1 but due to many factors, we didn't quite get it in. However, it will definitely be in the next release. We apologize for the delay."

"FYI, the plans are to get it into the next version, i.e., either 2.1.1 or 2.2 (not sure yet which it will be). But yes, if you need it today, you should use the existing ux."




22 February 2008 - Attention All

The Ext development team have decided to incorporate the Multiselect portion of this extension into the Ext core for the [see note above] release.

I have handed over the code. Given this, no further development (by me) will take place (in the short term) on either Multiselect or ItemSelector.

Once the Ext team have incorporated the Multiselect portion I will be able to alter ItemSelector to use the core version of Multiselect.

Thanks for your patience and I hope you'll agree that this extension will become even better given the expertise of the Ext core dev team.


*** Alot of people are asking for this patch. So I've placed here on page 1. This patch fixes the "cannot drag back from selected to available ***

Download patch for 3.0 http://extjs.com/forum/attachment.php?attachmentid=4903&d=1204167059



Extension Page http://extjs.com/learn/Extension:Multiselect2
Demo http://www.figtreesystems.com/ext/ext-ux/2.0/Multiselect/Multiselect.html
Download http://www.figtreesystems.com/ext/ext-ux/2.0/Multiselect/MultiselectItemSelector-3.0.zip


--------------------

I would like to thank "vtswingkid" for his port to Ext2.

I have kept 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.

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

When I drag a data form toMultiselect to fromMultiselect then I click the data,there is an error in firefox.It is :
Ext.fly(n) is null

dragData.repairXY = Ext.fly(n).getXY();
DDView.js

networm
29 Jul 2008, 12:27 AM
Hi,

I think I found a bug... :-?

Under the onRender definition, the following lines will throw an error if I defined toSortField, but also set drawUpIcon (any up/down icon in fact) to false or set hideNavIcons to true.



if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }


The solution:



if (!this.toSortField) {
if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
}
if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }

cethridge
30 Jul 2008, 5:41 AM
When is use an ItemSelector with 2.0.2 or 2.1 it doesn't work if I don't provide legends. This worked fine in the 2.0.

I get an "fs.el.down("." + fs.headerCls) has no properties" error.

When I remove the following lines it works fine:

if(!this.legend) {
fs.el.down('.'+fs.headerCls).remove();
}

Is it save to remove these lines?


This appears to be a bug. In my experience, it occurred when I did not include the toLegend/fromLegend config options.

gwall
1 Aug 2008, 5:02 AM
Hi

I am trying to load data into the multiselect fromData when the user selects a value from a comboBox. The responseText from the ajax request is:


{success: true, importDataFields:['objectid','sqkm','type','name']}My multiselect is in a form panel as an item and looks like:



{
xtype:'itemselector',
anchor: '100%',
name:'itemselector',
fieldLabel:'search fields',
dataFields:['code', 'desc'],
fromData: [],
toData:[],
msWidth:250,
msHeight:100,
valueField:'code',
displayField:'desc',
drawUpIcon:false,
drawDownIcon:false,
drawTopIcon:false,
drawBotIcon:false,
imagePath:'images/shared_images/extadmin/multiselect/',
//switchToFrom:true,
toLegend:'selected',
fromLegend:'avaliable'
}
I'm fairly new to ExtJS, and I'm sure this should be pretty easy, can someone point me in the right direction?

afei
5 Aug 2008, 12:39 AM
A fromPanel which contains a textarea and a label ,when i click a label,a multiselect window is showed, when i have selected what i want, how does the textarea get the selectedvalues?


Ext.onReady(function() {
Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var toobarPanel = new Ext.Panel({
renderTo : 'toobarPanel',
height : 0,
border : false,
tbar : [{
xtype : "tbseparator"
}, {
text : '保存',
id : 'qcButton',
iconCls : 'save',
handler : function() {
saveSwdj();
}
}, '-', {
text : '重置',
id : 'revamp',
// pressed:true,
iconCls : 'reset',
handler : function() {
simpleForm.form.reset();
}
}]
});

var ADMI_TITLE = {
xtype : "textfield",// 表单文本框
fieldLabel : '来文标题',
name : 'ADMI_TITLE',
id : "ADMI_TITLE",
width : 500,
allowBlank : false,
blankText : '来文标题不能为空'
};
var lwAddress = {
xtype : "textfield",
fieldLabel : '来文单位',
name : 'lwAddress',
id : "lwAddress",
width : 500,
allowBlank : false,
blankText : '来文单位不能为空'
};

var ADMI_HYPHEN = {
width : 340,
layout : 'form',
border : false,
items : [{
xtype : "textfield",
fieldLabel : '来文字号',
name : 'ADMI_HYPHEN',
id : "ADMI_HYPHEN",
anchor : "75%",
allowBlank : false,
blankText : '来文字号不能为空'
}]
};

var swDate = {
width : 340,
layout : 'form',
border : false,
items : [{
xtype : 'datefield',// 日期选择控件
fieldLabel : '收文时间',
name : 'swDate',// input的name属性
format : 'Y-m-d',
allowBlank : false,
blankText : '请选择收文时间',
anchor : '75%'
}]
};

var miji = {
width : 340,
layout : 'form',
border : false,
items : [{
xtype : 'combo',
// 因为是在客户端的数据,所以使用了一个简单存储
store : new Ext.data.SimpleStore({
fields : ["retrunValue", "displayText"],
data : [[1, '机密'], [2, '秘密']]
}),
valueField : "retrunValue", // 指定是提交给后台的值
displayField : "displayText",// 指定是在下拉中显示的选择值
mode : 'local', // 数据是在本地,所以设置了模式为local
forceSelection : true, // 必须选择一个选项
blankText : '请选择密级',
emptyText : '请选择密级', // 在没有选择值时显示为选择学历
hiddenName : 'miji',
editable : false,
triggerAction : 'all',
allowBlank : false,
fieldLabel : '密级',
name : 'miji',
anchor : '75%'
}]
};

var jici = {
width : 340,
layout : 'form',
border : false,
items : [{
xtype : 'combo',
store : new Ext.data.SimpleStore({
fields : ["retrunValue", "displayText"],
data : [[1, '紧急'], [2, '一般']]
}),
valueField : "retrunValue",
displayField : "displayText",
mode : 'local',
forceSelection : true,
blankText : '请选择急次',
emptyText : '请选择急次',
hiddenName : 'jici',
editable : false,
triggerAction : 'all',
allowBlank : false,
fieldLabel : '急次',
name : 'jici',
anchor : '75%'
}]
};

var pricy = {
width : 340,
layout : 'form',
border : false,
items : [{
xtype : 'combo',
store : new Ext.data.SimpleStore({
fields : ["retrunValue", "displayText"],
data : [[1, '紧急'], [2, '一般']]
}),
valueField : "retrunValue",
displayField : "displayText",
mode : 'local',
forceSelection : true,
blankText : '请选择优先级',
emptyText : '请选择优先级',
hiddenName : 'jici',
editable : false,
triggerAction : 'all',
allowBlank : false,
fieldLabel : '优先级',
name : 'pri',
anchor : '75%'
}]
};

var leader = {
width : 340,
layout : 'form',
border : false,
items : [{
xtype : 'combo',
store : new Ext.data.SimpleStore({
fields : ["retrunValue", "displayText"],
data : [[1, '施科'], [2, '陈科']]
}),
valueField : "retrunValue",
displayField : "displayText",
mode : 'local',
forceSelection : true,
blankText : '请选择领导姓名',
emptyText : '请选择领导姓名',
hiddenName : 'jici',
editable : false,
triggerAction : 'all',
allowBlank : false,
fieldLabel : '领导姓名',
name : 'leader',
anchor : '75%'
}]
};

var reciver = {
width : 578,
layout : 'form',
// layoutConfig:{columns:2},
border : false,
items : [{
xtype : 'textarea',
fieldLabel : '接收人',
name : 'reciver',
id:'reciver',
allowBlank : true,
autoShow : true,
width : 478,
height : 35
}]
};

var reciverLabel = {
width : 16,
layout : 'form',
border : false,
items : [{
xtype : 'label',
html : '<a href="#" onclick="userSelcetor.init()";><img src="../../images/icons/select.png"></a>'
}]
}

var outdate = {
width : 600,
layout : 'form',
border : false,
items : new Ext.Panel({
layout : 'column',
border : false,
labelSeparator : ':',
labelAlign : 'right',
layoutConfig : {
columns : 5
},
items : [{
width : 120,
layout : 'form',
border : false,
items : [{
xtype : 'label',// 日期选择控件
text : '逾期时间',
cls : 'yuqisj'
}]
}, {
width : 20,
layout : 'form',
border : false,
items : [{
xtype : 'label',// 日期选择控件
html : '<span class="x-form-item">从</span>'
}]
}, {
width : 180,
layout : 'form',
border : false,
items : [{
xtype : 'datefield',// 日期选择控件
hideLabel : true,
name : 'swDate',// input的name属性
format : 'Y-m-d',
allowBlank : false,
blankText : '请选择逾期结束时间',
anchor : '90%'
}]
}, {
width : 37,
layout : 'form',
border : false,
items : [{
xtype : 'label',// 日期选择控件
html : '<span class="x-form-item">到</span>'
}]
}, {
width : 180,
layout : 'form',
border : false,
items : [{
xtype : 'datefield',// 日期选择控件
hideLabel : true,
name : 'swDate',// input的name属性
format : 'Y-m-d',
allowBlank : false,
blankText : '请选择逾期结束时间',
anchor : '90%'
}]
}]
})
};
var leaderIdea = {
xtype : 'textarea',
fieldLabel : '领导批示意见',
name : 'lcomm',
allowBlank : true,
width : 500
};
var remark = {
xtype : 'textarea',
fieldLabel : '备注',
name : 'remark',
allowBlank : true,
width : 500,
autoShow : true
};

var simpleForm = new Ext.FormPanel({
labelAlign : 'right',
labelWidth : 90,
buttonAlign : 'center',
// title: '收文登记',
renderTo : 'djForm',
bodyStyle : 'padding-top:10px;',
border : false,
width : 'auto',
// frame:true,
baseCls : 'x-plain',
items : [ADMI_TITLE, lwAddress, {
layout : 'column',
border : false,
items : [ADMI_HYPHEN, swDate, miji, jici, pricy, leader, reciver,
reciverLabel]
}, outdate, leaderIdea, remark]
});

function saveSwdj() {
if (simpleForm.form.isValid()) {
this.disabled = true;
Ext.MessageBox.show({
title : '请稍等',
msg : '正在保存数据...',
progressText : '',
width : 300,
progress : true,
closable : false,
animEl : 'loding'
});
simpleForm.form.doAction('submit', {
url : 'test.asp',
method : 'post',
params : '',
success : function(form, action) {
Ext.Msg.alert('操作', action.result.data);
this.disabled = false;
},
failure : function() {
Ext.Msg.alert('操作信息!', '保存数据失败!');
this.disabled = false;
}
});
}
}
});


userSelcetor = {
init : function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
/**
* 所有的用户
*/
var fromStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '/fromUser.do'
}),
reader : new Ext.data.JsonReader({
root : 'root',
totalProperty : 'total',
id : 'id',
fields : ['id', 'name']
})
});

fromStore.load();

var formItemSelector = new Ext.form.FormPanel({
labelWidth : 25,
labelAlign : 'top',
width : 450,
// margins:'50 50 50 50',
// autoScroll:true,
bodyStyle : 'padding:5px 5px 5px 5px',
items : [{
xtype : "itemselector",
name : "userId",
// autoScroll:true,
fieldLabel : "用户选择",
// bodyStyle:'padding:5px 15px 15px 15px',
// margins:'15 15 15 15',
dataFields : ["id", "name"],
fromData : [[123, "One Hundred Twenty Three"], ["1", "One"],
["2", "Two"], ["3", "Three"], ["4", "Four"],
["5", "Five"], ["6", "Six"], ["7", "Seven"],
["8", "Eight"], ["9", "Nine"]],
toData : [["10", "Ten"]],
// fromStore:fromStore,
msWidth : 200,
msHeight : 200,
valueField : "id",
displayField : "name",
imagePath : "../../images/userSelector",
// switchToFrom:true,
toLegend : "可选用户",
fromLegend : "已选用户",
toTBar : [{
text : "清除",
handler : function() {
var i = formItemSelector.getForm().findField("userId");
i.reset.call(i);
}
}]
}]
});

var win;
if (!win) {
win = new Ext.Window({
layout : 'fit',
// 模式窗口
modal : true,
width : 450,
height : 300,
closeAction : 'hide',
plain : true,
// margins:'5 5 5 5',

title : '用户选择',
buttonAlign : 'center',
buttons : [{
text : '确定',
disabled : false,
handler : function() {
parent.Ext.getCmp('simpleForm'). getComponent('reciver').setValue(ormItemSelector.getForm().getValues(true));
//alert(formItemSelector.getForm().getValues(true));

win.hide();
}
}, {
text : '取消',
handler : function() {
win.hide();
}
}]
});
win.add(formItemSelector);
}
win.show();
}
};

tjstuart
5 Aug 2008, 10:54 PM
Hi

I am trying to load data into the multiselect fromData when the user selects a value from a comboBox. The responseText from the ajax request is:


{success: true, importDataFields:['objectid','sqkm','type','name']}My multiselect is in a form panel as an item and looks like:



{
xtype:'itemselector',
anchor: '100%',
name:'itemselector',
fieldLabel:'search fields',
dataFields:['code', 'desc'],
fromData: [],
toData:[],
msWidth:250,
msHeight:100,
valueField:'code',
displayField:'desc',
drawUpIcon:false,
drawDownIcon:false,
drawTopIcon:false,
drawBotIcon:false,
imagePath:'images/shared_images/extadmin/multiselect/',
//switchToFrom:true,
toLegend:'selected',
fromLegend:'avaliable'
}
I'm fairly new to ExtJS, and I'm sure this should be pretty easy, can someone point me in the right direction?


You should read up on using stores (which are better to use than fromData and toData which are only really useful when the data set is static ie. wont change).

What you are describing is quite simple. You can access the ItemSelector stores via the 'fromStore' and 'toStore' properties.

To dynamically add a record you can:-


[object].fromStore.add(new Ext.data.Record({code:'sample_code', desc:'Sample Item'}));

or do it in a loop to add many records or use the store loadData() method.

tjstuart
5 Aug 2008, 10:58 PM
A fromPanel which contains a textarea and a label ,when i click a label,a multiselect window is showed, when i have selected what i want, how does the textarea get the selectedvalues?

Use the getValue() method.

Shmoo
7 Aug 2008, 12:42 AM
Hi tjstuart!

This version should work ok with Ext JS 2.2 right? :)

Do we need to update DDView as well?

tjstuart
7 Aug 2008, 4:15 PM
Hi tjstuart!

This version should work ok with Ext JS 2.2 right? :)

Do we need to update DDView as well?

It has been added to the Ext2.2 package see: http://extjs.com/blog/2008/08/04/ext-22-released/. I havent tried it but I assume it works fine. I have noticed that they didn't include the "Can't drag back from selected to available" patch which is outlined on page 1 of this thread :(

afei
7 Aug 2008, 11:47 PM
how does the textarea call the getValues method?

sniechzial
9 Aug 2008, 12:22 AM
Hi all,

I think there is a bug in the onChange Event of ItemSelector...

normally it should pass (this, newValue, oldValue) to the eventHandler, but newValue is passed two times.

Hope I'm not double posting, but did not find anything in this thread.

Possible fix:

valueChanged: function(store) {
var record = null;
var values = [];
@@ -335,18 +335,19 @@
record = store.getAt(i);
values.push(record.get(this.valueField));
}
+ var oldValue = this.hiddenField.dom.value;
this.hiddenField.dom.value = values.join(this.delimiter);
- this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
+ this.fireEvent('change', this, this.getValue(), oldValue);
},
simon

scastros
13 Aug 2008, 7:21 AM
Hi all,

msWidth and msHeight are always needed for ItemSelector? Is there a way to adjust height and width dinamically based on screen resize or something similar?

Thnx in advance!

acslater
18 Aug 2008, 11:02 AM
Okay, I think I saw a question similar to this earlier in this thread but did not see an answer so hopefully somebody can provide one this time. I have a ItemSelector inside of a TabPanel inside of a Panel with a fixed height. I cannot get the scrollbars to show up. Here is my code. I hope I have provided enough code but I can paste more if it helps.


new Ext.TabPanel({
style: 'margin-top: 15px;',
activeTab: 0,
autoHeight: true,
autoWidth: true,
plain: true,
autoscroll:true,
items: [
{
title: 'MultiSelect',
border: false,
height: 200,
listeners: {activate: handleActivate},
items: [{
style: 'margin-top: 15px; margin-left: 15px;',
border: false,
layout: 'fit',
height: 200,
items: [
new Ext.ux.ItemSelector({
scroll:true,
autoScroll:true,
overflow: 'auto',
name:'system2'
,id:'system2'
,fieldLabel:'Multiselect'
,labelWidth: 65
//,msHeight:180
,msWidth:200
,valueField:'id'
,displayField:'name'
,fromStore:SpecialStore
,toStore:new Ext.data.SimpleStore({
id:0
,fields:[{name:'id', type:'int'}, 'name']
,data:[]
})
,dataFields:['id', 'name']
,iconUp:Ext.BLANK_IMAGE_URL //'js/form/multiselect/up2.gif'
,iconDown:Ext.BLANK_IMAGE_URL //'js/form/multiselect/down2.gif'
,iconLeft:'images/left2.gif'
,iconRight:'images/right2.gif'
,iconBottom:Ext.BLANK_IMAGE_URL //'js/form/multiselect/bottom2.gif'
,iconTop:Ext.BLANK_IMAGE_URL //'js/form/multiselect/top2.gif'
,fromLegend:'Available'
,toLegend:'Required'
})
]
}]
}]
}
]
})

doze
18 Aug 2008, 11:40 AM
Hello,

Sorry if this has been asked earlier (I didn't read through all the posts). Can the Multiselect/ItemSelector somehow be used in a ComboBox? Or made to function as a ComboBox? I would like to save all the space I can in my form, so a dropdown ComboBox with multiselect would be best for me.

Thanks in advance for any reply.

mysticav
23 Aug 2008, 12:17 PM
*** Alot of people are asking for this patch. So I've placed here on page 1. This patch fixes the "cannot drag back from selected to available ***

I downloaded the patch and found that inside zip, only comes Multiselect.js,
The problem with ItemSelector was not resolved adding this patch. Still I can't drag back the itemes.

Any Idea ?

Is there a ItemSelector.js patch that I'm missing ?

nerdydude81
25 Aug 2008, 9:49 AM
I found a small problem with Animal's DDView, or at least with the version included with this extension. When dragging a node to white space in the same ddview it appears to mix up the nodes. I solved this by adding the below code to line 346.



if (typeof insertAt == 'undefined')
insertAt = this.store.getCount();


Also changed line 399 to



if (data.copy || data.sourceView != this) {

couetbis
27 Aug 2008, 12:01 AM
Hi,
I use Multiselect, it work fine but I have a little render problem with InternetExplorer (not with Firefox).
After page loading, there is a bad render but after mouse over component, it's good :-?
Is there refresh method to call ?
Thanks in advance

xataraxx
28 Aug 2008, 10:18 AM
I probably should have posted this question here first, but rather than repeat myself I'll put a link:

http://extjs.com/forum/showthread.php?p=215800#post215800

In short, I'm trying to load data into the toStore after the ItemSelector has already been displayed and can't seem to make it work.

Any help would be greatly appreciated.

Thanks.

Shmoo
28 Aug 2008, 5:36 PM
Quick question: Does attaching a new function on the rowdblclick event override existing functions attached to it?

innovator
3 Sep 2008, 10:30 PM
Hi,
i am using Multiselect3.0.
But when i m running , i am getting error. "fs.el.down("." + fs.headerCls) is null" in Multiselect.js at line 55.

koensen
10 Sep 2008, 1:23 AM
Same problem here...
It came with the change from ExtJs 2.0.1 to 2.2

innovator
10 Sep 2008, 1:29 AM
Hi koensen,
I have one solution.
Either assign a value to legend var or comment this line. yr problem will solved.

vtswingkid
10 Sep 2008, 5:51 AM
Here is my 3.0.2 release...It may help some of you out.

napolennon
17 Sep 2008, 7:27 PM
Hi all,

i have a problem with item selector inside a grid.

here's my code:


var cm = new Ext.grid.ColumnModel([{
id:'itemselector',
dataIndex:'itemselector',
header:'item selector',
width:700,
renderer:function(val){
return "<div style='height:120px;overflow:hidden'>"+val+"</div>";
},
editor:new Ext.ux.ItemSelector({
xtype:"itemselector",
name:"itemselector",
labelSeparator:'',
dataFields:["code", "desc"],
fromData:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"],["10", "Ten"]],
toData:[],
msWidth:250,
msHeight:100,
valueField:"code",
displayField:"desc",
//imagePath:"ext-ux/multiselect",
//switchToFrom:true,
toLegend:"Selected",
fromLegend:"Available"
})
}])

var gridTestProp = [
{name:'itemselector'}
]

var gridTestRecord = new Ext.data.Record.create(gridTestProp)

gridTestRecord.createNew = function(){
return new gridTestRecord ({
itemselector:'' //i'm not sure about this, wonder how to set toValue = ''
});
};

var gridTestStore = new Ext.data.SimpleStore({
fields: gridTestProp
})

xtype: 'editorgrid',
id: 'gridTest',
name: 'gridTest',
autoHeight:true,
//height:150,
frame: false,
border: true,
width: 1000,
store: gridTestStore,
clicksToEdit: 1,
stripeRows: true,
cm: cm,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
tbar: [{
text: 'Add Row',
handler : function(){
var p = new gridTestRecord.createNew();
var grid = Ext.getCmp('gridTest');
grid.stopEditing();
gridTestStore.insert(0, p);
grid.startEditing(0, 0);
}
}]for the first time insert into toData its ok, the problem is when i tried to insert another row (let say 2nd row) toData value is filled by the first row toData value.
i'd like to set toData value = null (empty) so everytime i add new row toData value will be empty. is there's something wrong with my code above? :-/ or i miss something?

thanks

napolennon
18 Sep 2008, 6:12 PM
oh my bad..i miss page 3 on this thread bout adding setValue method :D that'll solved the problem above.

thanks

napolennon
23 Sep 2008, 6:27 PM
Hi,

i have some problem with itemselector on IE. i've post it on Help section http://extjs.com/forum/showthread.php?p=228359#post228359.

i'm using ext-2.01 and multiselect 3.0, run it on IE7.

can anyone help me to solve this?

thanks

aacraig
10 Oct 2008, 9:00 AM
Hi all,

I think there is a bug in the onChange Event of ItemSelector...

normally it should pass (this, newValue, oldValue) to the eventHandler, but newValue is passed two times.

Hope I'm not double posting, but did not find anything in this thread.

Possible fix:

valueChanged: function(store) {
var record = null;
var values = [];
@@ -335,18 +335,19 @@
record = store.getAt(i);
values.push(record.get(this.valueField));
}
+ var oldValue = this.hiddenField.dom.value;
this.hiddenField.dom.value = values.join(this.delimiter);
- this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
+ this.fireEvent('change', this, this.getValue(), oldValue);
},
simon

Thanks for the patch. I have just confirmed the same error. Haven't seen anyone else complain about this, but hopefully it will get sorted in a future release.

Stripeman
15 Oct 2008, 1:33 AM
Can someone please email me this ?
http://www.figtreesystems.com/ext/ext-ux/2.0/Multiselect/MultiselectItemSelector-3.0.zip

I am unable to download without it being corupted... Thanks so much

remsikt@gmail.com

Stripeman
15 Oct 2008, 4:57 AM
For the itemselector that minLength does not prohibit submision of the form based on the number entered for this. IE minLength:3;

also

allowBlank:false; does not work either.

I guess in other words its not validating. ( if(isForm.getForm().isValid()) )
btw I am just editing the demo pages (multiself-demo.js)

wwwtd
20 Oct 2008, 3:57 AM
oh my bad..i miss page 3 on this thread bout adding setValue method :D that'll solved the problem above.

thanks
how to solve the problem?

and I had a question like this:

when I changed the fromFiled and before I seted toFiled's value can be save in the toStore filed.

it's two store's sum~

can anyone help me?

service@think-1st.de
20 Oct 2008, 3:24 PM
HI, Great extension!
Is there a way to define a list of unselectable options in the Available list ?

Thanks

sanjayrajmane
21 Oct 2008, 11:20 PM
Hi
I am using multiselect/ Itemselector 3.0 extension.
Can anyone tell me How to set scrollbar for to and from multiselect?

thanks in advance...

wiznia
22 Oct 2008, 6:25 AM
There are a couple of undeclared variables in the extension. It's not SUCH a big deal, but it's easy to solve it...
This is the modified version.

jethuang
6 Nov 2008, 7:00 PM
use fromStore, the ItemSelector no data to show,but use fixed data like [['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five']], the ItemSelector could show the data

var fromStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url :'../sales/extcustomer/CustomerListData.jsp?DbType=Combo'
}),
reader: new Ext.data.JsonReader({
root: 'members',
totalProperty: 'count',
id: 'id'
}, [
{name: 'AUTOID'},
{name: 'CUSTOMERNAME'}
])
});
fromStore.load();

{xtype:"itemselector",
id:'workorder-itemselect-id',
name:"workorder-itemselect",
fieldLabel:"制程选择",
dataFields:['AUTOID', 'CUSTOMERNAME'],//['code', 'desc'],
fromData:fromStore, //[['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four']],
toData:[],
msWidth:250,
msHeight:200,
valueField:'AUTOID',
displayField:'CUSTOMERNAME',
imagePath:'../../skins/web/js/extjs/images',
//switchToFrom:true,
toLegend:"已选制程",
fromLegend:"可用制程"}

jethuang
6 Nov 2008, 7:07 PM
the issue has been solved, i change the from 'fromData' to 'fromStore'

jethuang
6 Nov 2008, 7:41 PM
dbclick the row of fromstore then the data to the 'todata' and the data of fromstore has clear away ,i want the data in fromstore stay here,because the fromstore data need twice or more.

like :
available-----------selected
B1 ------------------B1 (first time)
B2 ----------------- B2
BG ----------------- B1 (second time)
E1
E2
FVI
PKG
...

Rowan
10 Nov 2008, 4:46 AM
Is this in the source of 2.2 yet? The docs say no but there are examples on the page.

What's going on EXT guys? Please can you either include in the source or make it really clear on the docs that you need to use the extension.

I'm confused.

jethuang
11 Nov 2008, 5:03 PM
i am newer for english and Ext.
i need multiselected on the ItemSelector control,but the ItemSelector control had been selected twice or more for the same item,

tjstuart
12 Nov 2008, 2:53 PM
Is this in the source of 2.2 yet? The docs say no but there are examples on the page.

What's going on EXT guys? Please can you either include in the source or make it really clear on the docs that you need to use the extension.

I'm confused.

I am the original author of this extension and have signed the code over to Ext. From my communications with Brian earlier this year, I think (don't quote me on this) what Ext intend to do is either build the Multiselect and ItemSelector into the core in a 2.x version (probably with a re-write) or decide that it is best we wait for Ext3 where I believe Jack has some nice ListBox widgets that will render these extensions redundant :)

In the meantime I guess you use the extension provided.

tjstuart
12 Nov 2008, 2:57 PM
i am newer for english and Ext.
i need multiselected on the ItemSelector control,but the ItemSelector control had been selected twice or more for the same item,

You really need to provide example code that clearly demonstrates your problem before any of the kind folk here will assist. If possible, it is always best to place the example on-line so it is easy for people to debug. Remember, most of us here are volunteers (with real jobs) and do this out of the kindness of our hearts ;)

shay2501
14 Nov 2008, 7:44 AM
I was using ext version 2.0.2 and the Multiselect extension was working perfectly. However, we just updated to ext version 2.2 and now the I can't click on the Multiselect options.

I looked at the HTML and I saw that it belongs to a class x-unselectable as well as ux-mselect-item. Is there an option I can specify to make it selectable?

Here is my code:



var multiVer = new Ext.ux.Multiselect({
fieldLabel:"Select Versions",
name:"VersionName",
store:verStore,
valueField:"VersionID",
displayField:"VersionName",
width:150,
//height:200,
autoHeight:true,
//allowBlank:true,
isFormField:true,
legend:"Versions"
});

bittercoder
24 Nov 2008, 2:12 PM
I'm trying to use Ext.ux.Multiselect and Ext.ux.ItemSelector in my own form, but I'm having issues with the contents of the fieldsets on the left & right exceeding the fieldset borders.

Here is the code:



{
xtype:"itemselector",
id: 'users',
name:"users",
fieldLabel:"Users",
dataFields:["code", "desc"],
toData:[["10", "Ten"]],
msWidth:200,
msHeight:200,
height: 300,
valueField:"code",
displayField:"desc",
imagePath:"/EnterpriseTester/content/images/",
toLegend:"Selected",
drawUpIcon: false,
drawDownIcon: false,
drawTopIcon: false,
drawBotIcon: false,
fromLegend:"Available",
fromData:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toTBar:[{
text:"Clear",
handler:function(){
var i=isForm.getForm().findField("itemselector");
i.reset.call(i);
}
}]
}


And a screen shot of the problem:

10665

The problem is only occurring in Internet Explorer 7 (not FF) but the heights look to be correct i.e. the x-form-field is set to 200px high and the x-fieldset-bwrap is set to 183px high... if I use the IE Dev Toolbar and set either the x-form-field to 210px or the x-fieldset-bwrap to 173px it then renders the fieldset's border correctly.

Any ideas on what I could be doing wrong - I am using a custom theme, but I have tried it without and it still doesn't render correctly in IE.

bhomass
15 Dec 2008, 11:05 PM
I have a item selector

var contactsSelectorSelector = new Ext.ux.ItemSelector({
fromStore:contactsSelectorSelectorFromStore,
toStore:contactsSelectorSelectorToStore,
fromLegend:'Contacts',
toLegend:'To',
applyTo:'ContactSelector',
name:'contactsSelector',
id: 'ContactSelector_contactsSelector_id',
isFormField:true,
dataFields:['name', 'value'],
valueField:'value',
displayField:'name',
fieldLabel: '',
allowBlank:true,
msWidth: 120,
msHeight:200,
})

I can move values from left to right by drag&drop or use the right arrow, but double clicking the left side value does nothing. I checked the js in DDView,


onDblClick : function(e){
var item = this.findItemFromChild(e.getTarget());

item is null.

can anyone tell what I could have done wrong?

On further look, this error only occurs after I close the item selector dialog and reopen it. double click apparently works the first time I open it. anyone else observe this problem?

wwwtd
19 Dec 2008, 11:23 PM
can anyone help me to change this ItemSelector with tree

Rilax
21 Jan 2009, 2:38 AM
http://extjs.com/forum/images/icons/icon1.gif
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.

jimtyp
29 Jan 2009, 3:46 PM
I'm using ext js 2.2. I love the multiselect in the exampels, but when dragging "to" list items to the "from" list it does not work. All other aspects work.

I tried the patch, but it still does not work. Any suggestions?

jla
16 Feb 2009, 4:56 AM
I need an "SortSelector", i only delete the fromMultiSelect from ItemSelector and rename some config options p.e(toStore -> store, toData -> data,...)

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

paste the code:



Ext.ux.SortSelector = Ext.extend(Ext.form.Field, {
msWidth:200,
msHeight:300,
hideNavIcons:false,
imagePath:"",
iconUp:"up2.gif",
iconDown:"down2.gif",
iconLeft:"left2.gif",
iconRight:"right2.gif",
iconTop:"top2.gif",
iconBottom:"bottom2.gif",
drawUpIcon:true,
drawDownIcon:true,
drawLeftIcon:true,
drawRightIcon:true,
drawTopIcon:true,
drawBotIcon:true,
store:null,
data:null,
displayField:0,
valueField:1,
switchToFrom:false,
allowDup:false,
focusClass:undefined,
delimiter:',',
readOnly:false,
legend:null,
sortField:null,
sortDir:'ASC',
tBar:null,
bodyStyle:null,
border:false,
defaultAutoCreate:{tag: "div"},

initComponent: function(){
Ext.ux.SortSelector.superclass.initComponent.call(this);
this.addEvents({
'rowdblclick' : true,
'change' : true
});
},

onRender: function(ct, position){
Ext.ux.SortSelector.superclass.onRender.call(this, ct, position);



if (!this.store) {
this.store = new Ext.data.SimpleStore({
fields: this.dataFields,
data : this.data
});
}
this.store.on('add', this.valueChanged, this);
this.store.on('remove', this.valueChanged, this);
this.store.on('load', this.valueChanged, this);

this.multiselect = new Ext.ux.Multiselect({
legend: this.legend,
delimiter: this.delimiter,
allowDup: this.allowDup,
dragGroup: this.readOnly ? null : "drop1-"+this.el.dom.id,
dropGroup: this.readOnly ? null : "drop2-"+this.el.dom.id+",drop1-"+this.el.dom.id,
width: this.msWidth,
height: this.msHeight,
displayField: this.displayField,
valueField: this.valueField,
store: this.store,
isFormField: false,
tbar: this.tBar,
sortField: this.sortField,
sortDir: this.sortDir
});
this.multiselect.on('dblclick', this.onRowDblClick, this);

var p = new Ext.Panel({
bodyStyle:this.bodyStyle,
border:this.border,
layout:"table",
layoutConfig:{columns:2}
});
p.add(this.multiselect);
var icons = new Ext.Panel({header:false});
p.add(icons);
p.render(this.el);
icons.el.down('.'+icons.bwrapCls).remove();

if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
this.imagePath+="/";
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 || 'top2.gif');
this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
var el=icons.getEl();
if (!this.sortField) {
this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
}
el.createChild({tag: 'br'});
el.createChild({tag: 'br'});
if (!this.sortField) {
this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
}
if (!this.readOnly) {
if (!this.sortField) {
this.toTopIcon.on('click', this.toTop, this);
this.upIcon.on('click', this.up, this);
this.downIcon.on('click', this.down, this);
this.toBottomIcon.on('click', this.toBottom, this);
}
}
if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }

var tb = p.body.first();
this.el.setWidth(p.body.first().getWidth());
p.body.removeClass();

this.hiddenName = this.name;
var hiddenTag={tag: "input", type: "hidden", value: "", name:this.name};
this.hiddenField = this.el.createChild(hiddenTag);
this.valueChanged(this.store);
},

initValue:Ext.emptyFn,

toTop : function() {
var selectionsArray = this.multiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
selectionsArray.sort();
for (var i=0; i<selectionsArray.length; i++) {
record = this.multiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=records.length-1; i>-1; i--) {
record = records[i];
this.multiselect.view.store.remove(record);
this.multiselect.view.store.insert(0, record);
selectionsArray.push(((records.length - 1) - i));
}
}
this.multiselect.view.refresh();
this.multiselect.view.select(selectionsArray);
},

toBottom : function() {
var selectionsArray = this.multiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
selectionsArray.sort();
for (var i=0; i<selectionsArray.length; i++) {
record = this.multiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
this.multiselect.view.store.remove(record);
this.multiselect.view.store.add(record);
selectionsArray.push((this.multiselect.view.store.getCount()) - (records.length - i));
}
}
this.multiselect.view.refresh();
this.multiselect.view.select(selectionsArray);
},

up : function() {
var record = null;
var selectionsArray = this.multiselect.view.getSelectedIndexes();
selectionsArray.sort();
var newSelectionsArray = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.multiselect.view.store.getAt(selectionsArray[i]);
if ((selectionsArray[i] - 1) >= 0) {
this.multiselect.view.store.remove(record);
this.multiselect.view.store.insert(selectionsArray[i] - 1, record);
newSelectionsArray.push(selectionsArray[i] - 1);
}
}
this.multiselect.view.refresh();
this.multiselect.view.select(newSelectionsArray);
}
},

down : function() {
var record = null;
var selectionsArray = this.multiselect.view.getSelectedIndexes();
selectionsArray.sort();
selectionsArray.reverse();
var newSelectionsArray = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.multiselect.view.store.getAt(selectionsArray[i]);
if ((selectionsArray[i] + 1) < this.multiselect.view.store.getCount()) {
this.multiselect.view.store.remove(record);
this.multiselect.view.store.insert(selectionsArray[i] + 1, record);
newSelectionsArray.push(selectionsArray[i] + 1);
}
}
this.multiselect.view.refresh();
this.multiselect.view.select(newSelectionsArray);
}
},


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

getValue : function() {
return this.hiddenField.dom.value;
},

onRowDblClick : function(vw, index, node, e) {
return this.fireEvent('rowdblclick', vw, index, node, e);
},

reset: function(){
range = this.multiselect.store.getRange();
this.multiselect.store.removeAll();
this.valueChanged(this.multiselect.store);
}
});

Ext.reg("sortselector", Ext.ux.SortSelector);

gulan
16 Feb 2009, 8:11 AM
Hi ,

I am very new to ExtJs..
I want to create a multi select form panel...
I just want to open a multi select form panel while hiting alt+t. together..
So i used keymap to get event of alt+t . in the handler function i want to open the multi select with some data... datas are already sorted in an array named newArray[]. I dont want to perform any action and I dont want any buttons on the panel.

I checked the examples given but its not working for me..
it gives an error "object expected"

I used the following code

var msForm = new Ext.form.FormPanel({
title: 'MultiSelect Test',
width:700,
bodyStyle: 'padding:10px;',
renderTo: 'multiselect',
items:[{
xtype:"multiselect",
name:"multiselect",
dataFields:["win", "index"],
valueField:"index",
displayField:"win",
width:250,
height:200,
allowBlank:false,
data:[newArray],
tbar:[{
text:"windows",
}]
}],
});

keyMapfn: msForm.show();


somebody please help me...

Troto
18 Feb 2009, 10:16 AM
Is there any way i can send the selected values as an array (like a normal multiselect select) and not a delimited string ?

tjstuart
18 Feb 2009, 5:27 PM
Hi ,

I am very new to ExtJs..
I want to create a multi select form panel...
I just want to open a multi select form panel while hiting alt+t. together..
So i used keymap to get event of alt+t . in the handler function i want to open the multi select with some data... datas are already sorted in an array named newArray[]. I dont want to perform any action and I dont want any buttons on the panel.

I checked the examples given but its not working for me..
it gives an error "object expected"

I used the following code

var msForm = new Ext.form.FormPanel({
title: 'MultiSelect Test',
width:700,
bodyStyle: 'padding:10px;',
renderTo: 'multiselect',
items:[{
xtype:"multiselect",
name:"multiselect",
dataFields:["win", "index"],
valueField:"index",
displayField:"win",
width:250,
height:200,
allowBlank:false,
data:[newArray],
tbar:[{
text:"windows",
}]
}],
});

keyMapfn: msForm.show();


somebody please help me...

Very difficult to diagnose. Have you tried Firebug. Step through the code.

tjstuart
18 Feb 2009, 5:29 PM
Is there any way i can send the selected values as an array (like a normal multiselect select) and not a delimited string ?

Easiest way would be to override the getValue() method and split the string into an array.

pkmiec
20 Feb 2009, 4:32 PM
The plug-in is great.

I'd suggest adding an option for setting the height of the multi-select in terms of number of options that should be visible without a scrollbar. For example, I'd like to say height : '5 options' (or heightForOptions: 5) and have the component render with whatever height is necessary to display 5 options without a scrollbar.

NoahK17
24 Feb 2009, 12:09 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.

NoahK17
24 Feb 2009, 1:21 PM
Alright, I fixed it myself.

At the bottom of the onViewClick private function in the MultiSelect UX, add the following code:



// This code mimics holding down the CTRL key when selecting items via the mouse
if(this.preClickSelections != '' && arrayIndex == -1){
this.preClickSelections[this.preClickSelections.length] = index;
this.view.select(this.preClickSelections);
}


The only downside is, the SHIFT + select functionality is removed. But I don't have time to figure out why. Cheers!

okwei
3 Mar 2009, 12:18 PM
Does not look like.

queej
6 Mar 2009, 11:01 AM
I've searched this thread, the demos and the source code for some way to set which values appear initially selected, without success. I've tried permutations like value: "1,3", values: [1,3], etc.

How are initial selected items set?

Animal
7 Mar 2009, 5:58 AM
Can I suggest that this be made a TriggerField with the multi items only visible when the trigger button is clicked?

Unless configured with hideTrigger: true, in which case, the full height should be displayed.

Steferson Patake
7 Mar 2009, 7:19 AM
Hello to everyone...
i'm using itemselector to show up 5 different fields at a big form panel.
Adding records to a database is running great.
My problem is when is on edit mode of the form panel.
I use the load method of form panel object to retrieve all the data back to the form to enter in edit mode. So, there is my problem with itemselector.
I need the data back as is on the database, with the already selected itens at the 'selected' field and all those not selected in the 'available' field.
There is a patch or something to itemselector do this automatically when data loads from the load method of form panel? or another way to do this?


thanks in advance...

mango
17 Mar 2009, 6:02 AM
Hi,

I want to remove the label(ItemSelector) from the Multiselect and Itemselect, and also let me know how do we change the Selected column to right side and Available column onto left side.

Thanks in advance.

Sri

NoahK17
17 Mar 2009, 10:41 AM
Hello,

I enchanced look&feel of the multiselect, added 'Select All' button and Filter. That's what I needed for my own use and hope you'll add this functionality for the next release so it would be native.

Thank you all!

P.S. it's orange due to my skin, but I hope you'll manage to change it for your own colors easily by changing css

I don't see the Select All button. Did you forget to include your index.html file in the example?

tjstuart
19 Mar 2009, 3:17 PM
Hello everyone,

I am the original author of these extensions. Last year I signed the code over to Ext. Following this, it was my understanding that Ext would support the extensions.

New features/enhancements will not be added (at least by me). If there are *critical* bugs then I may offer a solution if I have the time.

All is not lost however. I understand that Ext3 has a ListBox widget which should do all that these extensions do and more.

That said, the source for these extensions is incredibly simple. Most of the issues raised in this this thread could be solved by bit of reading and simple overrides.

Please don't take this as a "hey, it's not my problem anymore" ... I am simply very busy and no longer "own" the extensions.

Finally, you will get better support if you are able to post your problems on-line ie. an example running on a public web server. This way people don't have to try to re-create your examples.

ChWild
30 Mar 2009, 5:16 PM
Hi,
i modified the 'Multiselect' cause i got problems working with an store.

After this code:

if(!this.store){
this.store = new Ext.data.SimpleStore({
fields: this.dataFields,
data : this.data
});
}i added this:


this.store.on('add', this.refreshList, this);
this.store.on('remove', this.refreshList, this);
this.store.on('load', this.refreshList, this);then i added the function 'refreshList' and added it also to 'reset()':

refreshList : function(store) {
this.view.setStore(store);
},

reset : function() {
this.refreshList(this.store);
this.setValue('');
},Now the listview of 'Multiselect' is refreshing if the store is changed.

Greets
ChWild


Edit:
I already noticed that there should be an Listview in EXT3.0. But i wouldn't wait so long *g*

Ronhead
3 Apr 2009, 8:40 AM
a perfect tool!
i fix my problem thanks

barukun
16 Apr 2009, 9:16 AM
Just want to simply ask:
Is ItemSelector can be rendered into row(s) in a grid (as an editor)?

- mika -
4 May 2009, 11:49 PM
Hi,
is there a way to capture the selected display fileds? With getValue() I get the values, but what I'd need was the names that user sees. With getRawValue() I get nothing.

- mika -

maydar
6 May 2009, 10:36 AM
I added

fs.el.child("div.x-fieldset-body").removeClass("x-fieldset-body"); at the end of the onRender method of the Multiselect and now I can see the scrollbars.

durlabh
11 May 2009, 1:04 PM
I needed to give our users a simple selection model where single click works as a toggle instead of Ctrl key combination. So, here is the code I used for it:


Ext.ux.DDView.override({
selectionMode: 'simple',
onItemClick: function(item, index, e) {
// The DragZone's mousedown->getDragData already handled selection
if (this.ignoreNextClick) {
delete this.ignoreNextClick;
return;
}

if (this.fireEvent("beforeclick", this, index, item, e) === false) {
return false;
}
if (this.multiSelect || this.singleSelect) {
if (this.selectionMode == 'simple' && !e.shiftKey && !e.ctrlKey) {
if (this.isSelected(item)) {
this.deselect(item);
} else {
this.select(item, true);
}
this.lastSelection = item;
} else {
if (this.multiSelect && e.shiftKey && this.lastSelection) {
this.select(this.getNodes(this.indexOf(this.lastSelection), index), false);
} else if (this.isSelected(item) && e.ctrlKey) {
this.deselect(item);
} else {
this.deselect(item);
this.select(item, this.multiSelect && e.ctrlKey);
this.lastSelection = item;
}
}
e.preventDefault();
}
return true;
}
});

dataking_henry
12 May 2009, 6:28 PM
Multiselect can support Ext2.2 ? Help!

Frank
17 May 2009, 5:42 PM
Thanks!

Frank
17 May 2009, 6:29 PM
I try this, it works well on FF 3.1, and I found that was a compatible issuse on IE6, which is more likely the issuse with ext3(1.1 rc1). I went into the souece code, ext-all-debug.js(line 3634).

In IE:

this.dom.style[camel] = " auto";

This would be fail,, and I just trim the space:


this.dom.style[camel] = "auto";

That works in IE6! So I made a little patch on ext-all.js,,,,,I tried to override the prototpye of Ext.Element.setStyle, but a inner Funciton call is needed, so you cant't just override it.

This is my finally patch.

this.dom.style[camel] = Ext.util.Format.trim(value);

mystix
17 May 2009, 6:35 PM
I try this, it works well on FF 3.1, and I found that was a compatible issuse on IE6, which is more likely the issuse with ext3(1.1 rc1). I went into the souece code, ext-all-debug.js(line 3634).

In IE:

this.dom.style[camel] = " auto";

This would be fail,, and I just trim the space:


this.dom.style[camel] = "auto";

That works in IE6! So I made a little patch on ext-all.js,,,,,I tried to override the prototpye of Ext.Element.setStyle, but a inner Funciton call is needed, so you cant't just override it.

This is my finally patch.

this.dom.style[camel] = Ext.util.Format.trim(value);
that's actually caused by a bug in 3.0rc1.1 that was fixed in SVN:
http://extjs.com/forum/showthread.php?t=66120

qgj2046
17 May 2009, 8:34 PM
Hi jsakalos,

This is a bug. It will be fixed in the next release. In the meantime I have attached a patched version of Multiselect.js.

Regards

Hi,

Could you send me this patch, I have the same issue need fix(Can't drag back in right multiselect field)

tjstuart
21 May 2009, 3:20 PM
Hi,

Could you send me this patch, I have the same issue need fix(Can't drag back in right multiselect field)

It is available on page one of this thread ... http://extjs.com/forum/showthread.php?t=20071

sabiola
10 Jun 2009, 6:09 AM
All is not lost however. I understand that Ext3 has a ListBox widget which should do all that these extensions do and more.


And where can I find this Widget?

Stefan

damnos
12 Jun 2009, 1:03 PM
Hi,

I am having trouble with the itemSelector, it never draw the lower part (bottom line) of the selection box. It always look like this:
http://img188.imageshack.us/img188/5530/itemselector.jpg (http://img188.imageshack.us/i/itemselector.jpg/)


Even if I shorten it, it still wont draw the bottom line, the lower part of the selection box always dissappear no matter what the msHeight is set to (and I tried different height attribute too)

Code for the item selector:


items:[ new Ext.ux.ItemSelector({

drawUpIcon:false,

id:'j_id9',

height:300,

displayField:'desc',

valueField:'code',

fromLegend:'Available',

msWidth:200,

msHeight:240,

drawDownIcon:false,

drawTopIcon:false,

toLegend:'Selected',

drawBotIcon:false,

fieldLabel:'Item Selection,

labelSeparator:"",

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

fromData:[
[123,'One Hundred Twenty Three'],['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']

],
toData:[
['10', 'Ten']
]

}) ]Any idea what might be wrong?

Thanks

damnos
15 Jun 2009, 11:54 AM
I am having the same problem as bittercoder (below) - did anyone figured out what's wrong and how to fix it?

I am using ItemSelector 3.0 and ExtJS 2.2.1


I'm trying to use Ext.ux.Multiselect and Ext.ux.ItemSelector in my own form, but I'm having issues with the contents of the fieldsets on the left & right exceeding the fieldset borders.

Here is the code:



{
xtype:"itemselector",
id: 'users',
name:"users",
fieldLabel:"Users",
dataFields:["code", "desc"],
toData:[["10", "Ten"]],
msWidth:200,
msHeight:200,
height: 300,
valueField:"code",
displayField:"desc",
imagePath:"/EnterpriseTester/content/images/",
toLegend:"Selected",
drawUpIcon: false,
drawDownIcon: false,
drawTopIcon: false,
drawBotIcon: false,
fromLegend:"Available",
fromData:[[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
toTBar:[{
text:"Clear",
handler:function(){
var i=isForm.getForm().findField("itemselector");
i.reset.call(i);
}
}]
}
And a screen shot of the problem:

10665

The problem is only occurring in Internet Explorer 7 (not FF) but the heights look to be correct i.e. the x-form-field is set to 200px high and the x-fieldset-bwrap is set to 183px high... if I use the IE Dev Toolbar and set either the x-form-field to 210px or the x-fieldset-bwrap to 173px it then renders the fieldset's border correctly.

Any ideas on what I could be doing wrong - I am using a custom theme, but I have tried it without and it still doesn't render correctly in IE.

- mika -
24 Jun 2009, 12:31 PM
Hi,
is there a way to capture the selected display fileds? With getValue() I get the values, but what I'd need was the names that user sees. With getRawValue() I get nothing.

- mika -

Any idea?
Basically my problem is as follows:
I have a form from where I pick up some criteria in order to make a query. That query returns some data which I use on building a report. In that report I would want to add some query criteria info. I can get that info from other "widgets", but from ItemSelector I only get the values behind the human readable fields. An user has no use for them, he/she would only need the human readable stuff; the same stuff that he/she just picked up.

Abisha
27 Jun 2009, 3:55 AM
hai friend!

Use 'rowclick' instead of 'click'

damnos
27 Jun 2009, 1:24 PM
Anybody know what's wrong here? I always cant see the bottom part


Hi,

I am having trouble with the itemSelector, it never draw the lower part (bottom line) of the selection box. It always look like this:
http://img188.imageshack.us/img188/5530/itemselector.jpg (http://img188.imageshack.us/i/itemselector.jpg/)


Even if I shorten it, it still wont draw the bottom line, the lower part of the selection box always dissappear no matter what the msHeight is set to (and I tried different height attribute too)

Code for the item selector:


items:[ new Ext.ux.ItemSelector({

drawUpIcon:false,

id:'j_id9',

height:300,

displayField:'desc',

valueField:'code',

fromLegend:'Available',

msWidth:200,

msHeight:240,

drawDownIcon:false,

drawTopIcon:false,

toLegend:'Selected',

drawBotIcon:false,

fieldLabel:'Item Selection,

labelSeparator:"",

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

fromData:[
[123,'One Hundred Twenty Three'],['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']

],
toData:[
['10', 'Ten']
]

}) ]Any idea what might be wrong?

Thanks

Julian124
29 Jun 2009, 5:52 AM
hi,

i have two problems:
1. that i cant click on anything. the texts are small and unclickable / unchoosable
2. if i dont put in a legend field, nothing happens and i get an error in firebug
that line 55 on multiselect doesnt work: if(!this.legend)fs.el.down('.'+fs.headerCls).remove();
and fs.el is not an element

im using 2.2 and multiselect 3.0

my code is:


<script type="text/javascript" src="../../vendor/ext/ext-all.js"></script>
<script type="text/javascript" src="../../vendor/ext/ext-core.js"></script>

<script type="text/javascript" src="../../vendor/ext/multiselect.js"></script>
<script type="text/javascript" src="../../vendor/ext/DDView.js"></script>
.....

Ext.onReady(function(){
var xsb = new Ext.ux.Multiselect ({

name:"xsbValues",
blankText: "Nothing in here",
dataFields:["value", "text"],
minLength:0,
maxLength:999,
store: storeForCombo,
valueField:"value",
displayField:"text",
width:250,
height:200,
allowBlank:true,
isFormField : true,
legend:"This is a legend",
renderTo: 'xsbDiv'





});


});
....
<div id="xsbDiv"></div>

Abisha
30 Jun 2009, 1:18 AM
Did you changed anything in
DDView.js?

Bobbyj
30 Jun 2009, 4:31 AM
There is a bug in google chrome and firefox with the item selector with ext 2.2.1. The scrollbar is cut off on the 'selected' multi-select list. This is because the panel is rendered before the icons are added to the panel.

Also, for my application there is a bug in 'reset'. I default certain values to be added to the 'selected' multi-select. If you reset the form, they are cleared and moved to the 'available' multi-select. I've changed my application to reset properly to the defaulted lists and added a 'clear' method for the toolbar clear button.

hadi78
3 Jul 2009, 1:07 AM
Hi,

i am using the MultiSelect extension and it works well, but only the MultiSelect.css dosen't get attached to it. Is there something special to do to be able to attach the css file?

jingyang
7 Jul 2009, 1:31 PM
I use Ext 2.2 and got the similar problem. It only happen when the Firefox first time launching. The selected list will be cut a little bit on right side. Seems that give a fixed width for the button panel can fix the problem.
In Multiselect.js , change
var icons = new Ext.Panel({header:false});
to
var icons = new Ext.Panel({header:false, width:20});

sneidar
8 Jul 2009, 1:24 AM
Nice job.Thank you very much. It is useful:D

mahesh.charegaonkar
9 Jul 2009, 5:45 AM
Hi All,
My application is build using extjs2.2. We have a enhancement where we need to use multiselect. I tried multilselct from the link 'http://extjs.com/learn/Extension:Multiselect' of the version 2.2. Its working fine but without scroll bar.
Later i updated it with version 3.0 and its working with scroll bar. However its breaking my old application which build using 2.2 version.
So any one please help me to achive mutiselect scroll bar using extjs2.2 version.

Thanks
Mahesh

tjstuart
9 Jul 2009, 6:45 PM
Hi All,
My application is build using extjs2.2. We have a enhancement where we need to use multiselect. I tried multilselct from the link 'http://extjs.com/learn/Extension:Multiselect' of the version 2.2. Its working fine but without scroll bar.
Later i updated it with version 3.0 and its working with scroll bar. However its breaking my old application which build using 2.2 version.
So any one please help me to achive mutiselect scroll bar using extjs2.2 version.

Thanks
Mahesh

Try overwriting your ux-mselect class with the following


.ux-mselect{
overflow:auto;
background:white;
position:relative; /* for calculating scroll offsets */
zoom:1;
overflow:auto !important;
}

crxtech
31 Jul 2009, 11:07 AM
I want to be able to do some logic based on what record was removed from the toStore. This is what I have so far, I'm just not sure how get the value that was removed? Any ideas?


Ext.getCmp("PRA_Type").toStore.on('remove',
function(record) {
alert(record.data);
});

lemon
3 Aug 2009, 12:59 AM
I am having the same problem as bittercoder (below) - did anyone figured out what's wrong and how to fix it?

I am using ItemSelector 3.0 and ExtJS 2.2.1

Hi all,

Any solution to solve this problem?

thx.

elfantasy
4 Aug 2009, 2:06 AM
Hello everybody.
I'm using Multiselect 3.0 with patch applied, but i'm getting error, dragging items several times from available to selected and back.
Here is stack trace:


Ext.fly(n) has no properties
getDragData(Object browserEvent=Event mouseout button=0 type=mouseout) ddview.js (line 176)
apply() ext-base.js (line 9)
handleMouseDown(Object browserEvent=Event mouseout button=0 type=mouseout) ext-all.js (line 9942)
h(Object browserEvent=Event mouseout button=0 type=mouseout) ext-all.js (line 1629)
getViewWidth(mousedown clientX=0, clientY=0) ext-base.js (line 10)
[Break on this error] dragData.repairXY = Ext.fly(n).getXY();

Can anyone help me on this?
i face this issue also....
when i drag something from right hand side to left hand side and drop it
then you just click on the option you dropped, the error come out...
Can anyone help us on this?

michaelc
21 Aug 2009, 6:48 PM
I found a minor bug item with the multi selector that it allows me to drag and drop across
multiple selectors. IMHO it should not allow this. it can really mess up your data.

I have a page with two separate selectors with two different sets of data but I can drag and drop from one to another.

here is an example case I built from the example file.
any idea on how to stop this ?
short of disabling drag and drop, that causes it to fail in my selenium test for some reason. Sigh ( if it's not one thing it another )


/*
* Ext JS Library 3.0 RC2
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';



var ds = new Ext.data.ArrayStore({
data: [[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});

var ds2 = new Ext.data.ArrayStore({
data: [[123,"One Hundred Twenty Three"],
["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});
/*
* Ext.ux.ItemSelector Example Code
*/
var isForm = new Ext.form.FormPanel({
title: 'ItemSelector Test',
width:700,
bodyStyle: 'padding:10px;',
renderTo: 'itemselector',
items:[{
xtype:"itemselector",
name:"itemselector",
fieldLabel:"ItemSelector",
multiselects: [{
width: 250,
height: 200,
store: ds,
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 200,
store: [["10","Ten"]],
tbar:[{
text:"clear",
handler:function(){
isForm.getForm().findField("itemselector").reset();
}
}]
}],
imagePath: 'images/'
}],

buttons: [{
text: 'Save',
handler: function(){
if(isForm.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
isForm.getForm().getValues(true));
}
}
}]
});

var isForm2 = new Ext.form.FormPanel({
title: 'ItemSelector Test',
width:700,
bodyStyle: 'padding:10px;',
renderTo: 'itemselector',
items:[{
xtype:"itemselector",
name:"itemselector2",
fieldLabel:"ItemSelector",
multiselects: [{
width: 250,
height: 200,
store: ds2,
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 200,
store: [["10","Ten"]],
tbar:[{
text:"clear",
handler:function(){
isForm.getForm().findField("itemselector").reset();
}
}]
}],
imagePath: 'images/'
}],

buttons: [{
text: 'Save',
handler: function(){
if(isForm.getForm().isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
isForm.getForm().getValues(true));
}
}
}]
});

});