격자 편집기에서 콤보 상자를 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 
}}, 

:

는 내가 지금 가지고하는 것은 이것이다 드롭 다운 필드의 상단에 표시 될 때, 나머지 옵션은 현장에서 멀리 표시의 제거 된 옵션을위한 공간은 여전히 ​​할당됩니다.

• 그리드 :

  나는이 사건의에 가게를 필터링하기 위해 노력

• 콤보 beforerender :
• 콤보 렌더링 :
• 콤보를 beforeedit

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가 콤보 상자의 필터를 비우는 것이 아니라는 것입니다. 문제는 필터 작업에 대한 오해에서 비롯된 것입니다. 사실 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 
     } 
    }) 
}