网格编辑器中组合框的 Extjs 过滤

Question

我有一个带有组合框编辑器的网格。我想根据行记录中的值过滤组合框存储。

我现在得到的是：

editor: {
    xtype: 'combo',
    forceSelection: true,
    store: 'ship.Transportmodes',
    displayField: 'name',
    valueField: 'id',
    queryMode: 'local',
    listeners: {
        expand: function(combo){
            var shipper = combo.up('grid').editingPlugin.activeRecord.get('shipper');
            combo.store.filterBy(function(record){
                console.log(record.get('shippers').indexOf(shipper))
                return record.get('shippers').indexOf(shipper) != -1
            })
        }
    },
    editable: false
}},

这是可行的，但有一个问题：当下拉菜单显示在字段顶部时，其余选项显示在远离字段的位置，仍为已删除选项分配空间。

我尝试根据以下任何事件过滤商店：

• 网格：编辑前
• 组合：渲染前
• 组合：渲染
• 组合：后渲染

在每种情况下，结果如下：商店被正确过滤，但在组合框展开时，过滤器被清除。

我想了解会发生什么。为什么组合框总是在显示选项列表之前清除其商店的过滤器？

任何人都可以提供幕后的见解吗？或者告诉我我在图片中缺少什么？

Answer 1

你可以这样做：
小提琴链接：https://fiddle.sencha.com/#fiddle/1hle

Ext.application({
    name : 'Fiddle',

    simpsonsStore : Ext.create('Ext.data.Store', {
        storeId : 'simpsonsStore',
        fields : ['name', 'email'],
        data : [
            {name : 'Lisa',email : 'lisa@simpsons.com',id:1}, 
            {name : 'Bart', email : 'bart@simpsons.com',id:2}, 
            {name : 'Homer', email : 'homer@simpsons.com',id:3},
            {name : 'Marge',email : 'marge@simpsons.com',id:4}]
    }),

    tagfieldstore : Ext.create('Ext.data.Store', {
        fields : ['tag', 'field'],
        data : [
            {aid:1,tag : 'tag1',field : 'lisa record1'}, 
            {aid:1,tag : 'tag3',field : 'lisa record2'}, 
            {aid:3,tag : 'tag1',field : 'homer record3'}, 
            {aid:3,tag : 'tag3',field : 'homer record4'},
            {aid:2,tag : 'tag1',field : 'bart record1'}, 
            {aid:2,tag : 'tag3',field : 'bart record2'}, 
            {aid:4,tag : 'tag1',field : 'marge record3'}, 
            {aid:4,tag : 'tag3',field : 'marge record4'}]
    }),

    launch : function() {

        Ext.create('Ext.grid.Panel', {
            title : 'Simpsons',
            store : this.simpsonsStore,
            columns : [{
                flex :1 ,
                text : 'Name',
                dataIndex : 'name',
            }, {
                text : 'Email',
                dataIndex : 'email',
                flex : 1
            }, {
                xtype : 'widgetcolumn',
                cellWrap : true,
                text : 'Phone',
                flex : 1,
                widget : {
                    xtype: 'combo',
                    store : this.tagfieldstore,
                    valueField : 'tag',
                    displayField : 'field',
                    growMax : true, 
                    listeners:{
                       expand:function(combo){
                           combo.store.clearFilter();
                          var id = combo.$widgetRecord.data.id;
                           combo.store.filterBy(function(rec){
                                return rec.data.aid == id;
                          });
                       }
                    }

                }
            }],
            flex : 1,
            renderTo : Ext.getBody()
        });
    }
});

Answer 2

我终于想通了。问题不在于 ExtJs 正在清除组合框商店中的过滤器。问题来自对过滤器工作的误解。事实上filterBy 只是暂时过滤存储，但不会将该过滤器保存在存储中。

另一方面，addFilter({filterFn: ...}) 将过滤器添加到商店的 filters 集合中。

使用addFilter 添加到商店的过滤器在呈现该组合框后仍将应用，使用filterFn 应用的过滤器是不稳定的。

现在我可以在网格的beforeedit 事件上添加过滤器，并在edit 和canceledit 上删除它。

最喜欢的

我有一个带有组合框编辑器的网格。我想根据行记录中的值过滤组合框存储。

我现在得到的是：

editor: {
    xtype: 'combo',
    forceSelection: true,
    store: 'ship.Transportmodes',
    displayField: 'name',
    valueField: 'id',
    queryMode: 'local',
    // no listener here
    editable: false
}

控制器：

onBeforeedit: function(edit, e){
    this.getStore('mystore').addFilter(
        {id: 'shipperFilter', 
        filterFn: function(record){
            return e.record.get('shippers').indexOf(this.shipper) != -1
        }
    })
}