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

[vtswingkid]

LIVE DEMO:
http://members.cox.net/vtswingkid/ex...tiselect2.html

Multiselect:

Itemselector:


I've ported this to 2.x.

There are probably a couple bugs to work out. Have a try at it.

When tjstuart is happy with it, he can add it to the extensions page...

To use this extension in 2.x be sure to include:
multiselect2.css
multiselect2.js
ddview2.js (thanks animal - i put a couple changes in)

good luck!

[ffzhuang]

Hi, vtswingkid:

First thanks for your nice work. It is an important part.

In firebug, I got the following error when I run your demo in Ext2.0-rc1

p.body.first().getWidth is not a function
onRender(Object dom=div#x-form-el-ext-comp-1003.x-form-element, null)Multiselect2.js (line 347)
Component("x-form-el-ext-comp-1003", undefined)ext-all.js (line 58)
getAnchorViewSize(Object initialConfig=Object xtype=itemselector, null, Object dom=form#ext-gen31.x-form id=ext-gen31)ext-all.js (line 71)
ContainerLayout(Object initialConfig=Object labelWidth=75 width=600, Object dom=form#ext-gen31.x-form id=ext-gen31)ext-all.js (line 65)
ContainerLayout(Object initialConfig=Object labelWidth=75 width=600, Object dom=form#ext-gen31.x-form id=ext-gen31)ext-all.js (line 65)
getAnchorViewSize(Object initialConfig=Object labelWidth=75 width=600, Object dom=form#ext-gen31.x-form id=ext-gen31)ext-all.js (line 68)
ContainerLayout()ext-all.js (line 65)
initComponent()ext-all.js (line 64)
initComponent()ext-all.js (line 64)
(no name)()demo.html (line 67)
Observable()ext-all.js (line 12)
EventManager()ext-all.js (line 13)

[IMG]chrome://firebug/content/blank.gif[/IMG]		this.el.setWidth(p.body.first().getWidth());

Any idea for this issue,

Thanks

Fenqiang Zhuang

[vtswingkid]

I am having no luck replicating your error. Make sure the paths to the ext-2.0-rc1 toolset are correct in the multiselect2.html file. Is anyone, else having this problem?

I see a problem with the multiselect example in IE7. The toolbox and the data window are slid to the left a few pixels. Works fine in both item select boxes. Must be a style issue, and ideas for a fix?

[Fede]

Really good extension!

I have a problem. Firebug returns me that message:

this.data has no properties
[Break on this error] return this.data.getRange(start, end);
ext-all-debug.js (line 10650)

	var dsLocalizaciones = new Ext.data.Store({
		url: '/generic/list',
		reader: new Ext.data.JsonReader({
			id: 'id_p',
			root: 'results',
			totalProperty: 'total'
		}, [
			{name: 'id_p', mapping: 'id_p'},
			{name: 'nombre', mapping: 'nombre'}
		])
	});
	dsLocalizaciones.load();
		

	var formItemSelector = new Ext.form.FormPanel({ 
		labelWidth: 75,
		width:600,
		items:[{
			xtype:"itemselector",
			name:"itemselector",
			dataFields: ['id_p', 'nombre'],
			//fromData:[[123,"One Hundred And Twenty Three"],
			//	["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
			//	["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
			//toData:[["10", "Ten"]],
			store: dsLocalizaciones,
			msWidth:200,
			msHeight:200,
			valueField:"id_p",
			displayField:"nombre",
			//imagePath:"/public/javascript/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");

and my Json return is:

{"results":[{"id_p":"3","nombre":"asdf"},{"id_p":"1","nombre":"Federico"},{"id_p":"2","nombre":"jose luis"},
{"id_p":"6","nombre":"migueld"},{"id_p":"5","nombre":"nacho"},{"id_p":"4","nombre":"tuetye"}],
"total":6}

I try all posibilities I think. I have others DataStorse and works perfectly.

Thanks a lot,
Fede

[vtswingkid]

two things...
1) toStore: dsLocalizaciones
2) either create a fromStore: new Ext.SimpleStore.... or provide fromData:[]
good luck

[loveyeah]

Hi, vtswingkid:

First thanks for your nice work. It is an important part.

In firebug, I got the following error when I run your demo in Ext2.0-rc1

p.body.first().getWidth is not a function
onRender(Object dom=div#x-form-el-ext-comp-1003.x-form-element, null)Multiselect2.js (line 347)
Component("x-form-el-ext-comp-1003", undefined)ext-all.js (line 58)
getAnchorViewSize(Object initialConfig=Object xtype=itemselector, null, Object dom=form#ext-gen31.x-form id=ext-gen31)ext-all.js (line 71)
ContainerLayout(Object initialConfig=Object labelWidth=75 width=600, Object dom=form#ext-gen31.x-form id=ext-gen31)ext-all.js (line 65)
ContainerLayout(Object initialConfig=Object labelWidth=75 width=600, Object dom=form#ext-gen31.x-form id=ext-gen31)ext-all.js (line 65)
getAnchorViewSize(Object initialConfig=Object labelWidth=75 width=600, Object dom=form#ext-gen31.x-form id=ext-gen31)ext-all.js (line 68)
ContainerLayout()ext-all.js (line 65)
initComponent()ext-all.js (line 64)
initComponent()ext-all.js (line 64)
(no name)()demo.html (line 67)
Observable()ext-all.js (line 12)
EventManager()ext-all.js (line 13)

[IMG]chrome://firebug/content/blank.gif[/IMG]		this.el.setWidth(p.body.first().getWidth());

Any idea for this issue,

Thanks

Fenqiang Zhuang

I also got this error:p.body.first().getWidth is not a function
please help!!!

[Fede]

After try a bit more! It worked perfectly!

The error was that I only put one DataStore for "toStore" and nothing for "fromStore". You have to put 2 DataStores or 2 Inline data, but never combine it.

My code:

var dsLocalizaciones = new Ext.data.Store({
	url: '/generic/list',
	reader: new Ext.data.JsonReader({
		id: 'id_p',
		root: 'results',
		totalProperty: 'total'
	}, [
		{name: 'id_p', mapping: 'id_p'},
		{name: 'nombre', mapping: 'nombre'}
	])
});
dsLocalizaciones.load();
		
var store = new Ext.data.SimpleStore({
        fields: [
		{name: 'id_p', mapping: 'id_p'},
		{name: 'nombre', mapping: 'nombre'}
        ]
});
	
var formItemSelector = new Ext.form.FormPanel({ 
	labelWidth: 75,
	width:600,
	items:[{
		fieldLabel:"Itemselector",
		xtype:"itemselector",
		name:"itemselector",
		fromStore: dsLocalizaciones,
		toStore: store,
		msWidth:200,
		msHeight:200,
		valueField:"id_p",
		displayField:"nombre",
		toLegend:"Seleccionados",
		fromLegend:"Disponibles",
		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");

In my case I put it in a Form. Declaring a var with type new Ext.ux.ItemSelector, And included into items of the Form.


Greetings,
Fede

[tjstuart]

I've ported this to 2.x.
There are probably a couple bugs to work out. Have a try at it.
When tjstuart is happy with it, he can add it to the extensions page...

Good stuff! I'll have a look as soon as I get a chance. Do you envisage many problems? I'm happy to update the extensions page and host the port if you like.

I'll probably do the following with versions:-

Ext 1.x - keep extension at 2.2 and any bug fixes use 2.2.x
Ext 2.x - use 2.3 and above accordingly

[ChrisM]

Great extension - looks and (almost) works really well.

I've been seeing some slight funnies on Internet Explorer (6). These can be seen in the examples page that vtswingkid posted. When I click in the multiselect boxes, none of the first few items show selected (in the multiselect example I have to click down to 4 before anything selects.

However if I scroll the box down, the items appear selected when I click on them. If I then click on the ones higher up the list they appear selected, until I scroll back up to the top, and try to click on the top item.

Has anyone else seen this, or got any ideas what might be going on? It's doing my head in!

[galdaka]

Libe example please!

Thanks in advance,