Results 1 to 4 of 4

Thread: EXT JS 3.2.1 Combo box

  1. #1
    Sencha User
    Join Date
    Apr 2016
    Posts
    4

    Default EXT JS 3.2.1 Combo box

    Hi Everyone,

    Actually I wanted little help from you all, I am using Ext JS 3.2.1 version.
    I am using one combo box where I can select a single value but now I want to select multiple values from that combo box. After researching about combo boxes, I had got one property 'multiSelect' which need to be set to 'true'. But this property is supporting only for versions above 4.0.

    Below is my code for Combo Box:
    border: false,
    columnWidth: .75,
    items: [{
    allowBlank: false,
    anchor: '100%',
    displayField: 'Name',
    fieldLabel: 'Name',
    id: 'RoleEditor.form.Name',
    itemCls: 'required',
    labelSeparator: ': *',
    listeners: {
    'specialkey': {
    fn: function (sender, e) {
    if (e.getKey() == Ext.EventObject.ENTER) {
    var button = Ext.getCmp('RoleEditor.form.buttonSubmit');
    if (!Ext.isEmpty(button)) {
    button.handler(button, e);
    }
    }
    },
    scope: this
    }
    },
    mode: 'local',
    name: 'Name',
    store: CDBAdmin.AuthorizationsForGroup,
    triggerAction: 'all',
    typeAhead: true,
    xtype: 'combo'
    }],
    layout: 'form'

    Even I have seen that List View can work in this case, So can anyone guide how can this code be replaced to support List View instead of Combo box if there is no way out to fix this combo box.

    Let me know if any additional data is required to solve this query. Thanks in advance!

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    This thread has a couple of options.
    https://www.sencha.com/forum/showthread.php?67647

  3. #3
    Sencha User
    Join Date
    Apr 2016
    Posts
    4

    Default Solution

    Thanks Gary for the link!!!

    I replaced that Combo Code with the ListView and following is the code that helped me.

    Posting here so it can help others:

    Code:
    {
        anchor: '100%',
        border: false,
        items: [{
            border: false,
            columnWidth: .75,
            items: [{
                allowBlank: false,
                anchor: '100%',
                //displayField: 'Name', 
                //fieldLabel: 'Name', 
                id: 'RoleEditor.form.Name',
                //itemCls: 'required', 
                //labelSeparator: ': *', 
                listeners: {
                    'specialkey': {
                        fn: function(sender, e) {
                            if (e.getKey() == Ext.EventObject.ENTER) {
                                var button = Ext.getCmp('RoleEditor.form.buttonSubmit');
                                if (!Ext.isEmpty(button)) {
                                    button.handler(button, e);
                                }
                            }
                        },
                        scope: this
                    }
                },
                mode: 'local',
                name: 'Name',
                store: CDBAdmin.AuthorizationsForGroup,
                triggerAction: 'all',
                typeAhead: true,
                multiSelect: true,
                emptyText: 'No Authorizations to display',
                reserveScrollOffset: true,
                columns: [{
                    header: 'Authorizations',
                    width: .75,
                    dataIndex: 'Name'
                }],
                xtype: 'listview'
            }, {
                displayField: 'Name',
                fieldLabel: 'Name',
                itemCls: 'required',
                labelSeparator: ': *',
                id: 'images-view',
                width: 420,
                height: 250,
                collapsible: true,
                collapsed: true,
                layout: 'fit',
                title: 'Expand to Select the Authorizations',
                items: 'RoleEditor.form.Name',
                xtype: 'panel',
                renderTo: document.body
            }],
            layout: 'form',
        }]
    }
    Thanks...
    Last edited by Gary Schlosberg; 20 Apr 2016 at 3:31 PM. Reason: code cleanup

  4. #4
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Great to hear that you've gotten it working, and thanks for sharing your solution with the community.

Similar Threads

  1. Replies: 4
    Last Post: 26 May 2017, 11:33 AM
  2. Replies: 1
    Last Post: 31 Jul 2014, 4:18 PM
  3. Replies: 2
    Last Post: 17 Jul 2014, 11:03 AM
  4. Replies: 7
    Last Post: 8 Aug 2012, 10:50 AM
  5. Replies: 1
    Last Post: 20 May 2008, 4:22 PM

Tags for this Thread

Posting Permissions

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