ItemSelector doesn't work in ExtJS 4.1.0-b3 (ext-4.1.0-beta-3)

**iomanip** · 8 Mar 2012 2:03 PM

REQUIRED INFORMATION
Ext version tested:
ExtJS 4.1.0b1

ExtJS 4.1.0b2

ExtJS 4.1.0b3

Browser versions tested against:
Chrome 11 (Windows)

IE9.0.8112.16421

Description:
Ext.ux.form.ItemSelector- Doesn't work in newer version. However the MultiSelect works nice. I've tried with other betas but doesn't work either. Version 4.0.7 Works both NICE

Steps to reproduce the problem:
You can use this example http://dev.sencha.com/deploy/ext-4.0...lect-demo.html just change the ExtJS library to 4.1.0-b3.

The result that was expected:
Item selector must appears and be functional like the example online

The result that occurs instead:
the itemselector doesn't appears

Test Case:
Code:

Code:

Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        
        <script type="text/javascript" lang="Javascript" src="ext-all-debug-w-comments 4.1.0-b3.js"></script>
        
        <script type="text/javascript" src="/ux/layout/MultiSelect.js"></script>
        <script type="text/javascript" src="/ux/layout/ItemSelector.js"></script>
        <script type="text/javascript" src="/ux/form/MultiSelect.js"></script>
        <script type="text/javascript" src="/ux/form/ItemSelector.js"></script>
        
        
        <link href="resources/css/ext-all-gray.css" rel="stylesheet" type="text/css">
        <link href="resources/css/ux/ItemSelector.css" rel="stylesheet" type="text/css" >
        
        <script>
            /*Ext.Loader.setConfig({enabled: true});
            Ext.Loader.setPath('Ext.ux', '../ux');
            Ext.require([
                'Ext.form.Panel',
                'Ext.ux.form.MultiSelect',
                'Ext.ux.form.ItemSelector'
            ]);/*/
    
            Ext.onReady(function(){
    
                /*
                 * Ext.ux.form.MultiSelect Example Code
                 */
                var msForm = Ext.widget('form', {
                    title: 'MultiSelect Test',
                    width: 400,
                    bodyPadding: 10,
                    renderTo: 'multiselect',
                    items:[{
                        anchor: '100%',
                        xtype: 'multiselect',
                        msgTarget: 'side',
                        fieldLabel: 'Multiselect',
                        name: 'multiselect',
    
                        allowBlank: false,
                        // minSelections: 2,
                        // maxSelections: 3,
    
                        store: [[123,'One Hundred Twenty Three'],
                                ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
                                ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
    
                        value: ['3', '4', '6'],
    
                        ddReorder: true
                    }],
    
                    tbar:[{
                        text: 'Options',
                        menu: [{
                            text: 'Set value (2,3)',
                            handler: function(){
                                msForm.getForm().findField('multiselect').setValue(['2', '3']);
                            }
                        },{
                            text: 'Toggle enabled',
                            handler: function(){
                                var m = msForm.getForm().findField('multiselect');
                                if (!m.disabled) {
                                    m.disable();
                                } else {
                                    m.enable();
                                }
                            }
                        },{
                            text: 'Toggle delimiter',
                            handler: function() {
                                var m = msForm.getForm().findField('multiselect');
                                if (m.delimiter) {
                                    m.delimiter = null;
                                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
                                                  'see that values are now submitted as separate parameters.');
                                } else {
                                    m.delimiter = ',';
                                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
                                                  'see that values are now submitted as a single parameter separated by the delimiter.');
                                }
                            }
                        }]
                    }],
    
                    buttons: [{
                        text: 'Clear',
                        handler: function(){
                            var field = msForm.getForm().findField('multiselect');
                            if (!field.readOnly && !field.disabled) {
                                field.clearValue();
                            }
                        }
                    }, {
                        text: 'Reset',
                        handler: function() {
                            msForm.getForm().reset();
                        }
                    }, {
                        text: 'Save',
                        handler: function(){
                            if(msForm.getForm().isValid()){
                                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                                    msForm.getForm().getValues(true));
                            }
                        }
                    }]
                });
    
    
                var ds = Ext.create('Ext.data.ArrayStore', {
                    data: [[123,'One Hundred Twenty Three'],
                        ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
                        ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
                    fields: ['value','text'],
                    sortInfo: {
                        field: 'value',
                        direction: 'ASC'
                    }
                });
    
                /*
                 * Ext.ux.form.ItemSelector Example Code
                 */
                var isForm = Ext.widget('form', {
                    title: 'ItemSelector Test',
                    width: 700,
                    bodyPadding: 10,
                    renderTo: 'itemselector',
    
                    tbar:[{
                        text: 'Options',
                        menu: [{
                            text: 'Set value (2,3)',
                            handler: function(){
                                isForm.getForm().findField('itemselector').setValue(['2', '3']);
                            }
                        },{
                            text: 'Toggle enabled',
                            handler: function(){
                                var m = isForm.getForm().findField('itemselector');
                                if (!m.disabled) {
                                    m.disable();
                                } else {
                                    m.enable();
                                }
                            }
                        },{
                            text: 'Toggle delimiter',
                            handler: function() {
                                var m = isForm.getForm().findField('itemselector');
                                if (m.delimiter) {
                                    m.delimiter = null;
                                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
                                                  'see that values are now submitted as separate parameters.');
                                } else {
                                    m.delimiter = ',';
                                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
                                                  'see that values are now submitted as a single parameter separated by the delimiter.');
                                }
                            }
                        }]
                    }],
    
                    items:[{
                        xtype: 'itemselector',
                        name: 'itemselector',
                        anchor: '100%',
                        fieldLabel: 'ItemSelector',
                        imagePath: '../ux/images/',
    
                        store: ds,
                        displayField: 'text',
                        valueField: 'value',
                        value: ['3', '4', '6'],
    
                        allowBlank: false,
                        // minSelections: 2,
                        // maxSelections: 3,
                        msgTarget: 'side'
                    }],
    
                    buttons: [{
                        text: 'Clear',
                        handler: function(){
                            var field = isForm.getForm().findField('itemselector');
                            if (!field.readOnly && !field.disabled) {
                                field.clearValue();
                            }
                        }
                    }, {
                        text: 'Reset',
                        handler: function() {
                            isForm.getForm().reset();
                        }
                    }, {
                        text: 'Save',
                        handler: function(){
                            if(isForm.getForm().isValid()){
                                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                                    isForm.getForm().getValues(true));
                            }
                        }
                    }]
                });
    
            });
        </script>
    </head>
    <body>
        <div id="multiselect"></div>
        <div id="itemselector"></div>
    </body>
</html>

HELPFUL INFORMATION

Screenshot or Video:
See attached

ExtJS 4.0.7ItemSelector-ExtJS-4.0.7.jpg

ExtJS 4.1.0-b3

ItemSelector-ExtJS-4.1.0-b3.jpg

Debugging already done:
none

Possible fix:
not provided

Additional CSS used:
ext-all.css

ext-all-access.css

ext-all-gray.css

Operating System:
Windows 7

Ubuntu

**evant** · 8 Mar 2012 2:19 PM

Works fine for me in the example, screen attached.itemselector.jpg

**iomanip** · 8 Mar 2012 2:29 PM

The example uses ExtJS 4.0.0, you have to copy and edit the source and change it to ExtJS 4.1.0-b3

**evant** · 8 Mar 2012 2:30 PM

Look at the URL in my screenshot, you can see it's using B3.

**iomanip** · 8 Mar 2012 2:50 PM

My mistake, you're right!. But I don't get it, I cannot make it work. I spend all the day trying. I just took the code from the example, download the JScript they use and use the last ExtJS.

Any idea?

**iomanip** · 9 Mar 2012 5:17 AM

I got it... Looks like the example online is not updated yet as the one in the zip version, because it still on beta. I took a look and they're very different, but in the end, just needed to add a height: 300 to the ItemSelector's form.

Thanks Evant

**delusion** · 15 Mar 2012 9:24 AM

I"m having the same issue,

I've basically copied code from the example to my production path and changed the paths to my own javascript and css paths but the ItemSelector is not displaying properly, the multiselect worked after a little tinkering, but I just can't get the ItemSelector

Code:

Ext.require(['*']);
Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath('Ext.ux', '/javascript/ext-4.1-B3/ux');
Ext.require(['Ext.ux.form.MultiSelect','Ext.ux.form.ItemSelector']);


Ext.onReady(function(){
var ds = Ext.create('Ext.data.ArrayStore', {
        data: [[123,'One Hundred Twenty Three'],
            ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
            ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
        fields: ['code','display'],
        sortInfo: {
            field: 'display',
            direction: 'ASC'
        }
});


var isForm = Ext.widget('form', {
        title: 'ItemSelector Test',
        width: 1000,
        bodyPadding: 10,
        height: 700,
        renderTo: 'itemselector',
        layout: 'fit',
        items:[{
            xtype: 'itemselector',
            name: 'itemselector',
            id: 'itemselector-field',
	    width:700,
	    height:500,
            anchor: '100%',
            fieldLabel: 'ItemSelector',
            imagePath: '../ux/css/images/',
            store: ds,
            displayField: 'display',
            valueField: 'code',
            value: ['3', '4', '6'],
            allowBlank: false,
			msgTarget: 'side'
        }],
        
});
});

results in this. So It's rendering, but not correctly

itemselect.jpg

**iomanip** · 15 Mar 2012 9:29 AM

Use the example include in the Zip File from the Beta Version... That's the updated one!

**PramilaVSL** · 4 Feb 2013 9:54 AM

Hi,

I need to have the Item selector implemented in my project based on the values that are populated from the database in the "Available" part of item selector. However, I tried implementing the same using the example given in the Sencha Examples. The item selector does not render on the gsp page. I've tried checking the plugins and the necessary js files for the example to work and still I see the same result. I've copied the multiselect-demo.js as it as in my sample and tried and nothing additional has either been included or excluded. Kindly suggest....Thanks

ItemSelector doesn't work in ExtJS 4.1.0-b3 (ext-4.1.0-beta-3)

Thread Tools

Search Thread

Display

ItemSelector doesn't work in ExtJS 4.1.0-b3 (ext-4.1.0-beta-3)

ItemSelector doesn't work in ExtJS 4.1.0-b3 (ext-4.1.0-beta-3)

Issue with the Item Selector and Multiselect in 4.1.3

Issue with the Item Selector and Multiselect in 4.1.3

Tags for this Thread