javascript - ExtJS 使一项组合项变得不同

Question

也许有人可以提供一些想法，如何将项目添加到组合框下拉列表的末尾，并使其“不同”，例如在其前面放置分隔符或将其设为粗体。组合框使用排序(按名称)存储，并且在加载时添加了我想要更改的项目。

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);
            }
        }

    });

组合使用此商店:

    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'
    }
}].

此代码添加了与其他项目类似的项目，并根据排序放置它。

我使用 5.1 ExtJS。

编辑:将项目添加到列表末尾的解决方案。

            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

方法一

在组合的 listConfig 上使用自定义 cls:

listConfig: {
    cls: 'thisComboMakesLastItemDifferent'        
},

然后使用 CSS 使最后一项变得不同:

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

方法2

由于您使用 favorite: true 标记“不同”项目，因此您可以在模板中对其进行编码:

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

然后，再次使用 CSS:

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

请注意，第一个方法的重点是使最后项不同，无论是什么项。第二种方法使特定项目不同(您需要额外的逻辑来确保它是最后一个；您已经有一个)。

查看两种方法的实际效果:https://fiddle.sencha.com/#fiddle/sdj