Question

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

我现在得到的是：

new Vue({
  el: '#app',
  data: {
    message: 'Hi',
  },
  methods: {
    action(event) {
      if (event.shiftKey) {
        this.shiftKeyPressed()
      } else {
        this.shiftKeyNotPressed()
      }
    },
    shiftKeyPressed() {
      console.log('Shift key was pressed.')
    },
    shiftKeyNotPressed() {
      console.log('Shift key was NOT pressed.')
    },
  }
})

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

我试图在任何这些事件上过滤商店：

grid：beforeedit
combo：beforerender
combo：render
combo：afterrender

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

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

有人能在幕后发表意见吗？或者告诉我图片中缺少什么？

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正在清除组合框上的过滤器＆＃39;商店。问题来自于对过滤器工作的误解。实际上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
        }
    })
}

在网格编辑器中对组合框进行Extjs过滤

2 个答案: