Панель инструментов пейджинга Extjs: не удалось установить начало

Question

У меня проблема с пейджинговой панелью. Я хочу дать пользователю возможность установить количество результатов на страницу (ограничение). У меня есть раскрывающееся меню. Я установил размер моей страницы как 20. Когда я установил свой лимит (например, 50) из раскрывающегося списка, предположим, что я получаю 90 результатов, поэтому на первой странице он отображается правильно с 1-50 результатов, но на следующей странице его показывая результаты от 21-70 вместо 51-90. Так что я не могу сбросить размер моей страницы в соответствии с лимитом, установленным выпадающим списком. начало всегда подбирает начальный размер страницы. Любые предложения? Я прилагаю мой код ...

linkCheckerUI = { 

pageSize: 20, 
    test:null, 

    getPanel: function(config) { 

     var fields = ["path","jcrObject","type","URL","response"]; 
     var rootpath = null; 
     var term= null; 
     var end=null; 
     var internal_links=null; 
     var external_links=null; 
     var smart_links=null; 
     var videoid_links=null; 
     this.store = new CQ.Ext.data.Store({ 

      proxy: new CQ.Ext.data.HttpProxy({ 

          url: '/bin/linkchecker', 
          method: 'GET' 
          }), 
       reader: new CQ.Ext.data.JsonReader({ 
           "root": "data", 
           "fields": fields, 
           "idProperty":'jcrObject', 
           totalProperty: 'results' 

          }), 
       baseParams: { searchterm: term,startpath: rootpath, endpath: end, 
         internal: internal_links,external: external_links,smart: smart_links,videoid: videoid_links} 


      }); 
     test=this.store; 

     this.store.on('beforeload',function(store, operation,eOpts){ 

     limit= CQ.Ext.getCmp('limit').getRawValue(); 
     limit = (limit=="") ? 15 : limit; 
     pageSize = limit; 
     start=operation.params.start; 
     start = (start==null) ? 0 : start; 
     searchterm = CQ.Ext.getCmp('searchterm').getValue(); 
     startpath = CQ.Ext.getCmp('startpath').getValue(); 
     endpath = CQ.Ext.getCmp('endpath').getValue(); 
     internal = CQ.Ext.getCmp('internal').getValue(); 
     external = CQ.Ext.getCmp('external').getValue(); 
     smart = CQ.Ext.getCmp('smart').getValue(); 
     videoid = CQ.Ext.getCmp('videoid').getValue(); 
     ebroken = CQ.Ext.getCmp('excludebroken').getValue(); 
     ehealthy= CQ.Ext.getCmp('excludehealthy').getValue(); 
     alert(start); 
       operation.params={ 
         searchterm: searchterm ,startpath: startpath , endpath: endpath , 
         internal: internal ,external: external,smart: smart,videoid: videoid,start:start, 
         limit:limit,ebroken: ebroken,ehealthy: ehealthy 
      };},this); 

     this.loadGrid(); 
     this.loadForm(); 

     // create main panel 
     this.panel = new CQ.Ext.Panel({ 
      region: 'center', 
      layout: 'border', 
      margins: '5 5 5 5', 
      height:'100%', 
      border: false, 
      items: [this.form,this.grid] 
     }); 

     // load grid data 
     this.reload(); 

     // return outer panel 
     return this.panel; 
    }, 


    /** 
    * Load form 
    */ 
    loadForm: function() { 
     var searchterm = null; 


     this.form = new CQ.Ext.form.FormPanel({ 
      region: "north", 

      title: "Link Control Center", 
      width: 220, 
      top: 50, 
      height:350, 
      collapsible: false, 
      split: true, 
      parent: this, 
      padding:'10px', 

      items: [ 
        { 
         xtype: 'textfield', 
         name: 'searchterm', 
         id: 'searchterm', 
         fieldLabel:'Search Term', 
         emptyText:'Please enter a search term', 
         width: 583 
        }, 
        { 
         xtype: 'pathfield', 
         name: 'startpath', 
         id: 'startpath', 
         fieldLabel: 'Start Path', 
         allowBlank: false, 
         width: 600 
        }, 
        { 
         xtype: 'pathfield', 
         name: 'endpath', 
         id: 'endpath', 
         fieldLabel: 'End Path', 
         width: 600 

        }, 
        { 
         xtype: 'combo', 
         name: 'limit', 
         id:'limit', 
         fieldLabel: 'Result Display', 
         emptyText:'Select # results per page', 
         typeAhead: true, 
         mode: 'local', 
         triggerAction: 'all', 
         store: [['val1','15'],['val2','100'],['val3','500'],['val4','1000'],['val5','All']] 

        }, 
        { 
         fieldLabel: 'Link Type', 
         xtype: 'checkbox', 
         boxLabel: 'Internal', 
         checked : true, 
         name: 'internal', 
         id:'internal' 

        }, 
        { 
         xtype: 'checkbox', 
         boxLabel: 'External', 
         checked : true, 
         name: 'external', 
         id:'external' 

        }, 
        { 
         xtype: 'checkbox', 
         boxLabel: 'SMART', 
         checked : true, 
         name: 'smart',  
         id:'smart' 

        }, 
        { 
         xtype: 'checkbox', 
         boxLabel: 'Video (Asset ID)', 
         checked : true, 
         name: 'videoid',       
         id: 'videoid' 
        }, 
        { 
         fieldLabel: 'Exclude', 
         xtype: 'checkbox', 
         boxLabel: 'Exclude broken links', 
         name: 'excludebroken', 
         id:'excludebroken' 
        }, 
        { 
         xtype: 'checkbox', 
         boxLabel: 'Exclude healthy links', 
         name: 'excludehealthy', 
         id: 'excludehealthy' 

        } 

       ], 

       buttons:[{ 
        text: 'Submit', 
        handler: function() { 
        searchterm = CQ.Ext.getCmp('searchterm').getValue(); 
        startpath = CQ.Ext.getCmp('startpath').getValue(); 
        endpath = CQ.Ext.getCmp('endpath').getValue(); 
        internal = CQ.Ext.getCmp('internal').getValue(); 
        external = CQ.Ext.getCmp('external').getValue(); 
        smart = CQ.Ext.getCmp('smart').getValue(); 
        videoid = CQ.Ext.getCmp('videoid').getValue(); 
        limit = CQ.Ext.getCmp('limit').getRawValue(); 
        pageSize=15; 
        alert("2"); 
        test.clearFilter(false); 
        if(startpath){ 

         if (endpath.substring(0, startpath.length) == startpath || endpath=="") 
         { 
          test.load(); 
         } 
         else 
         { 
          alert('Specified End Path is not within Start Path node!\nSelect an End Path within and below Start Path hierarchy node'); 

         } 
        } 

        else{ 
         alert('Fill in all required fields before submitting the query'); 
        }   

       } 
         } 

       ] 


     });   
    }, 

    /** 
    * Load grid 
    */ 
    loadGrid: function() { 

    // export to CSV button 
    this.exportCSVButton = new CQ.Ext.Button({iconCls: 'icon-csv', text: 'Export as CSV'}); 
    this.exportCSVButton.setHandler(function() { 
        searchterm = CQ.Ext.getCmp('searchterm').getValue(); 
        startpath = CQ.Ext.getCmp('startpath').getValue(); 
        endpath = CQ.Ext.getCmp('endpath').getValue(); 
        internal = CQ.Ext.getCmp('internal').getValue(); 
        external = CQ.Ext.getCmp('external').getValue(); 
        smart = CQ.Ext.getCmp('smart').getValue(); 
        videoid = CQ.Ext.getCmp('videoid').getValue(); 
        ebroken = CQ.Ext.getCmp('excludebroken').getValue(); 
        ehealthy= CQ.Ext.getCmp('excludehealthy').getValue(); 

        var url = "/bin/linkchecker.csv?searchterm="+searchterm +"&startpath="+startpath +"&endpath="+endpath+ "&internal="+internal +"&external="+external+ 
        "&smart="+smart+"&videoid"+videoid+"&ebroken="+ebroken +"&ehealthy="+ehealthy+"&start=0&limit=-1" ; 

        window.location=(url); 
    }, this); 

    var body = CQ.Ext.getBody(); 
    this.grid = new CQ.Ext.grid.GridPanel({ 
     region: "center", 
     border:false, 
     store: this.store, 
     //parent:this, 
     loadMask: new CQ.Ext.LoadMask(body, {msg: 'Loading please wait...'}), 
     tbar: ['Result List', 
       '->', this.exportCSVButton 
      ], 

      columns: [ 
        {header: "Path", width: 80,dataIndex: 'path', sortable: true},         
        {header: "JCR Object Node", width: 80,dataIndex: 'jcrObject', sortable: true}, 
        {header: "Type", width: 15, dataIndex: 'type', sortable: true}, 
        {header: "URL", width: 70, dataIndex: 'URL', sortable: true}, 
        {header: "Error Type", width:15, dataIndex: 'response', sortable: true, 
              renderer: function(value){ if (value =='200')return '<span style="color:green;">'+value+'</span>'; else return '<span style="color:red;">'+value+'</span>';}} 
        ], 
        renderTo:this.grid, 
      stripeRows: true,   
     viewConfig: { 
      forceFit: true 
     }, 
     bbar: new CQ.Ext.PagingToolbar({ 
      store: this.store, 
      pageSize:this.pageSize, 
      displayInfo: true 

     }), 
     sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true}), 
     iconCls:'icon-grid' 
    }); 
    alert("3"); 
     this.grid.loadMask.show(); 

    }, 

    /** 
    * Reload grid data (reset to first page) 
    */ 
    reload: function() { 
     alert("4"); 
     this.store.load({ baseParams: {start: 0, limit: this.pageSize}}); 
    } 

} 

Answer 1

Попробуйте использовать extraParams на магазине.

this.store.getProxy().extraParams = { start: 0, limit: this.pageSize}; 
this.store.load();