Extjs paging toolbar: not able to set start - extjs

Question

I having an issue with paging toolbar.
I want to give the user the option to set the no of results per page(limit). I have a drop-down for it.
I have initialised my page size as 20.
When i set my limit (e.g. 50) from dropdown, n suppose i get 90 results, so on the first page it is showing correctly from 1-50 results but on the next page its showing results from 21-70 instead of 51-90.
So i am not able to reset my page size according to limit set by the dropdown. the start is always picking up the initialised page size.
Any suggestions?
I am attaching my code...
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

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