1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    28
    Vote Rating
    1
    desp is on a distinguished road

      0  

    Default Unanswered: Grouping in Combobox

    Unanswered: Grouping in Combobox


    Hello,
    wondering is it possible to make some combobox values unselectable? I need some grouping here, bolded group names should not be selectable.

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,120
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    The compobox has a property tpl. You can create your own template wich renders the picker.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    28
    Vote Rating
    1
    desp is on a distinguished road

      0  

    Default


    I tried this template:

    Code:
    tpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            "<tpl if=\"type == 'group'\">",
                '<div style="padding: 2 0 2 2"><b>{name}</b></div>',
            '<tpl else>',
                '<div class="x-boundlist-item" style="padding:1 0 1 12">{name}</div>',
            '</tpl>',
        '</tpl>'
    )
    In template code I use if to check if is current item text is group name, so I know I can not use x-boundlist-item class here, cause it must be not selectable. It renders good, however something goes wrong when I try to select items - combobox displays not same value as selected, probably of index mismatch or something. Need help here!

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    28
    Vote Rating
    1
    desp is on a distinguished road

      0  

    Default


    I got temporary and trivial workaround with event:

    Code:
    listeners: {
        beforeselect: function(cb, record) {
            if (record.get('type') == 'group') {
                return false;
            }
    
            return true;
        }
    }
    But I would like to remove :hover effect on them, so more xtemplate way solution is needed here.

Thread Participants: 1