Question

我有一个ExtJs表，可以在服务器上显示并进行分页，远程过滤和数据排序。我的问题是，对于每个发送的请求，都有一个默认的

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

与

一起发送

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

并且当我进行过滤而没有要显示的结果时，它会导致表显示第一个查询。当我使用结果进行过滤并且过滤结果显示一秒钟，然后是＆＃34;默认值＆＃34;第一个要显示的查询的结果。

此外，当我进行远程排序时也会出现这种情况，因为对数据库的任何查询都会在第一个＆＃34;默认＆＃34;之前进行。查询我没有在任何地方定义，因为我的分页设置为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转换为：

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

我怀疑过滤条，因为组合更改事件可以触发过滤，所以：autoLoad-＆gt;第一次请求和第二次请求。>

Re pageSize：如果你想要它35你需要在商店上设置它：pageSize:35

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

Answer 2

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

ExtJs每次提交两次请求

2 个答案: