Extjs在網格編輯器中對組合框進行過濾

我有一個帶有組合框編輯器的網格。我想根據行記錄中的值過濾組合框。Extjs在網格編輯器中對組合框進行過濾

我現在得到的是這樣的：

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 
}},

這是工作，但有一個問題：當下拉列表中顯示的字段的頂部，其餘選項從外地遠處出現時，已刪除選項的空間仍被分配。

我試圖篩選存儲在任何這些事件：

格：beforeedit
組合：beforerender
組合：渲染
組合：一個AfterRender

在每種情況下，結果如下：商店被正確過濾，但在組合框展開的時間，過濾器被清除。

我想了解會發生什麼。爲什麼組合框在顯示選項列表之前總是清除其商店的過濾器？

任何人都可以透露幕後的情況嗎？或者告訴我我在畫面中缺少的是什麼？

來源

2016-09-30 Lorenz Meyer

你可以試試['clearFilterOnBlur：FALSE'（http://docs.sencha.com/extjs/4.2 .2 /＃！/ api/Ext.form.field.ComboBox-cfg-clearFilterOnBlur），以便過濾器不被清除。 – Alexander

@alexander謝謝，我會嘗試。我看到了這個配置，但我認爲它只會在模糊組合時改變行爲。 –

@alexander不，不幸的是這並沒有幫助。 clearFilterOnBlur僅適用於鍵入使用的過濾器。 –

你可以這樣做：
小提琴鏈接：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 : '[email protected]',id:1}, 
     {name : 'Bart', email : '[email protected]',id:2}, 
     {name : 'Homer', email : '[email protected]',id:3}, 
     {name : 'Marge',email : '[email protected]',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() 
    }); 
}

}）;

來源

2016-09-30 12:20:16

你的小提琴不適用於ExtJs 4.2。看起來Extjs 6不再有我遇到的問題。這意味着我真的應該努力升級。 –

在Extjs 4.2中，grid面板的widgetcolumn不起作用。你需要更新你的extjs版本。 –

我會更新，但這不是直接的選擇。我認爲這需要一週的時間，因爲這個應用程序非常重要，並且實現了非Ext 4.2特有的功能，但現在是Ext 6中的本地功能。 –

最後我想通了。問題不在於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 
     } 
    }) 
}

來源

2016-10-01 06:52:00

Extjs在網格編輯器中對組合框進行過濾

回答

相關問題