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

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

Thread Tools

Search Thread

Display

Hybrid View

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)

Tags for this Thread