Ext.ux.form.ItemSelector bug?

**naggy** · 11 Apr 2012 8:00 AM

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>

**scottmartin** · 11 Apr 2012 10:20 AM

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

Regards,
Scott.

**naggy** · 11 Apr 2012 10:34 AM

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

**scottmartin** · 11 Apr 2012 1:33 PM

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

**naggy** · 12 Apr 2012 5:42 AM

Yes that works, thanks.

Regards,
Markus

Ext.ux.form.ItemSelector bug?

Thread Tools

Search Thread

Display

Hybrid View

Ext.ux.form.ItemSelector bug?

Ext.ux.form.ItemSelector bug?