ExtJS make one combo item different

Question

Maybe someone can give some ideas, how to add item to the end of combobox dropdown, and make it "different" for example put separator before it or make it bold. Combobox uses sorted (by name) store, and on load there is added item which I want to make different.

Ext.define('Plugin.workspace.store.FavouriteCarStore', {
        extend : 'Plugin.workspace.store.CarStore',
        alias : 'store.favouritecar',

        filters : [{
                    property : 'favorite',
                    value : true
                }],

        listeners : {
            load : function(store) {
                var rec = {
                    id : 'showAll',
                    name : 'Show All',
                    favorite : true
                };

                store.add(rec);
            }
        }

    });

combo uses this store:

    tbar : [{
    xtype : 'combo',
    width : 200,
    editable: false,
    store : {
        type : 'favouritecar'
    },

    bind : {
        value : '{workspace}'
    },

    tpl : '<ul class="x-list-plain"><tpl for="."><li role="option" class="x-boundlist-item">{name}</li></tpl></ul>',
    displayTpl : '<tpl for=".">{name}</tpl>',
    listeners : {
        'select' : 'onSelectWorkspace'
    }
}].

This code adds item, which looks like others, and places it depending on sort.

I use 5.1 ExtJS.

EDIT: solution to add item to list end.

            sorters : [{
                    sorterFn : function(rec1, rec2) {
                        if (rec1.id != 'showAll' && rec2.id != 'showAll') {
                            return ((rec1.get('name') > rec2.get('name')) ? 1 : (rec1.get('name') === rec2.get('name') ? 0 : -1));
                        } else {
                            return ((rec1.id == 'showAll') ? 1 : -1);
                        }
                    }
                }],

Answer 1

Method 1

Use a custom cls on the combo's listConfig:

listConfig: {
    cls: 'thisComboMakesLastItemDifferent'        
},

And then use CSS to make the last item different:

.thisComboMakesLastItemDifferent li:last-child {
    color: red;
    font-weight: bold;
}

Method 2

Since you are marking your "different" item with favorite: true, you can code it in the template:

tpl: '<tpl for="."><li role="option" class="x-boundlist-item favorite-{favorite}">{name}</li></tpl>',

And then, again, use CSS:

.favorite-true:before {
    content: 'FAV: '
}

Note that the first method focuses on making the last item different regardless of what item it is. The second method makes specific item different (you need extra logic to make sure it is the last; you have one already).

See both methods in action: https://fiddle.sencha.com/#fiddle/sdj

Answer 2

Maybe you can use store.insert(store.indexOf(store.last()) index, rec) or store.insert(store.count() - 1, rec)?

load : function(store) {
    somewhere.static.setShowAllAsLastRecordOfStore(store);
}

filterchange(store, filters, eOpts) {
    somewhere.static.setShowAllAsLastRecordOfStore(store);
}

sort(store, eOpts) {
    somewhere.static.setShowAllAsLastRecordOfStore(store);
}

setShowAllAsLastRecordOfStore: function(store) {
    var rec = {
            id : 'showAll',
            name : 'Show All',
            favorite : true
        };

    store.remove(store.findRecord('id', 'showAll'));

    store.insert(store.indexOf(store.last()) index, rec);
        // or
    store.insert(store.count() - 1, rec);
}