[2.0] Ext.ux.Multiselect/ItemSelector v3.0

[Grolubao]

First of all, it's a great extensio, thanks!

All I wanted was to have like a column where I could sort ascending or descending in each Multiselect, similar to what a grid does.

Does anyone know how to implement this behavior?

[zhegwood]

First of all, it's a great extensio, thanks!

All I wanted was to have like a column where I could sort ascending or descending in each Multiselect, similar to what a grid does.

Does anyone know how to implement this behavior?

If you look at the example (http://www.extjs.com/learn/Extension:Multiselect2), you could add a sort button or link or whatever to the toolbar & then run a sort the store by whichever value you'd like.

[spiderweb]

When you drag an item from available to selected, then back to available, and try to drag it again to selected, an error occurs:
this.store.getAt(selectionsArray[i]) is undefined (On the official ExtJS Example)

after that, if you try double-click or left-arrow-click, you get:
b[d] is undefined
Ext.fly(n) is null

And on the older versions of the itemselector you just get

Ext.fly(n) is null

Can this be fixed?

Edit: found a fix in another thread http://www.extjs.com/forum/showthread.php?t=67304

[aomadevelopers]

Hi,

I need to implement the accessible in itemselector. That is, when the user press any characters in the keyboard, the fieldset/list in the itemselector should get selected according to the character.

The key pressed character should query the values listed and if any text/value starts with the key pressed character, it should select/highlight the particular list.

I would like to know, will it be achievable or how far is this complex to achieve?

Thanks

[nar]

Is it possible to set multiple values at once? Setting a single value is fine, however when I try to issue the a 2nd setValue it will remove the first.



Ext.getCmp('form').getForm().findField("multiselect").setValue("1, Bla");

[Pekka Karalahti]

I am using ItemSelector and I need button that selects all items, i have tried to read and find this from article but i cant so lets just ask ?

[webdeveloper02]

Does anyone have a snippet of code outlining how to best call setValue() for multiselect components as part of the form load/render (so that the selections are displayed when the form/page is ready?)

Attempting to call the same code that works for a button handler at the end of onReady() doesn't render the selections?:



Ext.onReady(function(){
...
...
editForm.render(document.getElementById('editFormPanel'));
...
Ext.getCmp('editForm').getForm().findField("multiselectfield").setValue('1,3');
});

[green-84]

I try set value for itemselector on page http://www.extjs.com/deploy/dev/examples/multiselect/multiselect-demo.html :


var form = Ext.getCmp('ext-comp-1015').getForm();
var field = form.findField('itemselector');

field.setValue('1,2');

console.info(field.getValue());... but value not changed...

[rahulmca1@gmail.com]

How can I make sure that few items can not be removed from selected list to available list of itemselector.

I found a thread with similar question but could not figure out appropriate answer to this question.

Please go through the following thread:
http://www.extjs.com/forum/showthread.php?t=89684&highlight=Itemselector

Thanks a lot :)

[Keshav78]

Hey everyone,

I'm using Multiselect control to display a list of users. At a given time only one user can be selected.

I'm selecting the logged in user in the list when page loads using the setValue function.

Problem that I'm facing is how do I scroll and display the selected value pragmatically.

Thanks very much.

[rahulmca1@gmail.com]

Hello Every One,

Do not want to allow user to move some items from toMultiselect so need to render them disabled.

How can I make sure that few items can not be removed from selected list to available list of itemselector.


Thanks

[Achim74]

Is it possible to set multiple values at once? Setting a single value is fine, however when I try to issue the a 2nd setValue it will remove the first.



Ext.getCmp('form').getForm().findField("multiselect").setValue("1, Bla");


I totally failed setting value(s) to the "to" part of the itemselector. Also it does not really support dynamic data. Using dynamic stores also failed im my case.


Does anyone have a hint ?

[omerio]

I have a general problem with IE and the height of fieldsets, they seem to be longer in IE than in Firefox or Chrome, so I end up having the reduce the height of fieldsets for IE, anyway to fix this I had to do this in MultiSelect.js

fs = new Ext.form.FieldSet({
renderTo:this.el,
title:this.legend,
height: Ext.isIE ? this.height - 50: this.height,
width:this.width,
style:"padding:1px;",
tbar:this.tbar
});

[henryivy]

am loading itemselector on a tabpanel and trying to dblclick on an item, its moved fromSelect to toSelect and vice versa for the first time. after refreshing the tab panel when i try to do the same dblclick its not working, ie... item is not moved fromSelect to toSelect..... and vice versa.



var targets = Ext.dd.DragDropMgr.getRelated(this.dragZone, false);
// Remove instances of this View's DropZone
while (targets.contains(this.dropZone)) {
targets.remove(this.dropZone);
}
// If there's only one other DropZone, and it is owned by a DDView, then drop it in
if ((targets.length == 1) && (targets[0].owningView)) { //
Here the targets length is more than 1.... Its not cleared when i refresh the tab panel.

help me

[siberian]

I posted to an old forum on accident (I think). Excuse the cross post
---
In this case I have a store with ~200 items in it.

When applied to a normal listview all display.

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

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

Thanks!
John-
20983

[Gosa]

I posted to an old forum on accident (I think). Excuse the cross post
---
In this case I have a store with ~200 items in it.

When applied to a normal listview all display.

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

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

Thanks!
John-
20983

I had this problem too (and couple more). You can fix this if you change Multisect.js file like this:

At line 47 change this


fs = new Ext.form.FieldSet({
renderTo:this.el,
title:this.legend,
height:this.height,
width:this.width,
style:"padding:1px;",
tbar:this.tbar
});
to this



fs = new Ext.form.FieldSet({
header: true,
autoScroll: true,
renderTo:this.el,
title:this.legend,
height:this.height,
width:this.width,
style:"padding:1px;",
tbar:this.tbar
});
This change also fix bug "fs.el.down("." + fs.headerCls) is null" when you use default legend configuration for multiselect.

[roque]

After getting the latest patch, this is still happening:
When I drag a data form toMultiselect to fromMultiselect then I click the data,there is an error in firefox
Ext.fly(n) is null in DDView.js
this.store.getAt(selectionsArray[i]) is undefined in Multiselect.js




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

[roque]

Bug in ItemSelector 3.0 patch.
- Drag from the toView to the fromView
- Now try to drag the same item from the fromView to the toView
Error:
Ext.fly(n) is null
chrome://firebug/content/blank.gif dragData.repairXY = Ext.fly(n).getXY(); in DDView

[roque]

There is a bug in the onRender method when you pass a toSortField:


if (!this.toSortField) {
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'});
}


the icons toTopIcon and and upIcon are not created. Then below you try to hide it as:

if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
....

I dont know why you just dont create the icons and hide it based on the draw attributes, but anyway I have changed the code below to avoid the crash:

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

[sothea]

I want to Disable the itemselector when I click on button lock and then it will be enable again when I click on unlock. and when I open the itemselector many times (close and reopen), the double click of itemselector is not work. Please help me!!!!!

new Ext.Panel({
id:'main-panel-export',
autoScroll: true,
layout:'fit',
region:'center',
style:'padding:0px 0px 0px 0px',
tbar:new Ext.Toolbar({
enableOverflow:false,
//autoScroll: true,
hideLabel: false,
items:[{
xtype: 'radiogroup',
id: 'exp_type',
columns: 4,
width:1100,
height:65,
listeners: {change:{fn:function(){
document.export_calc.base.value=Ext.getCmp('radio_sig').getGroupValue();
}}},
items: [new Ext.form.Radio({
boxLabel: 'Export Signalétique ',
name: 'base',
inputValue:'sig',
id:'radio_sig'
}),
new Ext.form.Radio({
boxLabel: 'publipostae mail ',
name: 'base',
inputValue:'mail'
})]
}]
}),
bbar:[{
text:'Exporter vers Excel',
id:'button-export-xls',
iconCls:'page_excel',
handler: function(){
var C1=SelectedNodes("tree1","Cible 1");
var C2=SelectedNodes("tree2","Cible 2");
var C3=SelectedNodes("tree3","Cible 3");
var C4=SelectedNodes("tree4","Cible 4");
var choix_contacts=SelectedNodes("choix","Cible contacts");
var fields=""; //Ext.getCmp('itemselector').getValue();
if(operateur[1]){
var operateur1=operateur[1];
}else{
var operateur1='';
}
if (Ext.getCmp('radio_sig').getGroupValue()=='con' || Ext.getCmp('radio_sig').getGroupValue()=='sig' || Ext.getCmp('radio_sig').getGroupValue()==null){
fields=Ext.getCmp('itemselector').getValue();
}else{
fields=displayFields(Ext.getCmp('radio_sig').getGroupValue());
}
document.export_calc.fields.value = fields;
document.export_calc.nodes_C1.value = C1;
document.export_calc.nodes_C2.value = C2;
document.export_calc.nodes_C3.value = C3;
document.export_calc.nodes_C4.value = C4;
document.export_calc.operateur1.value = operateur1;
document.export_calc.operateur2.value = operateur2;
document.export_calc.operateur3.value = operateur3;
document.export_calc.operateur4.value = operateur4;
document.export_calc.choix_contacts.value = choix_contacts;
document.export_calc.cible_active.value = 1;
document.export_calc.nbre_cibles.value = index;
document.export_calc.base.value = Ext.getCmp('radio_sig').getGroupValue();
document.export_calc.emails_check.value = Ext.getCmp('emails_check').getValue();
document.export_calc.format.value = "XLS";
document.export_calc.submit();
}
},
items:[{
xtype:'panel',
layout:'column',
border:true,
autoHeight: true,
layoutConfig: {columns:2},
// applied to child components
style:'padding:0px 0px 0px 10px',
defaults: {frame:true, width:300, height: 210},
items:[{
title: 'Choix des champs',
xtype:"itemselector",
name:"itemselector",
id:"itemselector",
colspan:2,
width: 605,
fieldLabel:"",
dataFields:["champ", "libelle", "ordre"],
fromData:[],
msWidth:285,
msHeight:200,
valueField:"champ",
displayField:"libelle",
imagePath:"calculateur/",
toLegend:"Champs sélectionnés",
fromLegend:"Champs disponibles",
toData:[['a.societe_id',"SOCIETE ID",1], ["sigle", "SIGLE",3],["stype", "TYPE ETABL",4], ["adresse1,adresse2,adresse3,copost,ville", "ADRESSE",5],
["telephone", "TELEPHONE",6],["fax", "FAX",7]]
}]
}]
})

[sothea]

I have 2 tab. Each tab has the same itemselector that switch each other(When I close tab2, itemselector of tab1 is clear and add new itemselector to tab1). When I close the tab2 the double click itemselector are disable.

items:[{
xtype:'panel',
layout:'column',
border:true,
autoHeight: true,
layoutConfig: {columns:2},
// applied to child components
style:'padding:0px 0px 0px 10px',
defaults: {frame:true, width:300, height: 210},
items:[{
title: 'Choix des champs',
xtype:"itemselector",
name:"itemselector",
id:"itemselector",
colspan:2,
width: 605,
fieldLabel:"",
dataFields:["champ", "libelle", "ordre"],
fromData:[],
msWidth:285,
msHeight:200,
valueField:"champ",
displayField:"libelle",
imagePath:"calculateur/",
toLegend:"Champs sélectionnés",
fromLegend:"Champs disponibles",
toData:[['id',"SOCI ID",1],["raison", "RAISON",2], ],["telephone", "TELEPHONE",6],["fax", "FAX",7],["web", "SITE WEB",8]]
}]
}]

[sothea]

when I open the itemselector many times (close and reopen), the double click of itemselector is not work. Is it bug? I use itemselector V3.0. Please help me!!!!!

new Ext.Panel({
id:'main-panel-export',
autoScroll: true,
layout:'fit',
region:'center',
style:'padding:0px 0px 0px 0px',
tbar:new Ext.Toolbar({
enableOverflow:false,
//autoScroll: true,
hideLabel: false,
items:[{
xtype: 'radiogroup',
id: 'exp_type',
columns: 4,
width:1100,
height:65,
listeners: {change:{fn:function(){
document.export_calc.base.value=Ext.getCmp('radio_sig').getGroupValue();
}}},
items: [new Ext.form.Radio({
boxLabel: 'Export Signalétique ',
name: 'base',
inputValue:'sig',
id:'radio_sig'
}),
new Ext.form.Radio({
boxLabel: 'publipostae mail ',
name: 'base',
inputValue:'mail'
})]
}]
}),
bbar:[{
text:'Exporter vers Excel',
id:'button-export-xls',
iconCls:'page_excel',
handler: function(){
var C1=SelectedNodes("tree1","Cible 1");
var C2=SelectedNodes("tree2","Cible 2");
var C3=SelectedNodes("tree3","Cible 3");
var C4=SelectedNodes("tree4","Cible 4");
var choix_contacts=SelectedNodes("choix","Cible contacts");
var fields=""; //Ext.getCmp('itemselector').getValue();
if(operateur[1]){
var operateur1=operateur[1];
}else{
var operateur1='';
}
if (Ext.getCmp('radio_sig').getGroupValue()=='con' || Ext.getCmp('radio_sig').getGroupValue()=='sig' || Ext.getCmp('radio_sig').getGroupValue()==null){
fields=Ext.getCmp('itemselector').getValue();
}else{
fields=displayFields(Ext.getCmp('radio_sig').getGroupValue());
}
document.export_calc.fields.value = fields;
document.export_calc.nodes_C1.value = C1;
document.export_calc.nodes_C2.value = C2;
document.export_calc.nodes_C3.value = C3;
document.export_calc.nodes_C4.value = C4;
document.export_calc.operateur1.value = operateur1;
document.export_calc.operateur2.value = operateur2;
document.export_calc.operateur3.value = operateur3;
document.export_calc.operateur4.value = operateur4;
document.export_calc.choix_contacts.value = choix_contacts;
document.export_calc.cible_active.value = 1;
document.export_calc.nbre_cibles.value = index;
document.export_calc.base.value = Ext.getCmp('radio_sig').getGroupValue();
document.export_calc.emails_check.value = Ext.getCmp('emails_check').getValue();
document.export_calc.format.value = "XLS";
document.export_calc.submit();
}
},
items:[{
xtype:'panel',
layout:'column',
border:true,
autoHeight: true,
layoutConfig: {columns:2},
// applied to child components
style:'padding:0px 0px 0px 10px',
defaults: {frame:true, width:300, height: 210},
items:[{
title: 'Choix des champs',
xtype:"itemselector",
name:"itemselector",
id:"itemselector",
colspan:2,
width: 605,
fieldLabel:"",
dataFields:["champ", "libelle", "ordre"],
fromData:[],
msWidth:285,
msHeight:200,
valueField:"champ",
displayField:"libelle",
imagePath:"calculateur/",
toLegend:"Champs sélectionnés",
fromLegend:"Champs disponibles",
toData:[['a.societe_id',"SOCIETE ID",1], ["sigle", "SIGLE",3],["stype", "TYPE ETABL",4], ["adresse1,adresse2,adresse3,copost,ville", "ADRESSE",5],
["telephone", "TELEPHONE",6],["fax", "FAX",7]]
}]
}]
})

[titam]

Hi Tidal,

Could you please post your code. I also need a way to filter the data in the from store based on what we key in the search-field.

[tthambi]

Hi,

I have a FormPanel with itemselector component. After the form is rendered, I'm trying to use the Ext.getCmp('itemselector-id') and the object returns does not have fromMultiselect and toMultiselect on it. And I cannot refer it directly (Ext.getCmp('itemselector-id').toMultiselect) that returns undefined. I'm using ExtJs v3.3.1
Please advise...

Thanks in advance...