Hybrid View

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User iomanip's Avatar
    Join Date
    Jul 2008
    Location
    El Salvador
    Posts
    32
    Vote Rating
    0
    iomanip is on a distinguished road

      0  

    Lightbulb 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)


    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: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.7Debugging 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
    Last edited by iomanip; 8 Mar 2012 at 2:06 PM. Reason: The code section disapeared

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,843
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Works fine for me in the example, screen attached.itemselector.jpg
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User iomanip's Avatar
    Join Date
    Jul 2008
    Location
    El Salvador
    Posts
    32
    Vote Rating
    0
    iomanip is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,843
    Vote Rating
    609
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Look at the URL in my screenshot, you can see it's using B3.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User iomanip's Avatar
    Join Date
    Jul 2008
    Location
    El Salvador
    Posts
    32
    Vote Rating
    0
    iomanip is on a distinguished road

      0  

    Default


    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?

  6. #6
    Sencha User iomanip's Avatar
    Join Date
    Jul 2008
    Location
    El Salvador
    Posts
    32
    Vote Rating
    0
    iomanip is on a distinguished road

      0  

    Default


    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