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

[Remy]

Is it possible to use this UX to transform an existing HTML select element?

[beeuser]

Hello,

Is it possible to show me an example of how to bind an itemselector to a form?

I mean I have a grid bound to a form, and when I click on a row in the grid, the form fills in with the data from that row, just like this one:

http://extjs.com/deploy/dev/examples...form-grid.html

But I'd like to know how to fill the data for the itemselector when a row in the grid is selected.

Thanks.

[talshadar]

I've used this extension alot so when it came time for me to have to create my own, I used it as an example. And it seems to work (haven't finished testing yet) but I can't fix the layout properly. Basically I'm trying to get 2 combo boxes to line up beside each other. Nothing was working and the itemSelector version kind of does what I need so I based mine off of it. I'm incluidng my extension code as well as the code to use it. I'm hoping some one can give me a pointer.

DualCombo Extension

Ext.namespace("Ext.ux");

Ext.ux.DualCombo = function(config)
{
    Ext.ux.DualCombo.superclass.constructor.call(this, config);
    //don't think I need to actually add anything else here for it to work
};

Ext.extend(Ext.ux.DualCombo, Ext.form.ComboBox, {

    //basic config and properties
    firstWidth          : 100,
    secondWidth         : 100,
    firstId             : null,
    secondId            : null,
    firstTabIndex       : 1,
    secondTabIndex      : 2,
    firstDataFlds       : null,
    secondDataFlds      : null,
    firstData           : null,
    secondData          : null,
    firstDelimiter      : ',',
    secondDelimiter     : ',',
    firstStore          : null,
    secondStore         : null,
    firstDisplayFld     : null,
    secondDisplayFld    : null,
    firstValueFld       : null,
    secondValueFld      : null,
    firstSortFld        : null,
    secondSortFld       : null,
    firstSortDir        : 'ASC',
    secondSortDir       : 'ASC',
    firstEmptyTxt       : 'Please select ...',
    secondEmptyTxt      : 'Please select ...',
    isFormField         : true,
    fieldLabel          : '',
    selectOnFocus       : true,
    typeAhead           : true,
    
    onRender : function(ct, position) {

        var divFirst, divSecond, table, tr, td;
        
        this.el = ct;
        
        divFirst = this.el.createChild({tag:'div', cls:'.ux-dcombo-first'});
        divSecond = this.el.createChild({tag:'div', cls:'.ux-dcombo-second'});
        
        //table = this.el.createChild({tag:'table'}); //, cls:'ux-mselect-icons'});
        //table.setHeight(this.msHeight);
        //tr = table.createChild({tag: 'tr'});
        //if (tr.dom.tagName.toUpperCase() == 'TBODY') { tr = tr.child('tr'); }

        //td = Ext.get(tr.dom.appendChild(document.createElement('td')));
        //td.dom.vAlign='middle';

        this.FirstCombo = new Ext.form.ComboBox({fieldLabel:this.fieldLabel,id:this.firstId,tabIndex:this.firstTabIndex, 
                        hiddenName:this.hiddenName,displayField:this.firstDisplayFld,valueField:this.firstValueFld,
                        store:this.firstStore,width:this.firstWidth,selectOnFocus:this.selectOnFocus,typeAhead:this.typeAhead,mode:"local",
                        forceSelection: true,triggerAction: "all",emptyText:this.firstEmptyText});

        this.SecondCombo = new Ext.form.ComboBox({fieldLabel:this.fieldLabel,id:this.secondId,tabIndex:this.secondTabIndex, 
                        hiddenName:this.hiddenName,displayField:this.secondDisplayFld,valueField:this.secondValueFld,
                        store:this.secondStore,width:this.secondWidth,selectOnFocus:this.selectOnFocus,typeAhead:this.typeAhead,mode:"local",
                        forceSelection: true,triggerAction: "all",emptyText:this.secondEmptyText});
                        
        this.FirstCombo.render(divFirst);
        this.SecondCombo.render(divSecond);
        
        //this.defaultAutoCreate.name = this.name;
        //this.hiddenName = this.name;
        //this.hiddenField = ct.createChild(this.defaultAutoCreate);

    }

});

Using it:

        cboSStatus = new Ext.ux.DualCombo
        ({
            firstWidth          : 50,
            secondWidth         : 180,
            firstId             : 'cmbId',
            secondId            : 'sStatusID',
            firstTabIndex       : 10,
            secondTabIndex      : 11,
            //firstDataFlds       : null,
            //secondDataFlds      : null,
            //firstData           : null,
            //secondData          : null,
            //firstDelimiter      : ',',
            //secondDelimiter     : ',',
            firstStore          : storeCondition,
            secondStore         : dsStatus,
            firstDisplayFld     : 'condition',
            secondDisplayFld    : 'status',
            firstValueFld       : 'conditionid',
            secondValueFld      : 'code',
            firstEmptyTxt       : 'Condition...',
            secondEmptyTxt      : 'Please select ...',
            isFormField         : true,
            fieldLabel          : 'Status',
            selectOnFocus       : true,
            typeAhead           : true        
        });

It creates 2 combos with the relevant data exactly the way I want - it just doesn't align them - it puts one on top of the other instead of beside each other. I'm hoping some one can catch what I'm missing.

Thanks!!

[NoahK17]

Component: xtype: Multiselect
Version ExtJS: 2.2.1
Browser: IE 6
Layout: Column

Result? Component does not show up at all.

[bobjbain]

Hi,

I've just implemented the ItemSelector using Ext3.0 and am having problems with the sorting.

I am using a pre-loaded DataStoe as my source for the fromList, which works fine (it has 525 items). However when I move an item from the from list to the toList and then back again it always appears at the bottom of the fromList.

I would like to have the items resorted when it's moved back.

I have tried using the fromSortField in the ItemSelector and SortFied in the DataStore but to no avail!!

Anyone have any ideas

[joutsource]

Hi,

Thanks for this great add-on.

I integrated in our application and seems working except an issue of scrollbar position.

We have 10+ items in list and we have restricted height such that it only show 5 items at a time and rest are visible when we scroll.

We are retrieving the selected values from database and then select them using setValue method.

Now the problem is, view is not scrolling down to the position of selected item.

[jsemmanuel]

Hi

I have the following code (using Ext JS Library 3.0.3)

<html>
    <head>
        <title>Welcome</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="css/multiselect.css">
    <script type="text/javascript" src="js/ux/Multiselect.js"></script>
    <script type="text/javascript" src="js/ux/DDView.js"></script>
    <script type="text/javascript" src="multiselect testcase.js"></script>
    </head>
<body>


</body>
</html>

Ext.onReady(function(){
    Ext.QuickTips.init();
    var countryStore=new Ext.data.ArrayStore({
        baseParams:{task:'list_countries'},
        fields:['id','name'],
        mode:'local',
        data:[
        ['il','IL Country'],
        ['ep','EP Country'],
        ['br','BR Country'],
        ['er','ER Country'],
        ['vd','VD Country'],
        ['bf','BF Country'],
        ['gc','GC Country'],
        ['mp','MP Country']
        ],
        autoLoad:true
    })
    var cmpAddForm=new Ext.form.FormPanel({
        bodyStyle:'padding:10px',
        width:500,
        height:200,
        items:[
            new Ext.form.TextField({
                name:'name',
                fieldLabel:'Campaign Name',
                allowBlank: false,
                width:340
            }),
                        {
                            xtype:'multiselect',
                            store:countryStore,
                            displayField:'name',
                            valueField:'id',
                            width:250,
                            height:100,
                            margins:0,
                            name:'geo',
                            fieldLabel:'Target Countries',
                            legend:'Select multiple countries'
                        }
        ]
    })
    var cmpAddWindow=new Ext.Window({
        title:'Add a campaign',
        width:550,
        layout:'fit',
        items:[
            cmpAddForm
        ],
        listeners:{
            show: function (){
                cmpAddForm.getForm().reset();
            }
        },
        closeAction:'hide'
    })
    cmpAddWindow.show(); 
})

It shows fine on chrome, ie and safari but displays incorrectly in firefox 3.5. Screen shots are attached. Notice that in firefox I get an extra scrollbar towards the right.

[danderson]

It shows fine on chrome, ie and safari but displays incorrectly in firefox 3.5. Screen shots are attached. Notice that in firefox I get an extra scrollbar towards the right.

have you found a remedy for this, by chance? the only workaround i've found was to add a 10px margin to the bottom http://www.extjs.com/forum/showthread.php?t=77693

thx.

[celiane]

Hello,

Could you add the following:

- In the xtype: 'multiselect', could you add checkbox for selection (easier than CTRL, more readable)
- In the reload, add a mask which indicates that the load is being
- In the getValue () return names <input name="" and values <input value=""

thank you

[talshadar]

I"m using the item selector with a data source grabbed from a database - one for the From and one for To fields. I can load data into both without a problem but what I'm trying to figure out how to do is load the full list in the From field - but move the selected items (a separate dataset I pull from another table) out of the From field into the To field. I can't find any information on doing this.

Can anyone give a suggestion??