PDA

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



vtswingkid
16 Nov 2007, 2:41 PM
LIVE DEMO:
http://members.cox.net/vtswingkid/ext-ux/multiselect/Multiselect2.html

Multiselect:
http://extjs.com/learn/w/images/1/15/UxMultiselect.jpg
Itemselector:
http://extjs.com/learn/w/images/1/1a/UxItemselector.jpg

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
18 Nov 2007, 7:50 PM
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)

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



Any idea for this issue,

Thanks

Fenqiang Zhuang

vtswingkid
19 Nov 2007, 5:45 AM
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
20 Nov 2007, 2:40 AM
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
20 Nov 2007, 6:19 AM
two things...
1) toStore: dsLocalizaciones
2) either create a fromStore: new Ext.SimpleStore.... or provide fromData:[]
good luck

loveyeah
21 Nov 2007, 12:37 AM
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)

chrome://firebug/content/blank.gif 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
21 Nov 2007, 2:10 AM
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
21 Nov 2007, 2:51 PM
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
23 Nov 2007, 8:55 AM
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
27 Nov 2007, 11:10 AM
Libe example please! ;)

Thanks in advance,

vtswingkid
27 Nov 2007, 11:31 AM
tjstuart: yes please host it.

live demo is up...
http://members.cox.net/vtswingkid/ext-ux/multiselect/Multiselect2.html

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

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

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

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

In short ...

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

conversely

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

elrems
28 Nov 2007, 3:42 AM
[quote=ffzhuang;88390]
In firebug, I got the following error when I run your demo in Ext2.0-rc1



p.body.first().getWidth is not a function
An idea for this issue : upgrade into RC1, i've only this erreur with the beta 2 version!

Elrems

http://www.soubeyrand.info/ext-2.0/examples/ux.multiple/
http://www.soubeyrand.info/ext-2.0/examples/ux.multiple/ux.multiple.zip

John Holmes
6 Dec 2007, 5:12 AM
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);
}

fangzhouxing
7 Dec 2007, 11:02 PM
hi,vtswingkid,thank you for sharing this great work.

I want only a list to reorder the items, how to get this feature from existing Ext.ux.Multiselect/ItemSelector?

Thanks in advance!

sjivan
11 Dec 2007, 11:39 AM
Cool extension. It displays fine in FF but in IE 6, the list is a bit offset until a user clicks on an item.

See attached screenshot.

Sanjiv

tjstuart
11 Dec 2007, 2:51 PM
Yes we are aware of this issue.

Can all questions regarding this extension be posted in the following thread http://extjs.com/forum/showthread.php?t=20071 as it represents the version that is currently being maintained ie. Ext.ux.Multiselect v3.0.

Thanks for your co-operation :)

fangzhouxing
13 Dec 2007, 12:56 AM
hi,vtswingkid,thank you for sharing this great work.

I want only a list to reorder the items, how to get this feature from existing Ext.ux.Multiselect/ItemSelector?

Thanks in advance!

I have modified Ext.ux.Multiselect source code, and get this feature.
(pls see pic).

I hope in the future, Ext.ux.Multiselect can provide such functionality.

lesul
17 Apr 2008, 4:58 AM
Hello,

first at all: thx for the nice work.

I'm trying to use the multiselect with anchorLayout. in FF everything works fine.
But in IE the width and height of the multiselect can grow, but not shrink, so anchorLayout doesn't work right.
Has anybody else try anchorLayout on MultiSelect? Are there any bugfixes for IE?

thx for help.

greets Klaus

lesul
17 Apr 2008, 11:27 PM
I found it.

See here: http://extjs.com/forum/showthread.php?t=27807

Add override the onResize function of multiselect:


Ext.override(Ext.ux.Multiselect, {
onResize: function(w,h){
Ext.ux.Multiselect.superclass.onResize.call(this,w,h);
if(w !== undefined) {
if(typeof w == 'number'){
this.view.el.setWidth(w);
}
}
if(h !== undefined) {
if(typeof h == 'number'){
this.view.el.setHeight(h);
}
}
}
});

Now, it works in IE and FF fine.

jolly_amit
24 Jun 2008, 7:39 AM
Getting error sometimg when trying to drag last item from the "TO" list to back to "FROM" list. In order to replicate this use the default example which comes with ext 2.3 then drag the first item "TEN" from the "selected side" back to the "available side" now do this 2-3 times with the same item "TEN" you will see the error.

jolly_amit
24 Jun 2008, 7:43 AM
Dragging does not work when switching switchToFrom flag to false

nileshpatil
15 Jan 2009, 1:36 AM
I also have same problem... is there any solution for this???




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! :-?

rockys
29 May 2009, 3:26 AM
hi,

How to capture the selected values with itemselector or multiselect at the server side to store in the database usingn php.

rockys
4 Jun 2009, 5:37 AM
hi fede,

i tried to use this code but there is some error.
Here is my code.....



