the grid filter result is not all on the same page why is that

Hi experts , I have used the example of custom grid filtering but with large data 5 pages , and everything is fine

but when I filter the headers , the filter results are not shown all on the same page , I need to go each page to see if the filter has been made



for example if I have data like this :

page 1:

Name | age | favorite sports

Jon | 22 | football

James | 25 | basketball

Jonson | 24 | Tennis



Page 2:

Name | age | favorite sports

waleed | 22 | swimming

Mark | 16 | football



now if I filter by age and select 22 only :

I should get only in one page like this :



Name | age | favorite sports

Jon | 22 | football

waleed | 22 | swimming



but I am getting two pages , Jon only in the first page , and waleed in the second page

why the result is not coming on the same page



this is my code :







var store = Ext.create('Ext.data.JsonStore', {

// store configs

autoDestroy: true,

model: 'Employee',

proxy: {

type: 'ajax',

url: 'collectEngineeringGridTask',

reader: {

type: 'json',

root: 'data',

// idProperty: 'id',

totalProperty: 'total'

}

},

remoteSort: false,

sorters: [{

property: 'employeeId',

direction: 'ASC'

}],



pageSize: 20

});









var filters = {

ftype: 'filters',

// encode and local configuration options defined previously for easier reuse

encode: encode, // json encode the filter query

local: local // defaults to false (remote filtering)







};









please help me , what I miss here , to show all the result filtered on the same page and if increased more than the page size , it will go to next page



thanks in advance