1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    34
    Vote Rating
    0
    naggy is on a distinguished road

      0  

    Default Ext.ux.form.ItemSelector bug?

    Ext.ux.form.ItemSelector bug?


    Hi,

    The ItemSelector UX plugin in combination with the anchor layout seems to work differently. Without a height set in the code below, it won't be displayed, which however was the case with ExtJS 4.0.7. Setting the height will display the item selector as expected.

    Regards,
    Markus

    Code:
    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: ['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,
            height: 600,
            renderTo: Ext.getBody(),
            layout: 'fit',
                items: [{
                    xtype: 'fieldset',
                    itemId: 'fieldset',
                    defaultType: 'textfield',
                    padding: 5,
                    defaults: {
                        anchor: '100%',
                        labelWidth: 140
                    },
                    items: [{
                        fieldLabel: "F1"
                    },
                    {
                        fieldLabel: "F2"
                    },
                    {
                        fieldLabel: "F3"
                    },
                    {
                        xtype: 'numberfield',
                        fieldLabel: "F4",
                        minValue: 0
                    },
                    {
                        xtype: 'numberfield',
                        fieldLabel: "F5",
                        minValue: 0
                    },
                    {
                        xtype: 'itemselector',
                        itemId: 'managers',
                        valueField: 'value',
                        //height: 300,
                        displayField: 'text',
                        store: ds,
                        buttons: ['add', 'remove']
                    }]
                }],
                buttons: [
                {
                    text: "B1"
                },
                {
                    text: "B2"
                }]
        });
    });
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <!-- ExtJS -->
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../ext-all.js"></script>
    
    
        <!-- Example -->
        <script type="text/javascript" src="../ux/form/MultiSelect.js"></script>
        <script type="text/javascript" src="../ux/form/ItemSelector.js"></script>
        <script type="text/javascript" src="multiselect-demo.js"></script>
        <link rel="stylesheet" type="text/css" href="../ux/css/ItemSelector.css" />
    </head>
    <body>
    </body>
    </html>

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,999
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please try add: anchor: '100%', to your itemselector instead of height.

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    34
    Vote Rating
    0
    naggy is on a distinguished road

      0  

    Default


    I already tried this without success...
    Regards,
    Markus

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,999
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please try this layout: Tested with RC3

    Code:
    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', '../../extjs4/examples/ux');
    Ext.require([
        'Ext.form.Panel',
        'Ext.ux.form.MultiSelect',
        'Ext.ux.form.ItemSelector',
        'Ext.tip.QuickTipManager'
    ]);
    
    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.define('MyForm', {
        extend: 'Ext.form.Panel',
    
        height: 600,
        width: 700,
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
        bodyPadding: 10,
        title: 'My Form',
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'fieldcontainer',
                        layout: 'form',
                        height: 150,
                        items: [
                            {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            },
                            {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            },
                            {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            },
                            {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            },
                            {
                                xtype: 'textfield',
                                fieldLabel: 'Label'
                            }
                        ]
                    },
                    {
                        xtype: 'itemselector',
                        itemId: 'managers',
                        valueField: 'value',
                        flex: 1,
                        displayField: 'text',
                        store: ds,
                        buttons: ['add', 'remove']
                    }
                ]
            });
    
            me.callParent(arguments);
        }
    
    });
    
    Ext.onReady(function(){
        Ext.create('MyForm', {
            renderTo: Ext.getBody()
        });
     
    });
    Regards,
    Scott.

    f194666.png

  5. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    34
    Vote Rating
    0
    naggy is on a distinguished road

      0  

    Default


    Yes that works, thanks.

    Regards,
    Markus

Thread Participants: 1