ExtJs 提交每个请求两次

Question

我有一个 ExtJs 表，用于显示和执行分页、远程过滤和服务器上的数据排序。我的问题是每个发送的请求都有一个默认值

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

也与

一起发送

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

当我过滤没有结果显示时，它会导致表显示第一个查询。当我对结果进行过滤并且过滤结果显示一秒钟，然后显示第一个查询的“默认”结果时，也会出现这种行为。

此外，当我进行远程排序时，也会出现这种行为，因为对数据库的任何查询都带有我没有在任何地方定义的第一个“默认”查询，因为我的分页设置为 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

存储是autoLoad、remoteSort、remoteFilter什么翻译成：

1. autoLoad - 实例化后立即发送请求（前 35 条记录）
2. remoteSort - 当商店需要排序时发送请求
3. remoteFilter - 当商店需要过滤时发送请求

我会怀疑过滤栏，因为组合更改事件可以触发过滤，所以：autoLoad->第一个请求和组合->第二个请求。

Re pageSize：如果要35需要在店里设置：pageSize:35

您可能也对Ext Grid MultiSearch Plugin感兴趣。

Answer 2

在 Sencha 文档中进行调查后，我发现在每次执行附加查询时都会调用过滤器函数 clearFilter。