function add_doctor(){
Ext.QuickTips.init();
var doc_win;
var datastore = new Ext.data.Store({
url: 'fetch_practice_multiselect.php',
reader: new Ext.data.JsonReader({
id: 'practice_id',
root: 'results',
totalProperty: 'total'
}, [
{name: 'practice_id', mapping: 'practice_id'},
{name: 'practice_name', mapping: 'practice_name'}
])
});
dsLocalizaciones.load();

var store = new Ext.data.SimpleStore({
fields: [
{name: 'practice_id', mapping: 'practice_id'},
{name: 'practice_name', mapping: 'practice_name'}
]
});

var doc_form = new Ext.form.FormPanel({
standardSubmit: true,
frame:true,
title: '',
border:false,
closeAction: 'hide',
labelAlign:'right',
width: 800,
defaults: {width: 683},
defaultType: 'textfield',
monitorValid:true,
items: [{
fieldLabel: 'Doctor Name',
name: 'doctor_name',
id: 'doctor_name',
allowBlank:false
},
{
fieldLabel: 'Degree',
id: 'degree',
name: 'degree'
},
{
fieldLabel:"Itemselector",
xtype:"itemselector",
name:"itemselector",
fromStore: datastore ,
toStore: store,
msWidth:200,
msHeight:200,
valueField:"practice_id",
displayField:"practice_name",
toLegend:"Selected",
fromLegend:"Practices",
toTBar:[{
text:"Clear",
handler:function(){
var i=doc_form.getForm().findField("itemselector");
i.reset.call(i);
}
}]
}
]
});
//create the window to display the form
if(!doc_win){
doc_win = new Ext.Window({
title: 'Add Doctor',
width: 815,
height: 560,
draggable: false,
plain: true,
modal: true,
closeAction: 'hide',
resizable:false,
//layout:'fit',
items: doc_form,
buttons: [{
text: 'Submit',
handler: function() {
waitTitle:'Processing';
doc_form.getForm().getEl().dom.action = 'add_doctor.php';
doc_form.getForm().getEl().dom.method = 'POST';
doc_form.getForm().submit();
}
},
{
text: 'Cancel',
handler: function() {
doc_form.getForm().getEl().dom.action = 'doctor.php';
doc_win.close();
}
}
]
});
}
doc_win.show();
}




and the error is:
types[config.xtype || defaultType] is not a constructor
chrome://firebug/content/blank.gif return new types[config.xtype || defaultType](config);

Abisha
15 Jun 2009, 11:35 PM
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


hai

I am trying to use your code for put itemselecter. I am loading data from database. But it is bot displaying and showing the error.

Error: this.fields.get(c) is undefined

i am struggling with this from yesterday. But i am not getting solution. Please can you please tel me where i am doing wrong? My code is below.


Ext.onReady(function(){

Ext.QuickTips.init();

var dsLocalizaciones = new Ext.data.Store({
url: '../php/labor_addressbook_new.php?act=select',
reader: new Ext.data.JsonReader({
id: 'email_auto',
root: 'results',
remoteSort:true,
totalProperty: 'total'
}, [
{name: 'email_auto', mapping: 'email_auto'},
{name: 'email_name', mapping: 'email_name'},
{name: 'email_address', mapping: 'email_address'}
])
});
dsLocalizaciones.load();

var store = new Ext.data.SimpleStore({
fields: [
{name: 'email_auto', mapping: 'email_auto'},
{name: 'email_name', mapping: 'email_name'},
{name: 'email_address', mapping: 'email_address'}
]
});


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:"email_address",
displayField:"email_name",
toLegend:"Seleccionados",
fromLegend:"Disponibles",
toTBar:[{
text:"Clear",
//handler:function(){
// var i=formItemSelector.getForm().findField("itemselector");
// i.reset.call(i);
//}
}]
}],

});
formItemSelector.render("itemselector1");



});

aolee
29 Sep 2009, 9:12 PM
[quote=ffzhuang;88390]
In firebug, I got the following error when I run your demo in Ext2.0-rc1



p.body.first().getWidth is not a function
An idea for this issue : upgrade into RC1, i've only this erreur with the beta 2 version!

Elrems

http://www.soubeyrand.info/ext-2.0/examples/ux.multiple/
http://www.soubeyrand.info/ext-2.0/examples/ux.multiple/ux.multiple.zip


upgrade to version above 2.0

maybe but you can also try modifing the code of Multiselect.js

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

to
this.el.setWidth(p.body.first().width);

so far this worked for me

Corina
22 Jun 2010, 11:24 AM
Hello everybody, maybe one of you can help me....i have this code in a Formpanel :

xtype: 'itemselector',
name: 'itemselector',
id: 'itemselector',
fieldLabel: '<spring:message code="measuringDataGroup.titelAnalys"/>',
imagePath: '../smis-js/extjs3/ux/images/',
multiselects: [{
width: 250,
height: 300,
store: analysenStore,
displayField: 'name',
valueField: 'dataId'
},{
width: 250,
height: 300,
store: ownGroupStore,
displayField: 'name',
valueField: 'dataId'
}]

but i had no scrollbars...in the available and selected boxes...

and another question is, how can i filter in the available box? i have in the formpanel a bottombar with a textfield and with that i would like to filter....