Results 1 to 5 of 5

Thread: Problems using MultiSelect control

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default Problems using MultiSelect control

    This is my first time doing a form, much less using a MultiSelect control.

    When the user clicks a menu item in my grid, I pop up a window/panel with a textfield (where they enter a name for the group they want to create), and I populate a MultiSelect control with values from a store.

    I've cobbled this code together from various samples I could find (multiselect demo, contact us demo, etc). My real code is slightly different (the store is populated from a server, and then I set some initial values), but this sample code demonstrates all the problems I'm seeing.

    Here are the problems I'm seeing:

    1. Putting an ID into any of the fields on the form causes problems when the form is Canceled and then launched again.

    2. The config "labelAlign: 'top'" seems to be ignored for the MultiSelect control. I tried putting it in fieldDefaults and directly on the 'multiselect' control, neither worked.

    3. Is there a way to get the selected items other than calling Form.getValues()?

    4. Is there a way to enforce that at least one item is selected in the MultiSelect control? "allowBlank: 'false'" doesn't do that. Calling Form.isValid() returns TRUE even if allowBlank is false and nothing has been selected. I looked at the isValid() code, and the only check seems to be if an error has been set. Should I set an error instead of pre-selecting the first item?

    Once at least one item is selected, then it's not possible for the user to unselect them all. That's good, but I wish I could enforce this from the time the control is rendered.

    Here's the code:

    Code:
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            'Ext.ux': '../extjs/examples/ux/'
        }
    });
    
    Ext.require('Ext.ux.form.MultiSelect');
    
    Ext.define('MyApp.view.MyForm', {
        extend: 'Ext.form.Panel',
    
        height: 250,
        width: 400,
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
        bodyPadding: 10,
    
        fieldDefaults: {
            labelAlign: 'top',
            labelPad: 10,
            labelStyle: 'font-weight:bold',
            afterLabelTextTpl: '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>',
        },
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'textfield',
                        anchor: '100%',
                        fieldLabel: 'Group Name',
                        allowBlank: false,
                        value: 'NewGroup',
                        name: 'NewGroupTextfield',
                    },
                    {
                        xtype: 'multiselect',
                        store: Ext.create('Ext.data.ArrayStore', { fields: ['field'] }),
                        msgTarget: 'side',
                        fieldLabel: 'Select nodes for group',
                        flex: 1,
                        allowBlank: false,
                        name: 'NewGroupMultiselect',
                        id: 'NewGroupMultiselect',
                        itemId: 'NewGroupMultiselect',
    //                    value: Ext.StoreMgr.lookup('MyStore').first(),
                    },
                    {
                        xtype: 'displayfield',
                        id: 'NewGroupDisplayField',
                        itemId: 'NewGroupDisplayField',
                        fieldLabel: 'Nodes selected',
                        value: 1,
                    },
                ],
                buttons: [
                {
                    text: 'Cancel',
                    handler: function() {
                        this.up('form').getForm().reset();
                        this.up('window').hide();
                    }
                },
                {
                    text: 'Create',
                    handler: function() {
                        var myForm = this.up('form').getForm(),
                            values;
                        
                        if (myForm.isValid()) {
                            // In a real application, this would submit the form to the configured url
                            // this.up('form').getForm().submit();
                            myForm.reset();
                            this.up('window').hide();
                            values = myForm.getValues();
                            Ext.MessageBox.alert('Form is valid with the following values:  <br/>' + values);
                        }
                        else {
                            Ext.MessageBox.alert('Form is invalid.');
                        }
                    }
                },
                ],
            });
    
            me.callParent(arguments);
        }
    
    });
    
    
    Ext.onReady(function(){
    
        function launchPanel() {
            var win;
        
            win = Ext.widget('window', {
                title: 'New Group',
                closeAction: 'hide',
                width: 400,
                height: 400,
                layout: 'fit',
                resizable: true,
                modal: true,
                items: Ext.create('MyApp.view.MyForm')
            });
    
            win.show();
        }
    
        var mainPanel = Ext.widget('panel', {
            renderTo: Ext.getBody(),
            title: 'MultiSelect Test',
            width: 500,
            bodyPadding: 20,
    
            items: [{
                xtype: 'component',
                html: 'Click the button to launch the panel.',
                style: 'margin-bottom: 20px;'
            }, {
                xtype: 'container',
                style: 'text-align:center',
                items: [{
                    xtype: 'button',
                    cls: 'contactBtn',
                    scale: 'large',
                    text: 'Launch Panel',
                    handler: launchPanel
                }]
            }]
        });
    
    });

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    1. Don't use the id config, it's really not needed.

    2. labelAlign : 'top' is working for me when I put it on the multiselect

    3. You can execute getValue method on the actual field.

    4. There isn't a config, you would need to do it yourself.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default

    Thanks for the reply.

    The reason I was going to use an ID, is so I could get access to the control later using Ext.getCmp(ID). Why do you say it's not needed? Accessing a control from another context is a very common thing in UI programming (in my case, I want to check some things when the user clicks OK).

    When I use 'top' for labelAlign, the label is at the BOTTOM of the MultiSelect control. I tried both in fieldDefaults, and directly on the control, same issue either way. Could you post your code that's working?

    I didn't notice getValue() on the field, thanks!

    As for #4, I sorta figured that was the case, but wanted to make sure.


    Brian

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    43
    Answers
    2

    Default

    I figured out the weirdness about why using an ID config for the MultiSelect control caused problems (duplication of things in subsequent invocations): it's because I'm hiding the form/panel/window. I was using the following:

    closeAction: 'hide'

    and the .hide() method. Once I used 'destroy', then subsequent invocations work just fine. That makes some sense, although why an ID triggered it I don't know, because you'd think the duplication would occur no matter what when a form is re-shown.

    But if there's another way to get access to a control other than by using the ID config (and I know about up/down and such, but you don't always have the correct context to get where you're going), that would be useful to know.

  5. #5
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    103

    Default labelAlign: top shows label at bottom

    I have this issue as well, left and right work, but labelAlign: top always shows at the bottom. Using 4.1, and 4.2

Posting Permissions

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