Ext.ux.Multiselect/ItemSelector [v2.2]

[sitarlo]

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

[sitarlo]

Ok, so I had to specify mapping=0, mapping=1, etc... in my JsonStore fields config and it works.

[siberian]

In this case I have a store with ~200 items in it.

When applied to a normal listview all display.

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

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

Thanks!
John-

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

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

and the listview version

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

Here is an annotated visual

multiselectissue.png

[Radha.kancharla]

Is ItemSelector widget is in stable release ?

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

[siberian]

Unfortunately its not in the base extjs that I know of which is unfortunate, its a great component!

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

Tx!
John-

[maz56]

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

setValue: function(values) {
        this.reset();
        this.fromMultiselect.setValue(values);
        this.fromTo();
},

It would be great if this was included in the next Ext JS release.

[siberian]

I was just searching for a solution to this. Thanks. You are truly Awesome.

J

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

setValue: function(values) {
        this.reset();
        this.fromMultiselect.setValue(values);
        this.fromTo();
},

It would be great if this was included in the next Ext JS release.

[Radha.kancharla]

Can any one let me know how are you submitting selected values ?

[Antjac]

Hi,

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

How can i do ?

Thx,

[dterle]

Same problem 10 minutes ago.

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

Exemple :

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

And for exemple "zone2" for the second multiselect group.