ExtJS 使一个组合项目不同

Question

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

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

也许你可以使用 store.insert(store.indexOf(store.last()) index, rec) 或 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);
}

Answer 2

方法一

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

listConfig: {
    cls: 'thisComboMakesLastItemDifferent'        
},

然后使用CSS使最后一项不同：

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

方法二

由于您使用 favorite: true 标记 "different" 项目，您可以在模板中对其进行编码：

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

然后，再次使用 CSS:

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

请注意，第一种方法侧重于使 last 项目不同，而不管 what 项目是什么。第二种方法使 specific 项目不同（您需要额外的逻辑来确保它是最后一个；您已经有一个）。

查看两种方法的实际应用：https://fiddle.sencha.com/#fiddle/sdj

ExtJS 使一个组合项目不同

ExtJS make one combo item different

javascript

combobox

extjs

extjs5