Results 1 to 5 of 5

Thread: Ext.ux.form.ItemSelector bug?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    34
    Vote Rating
    0
      0  

    Default 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
    9,388
    Vote Rating
    499
      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
      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
    9,388
    Vote Rating
    499
      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
      0  

    Default

    Yes that works, thanks.

    Regards,
    Markus

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •