ExtJS使一个组合项目不同

ExtJS make one combo item different

本文关键字：组合 项目 一个 ExtJS      更新时间：2023-09-26

也许有人可以给一些想法，如何将项目添加到组合框下拉框的末尾，并使其"不同"，例如在它之前放置分隔符或使其加粗。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'
    }
}].

这段代码添加了一个item，它看起来和其他item一样，并根据排序来放置它。

我使用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);
                        }
                    }
                }],

方法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

也许您可以使用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);
}
相关文章：