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

[jolly_amit]

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]

Dragging does not work when switching switchToFrom flag to false

[nileshpatil]

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]

hi,

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

[rockys]

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
[IMG]chrome://firebug/content/blank.gif[/IMG] return new types[config.xtype || defaultType](config);

[Abisha]

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]

[QUOTE=elrems;92336]

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/e...s/ux.multiple/
http://www.soubeyrand.info/ext-2.0/e...x.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]

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....