ExtJs가 모든 요청을 두 번 제출합니다.

Question

서버에서 원격 필터링 및 페이징을 표시하고 수행하는 ExtJs 테이블이 있습니다. 내 문제는 모든 요청이 전송되고 거기에 기본

localhost/request?page=1&start=0&limit=25 

인

localhost/request?page=1&start=0&limit=25&filter=... 

으로뿐만 아니라 전송되는 것입니다 그리고 내가 더으로 필터링하지하고 때 테이블이 첫 번째 쿼리를 표시 가진 결과 표시 할 결과. 이 동작은 결과를 필터링하여 필터링 된 결과가 1 초 동안 표시되고 첫 번째 쿼리의 "기본"결과가 표시 될 때도 나타납니다.

또한이 동작은 데이터베이스에 대한 모든 쿼리가 내 페이징이 35가 아닌 25로 설정되어 있기 때문에 아무데도 정의하지 않은 첫 번째 "기본"쿼리와 함께 추가되기 때문에 원격 정렬도 수행 할 때 나타납니다!

Ext.define('List', { 
extend: 'Ext.grid.Panel', 
alias: 'jobsList', 
     title:'Job List', 
initComponent: function() { 
    var me = this; 
    Ext.define('Browser',{ 
     extend:'Ext.data.Model', 
     idProperty:'var_1', 
     fields:me.buildFields()}); 

    me.store=me.buildStore(); 
    me.columns=me.buildColumns(); 
    me.tbar=me.buildFilterBar(); 
    me.bbar=me.buildPagingBar(); 

    this.callParent(arguments); 
    }, 

    buildStore:function(){ 
     var me = this, store; 
     store = Ext.create('Ext.data.JsonStore', { 
        model: 'Browser', 
        id:store, 
        remoteSort:true, 
        remoteFilter:true, 
        autoLoad: {start: 0, limit: 35}, 
        idProperty:'var_1', 
        proxy: { 
         type: 'rest', 
         api: { 
          read: 'jobs' 
         }, 
         reader: { 
          type: 'json', 
          root: 'jobs', 
          successProperty: 'success', 
          totalProperty: 'total' 
         } 
        }, 


       }); 
     return store; 
    }, 
    buildColumns:function(){ 
    var cols=[ 
       {text: 'Inst', dataIndex: 'var_1', flex: 1, hidden: true,sortable:true}, 
       {text: 'Exec', dataIndex: 'var_2', flex: 1, hidden: true,sortable:true}, 
       {text: 'Name', dataIndex: 'var_3', flex: 1,filterable : true,sortable:true}, 
       {text: 'Param', dataIndex: 'var_4', flex: 1,sortable:true}, 
       {text: 'Sched', dataIndex: 'var_5', flex: 1,sortable:true}, 
       {text: 'Start', dataIndex: 'var_6', flex: 1,sortable:true}, 
       {text: 'End', dataIndex: 'var_7', flex: 1,sortable:true}, 
       {text: 'Stat', dataIndex: 'var_8', flex: 1,sortable:true}, 
       {text: 'Stat2', dataIndex: 'var_9', flex: 1,sortable:true} 
      ]; 
    return cols; 
    }, 

    buildFields:function(){ 
     var fields=[ 
     {name:'var_1',type:'float',convert:null,defaultValue:undefined}, 
     {name:'var_2',type:'float',convert:null,defaultValue:undefined}, 
     {name:'var_3',type:'string',convert:null,defaultValue:undefined}, 
     {name:'var_4',type:'string',convert:null,defaultValue:undefined}, 
     {name:'var_5',type:'date',convert:null,defaultValue:undefined}, 
     {name:'var_6',type:'date',convert:null,defaultValue:undefined}, 
     {name:'var_7',type:'date',convert:null,defaultValue:undefined}, 
     {name:'var_8',type:'string',convert:null,defaultValue:undefined}, 
     {name:'var_9',type:'string',convert:null,defaultValue:undefined},]; 
    return fields; 
    }, 

    buildPagingBar:function(){ 
     var pagingbar=[ 
      { 
       xtype: 'pagingtoolbar', 
       store: this.store, 
       dock: 'bottom', 
       displayInfo: true, 
       emptyMsg: 'No items to display' 
      } 
     ]; 
     return pagingbar; 
    }, 

    buildFilterBar:function(){ 
     var me = this,inst,exec,var_3,param,sched,start,end,jobvar_8,jobExit,bReset; 

     inst= me.buildCombo('InstanceId','var_1'); 
     exec= me.buildCombo('ExecutionId','var_2'); 
     name= me.buildCombo('Name','var_3'); 
     param= me.buildCombo('Parameter','var_4'); 
     sched= me.buildCombo('Scheduled DateTime','var_5'); 
     start= me.buildCombo('Start DateTime','var_6'); 
     end= me.buildCombo('End DateTime','var_7'); 
     status= me.buildCombo('var_8','var_8'); 
     status2= me.buildCombo('var_9','var_9'); 
     bReset= Ext.create('Ext.Button', {text: 'Reset', handler: function() { me.resetCombos();}}); 

     bBar=[inst,exec,var_3,param,sched,start,end,status,status2,bReset]; 

    return bBar; 
    }, 

    buildCombo:function(name,dataIndex){ 
     var me = this,combo; 
     combo = Ext.create('Ext.form.ComboBox',{ 
      queryMode:'remote', 
      id:dataIndex+this.id, 
      hideTrigger:true, 
      store:me.store.collect(dataIndex), 
      emptyText: name+'...', 
      displayField:dataIndex, 
      valueField:dataIndex, 

      flex:1, 
      listeners:{ 
       scope:this, 
       change:function(t,nv,ov,eOpts){ 
        me.filterStore(); 
        } 
      } 
      }); 

     return combo; 
    }, 

    filterStore:function(){ 
     var me = this, i, value, combos = ['var_1','var_2','var_3','var_4','var_5','var_6','var_7','var_8','var_9']; 

     me.store.clearFilter(false); 

     for (i = 0; i < combos.length; i++){ 
      value = Ext.getCmp(combos[i]+me.id).getValue(); 
      if (!Ext.isEmpty(value)){ 
      me.store.filter(combos[i], value, true, false) 
      } 

     } 

    }, 

    resetCombos:function(){ 
     var me = this, i, value, combos = ['var_1','var_2','var_3','var_4','var_5','var_6','var_7','var_8','var_9']; 

      me.store.clearFilter(false); 

      for (i = 0; i < combos.length; i++){ 
       Ext.getCmp(combos[i]+me.id).reset(); 
      } 
    } 
}); 

Answer 1

가게가 번역 무엇을 자동로드, remoteSort, remoteFilter입니다 : 도움말 크게이 문제 : 다음

에 감사 코드입니다

1. 자동로드 - 첫 번째 요청을 (전송 35 레코드)
2. remoteSort - 저장소를 정렬해야 할 때 요청을 보냅니다.
3. remoteFilt 어 - 상점이 필터링해야 할 때 요청을 보냅니다.

콤보 변경 이벤트가 필터링을 트리거 할 수 있기 때문에 필자는 필터 막대를 의심합니다. autoLoad-> first request 및 combo-> second 요청.

다시 pageSize가 : 당신이 35를 원하는 경우에 당신은 상점에 그것을 설정해야합니다 pageSize:35

또한 Ext Grid MultiSearch Plugin에 관심이있을 수 있습니다.

Answer 2

Sencha 문서에서 조사한 결과, 필터 함수 clearFilter가 추가 쿼리를 수행 할 때마다 호출된다는 것을 발견했습니다.