Paging Issue in Ext js. I am having trouble with paging. My start is not changing

[sudhavani]

Ext.onReady(function(){

/***********************************************
* Start Date
***********************************************/
var startDateField = Ext.widget("datefield", {
renderTo: "startDateFld",
width: 95,
allowBlank: false,
maxValue: new Date(),
value: new Date(new Date().getTime() - 86400000), //yesterday
cls: 'middle'
});

/***********************************************
* End Date
***********************************************/
var endDateField = Ext.widget("datefield", {
renderTo: "endDateFld",
width: 95,
allowBlank: false,
maxValue: new Date(),
value: new Date(),
cls: 'middle'
});
var storeStatusJson;

/***********************************************
* Search Button
***********************************************/
/*Ext.widget("button",{
renderTo: 'searchBtn',
text: 'Search',
cls: 'srchBtn',
//href: 'mainStatus.do',
handler: function(){
//window.location="mainStatus.do";
var searchCustomerJsonData = {
StartDate: startDateField.getValue(),
EndDate: endDateField.getValue()
};
storeStatusJson = searchCustomerJsonData;

//reset back to page 1
// mainStoreStatusGrid.getStore().currentPage = 1;
mainStatusStore.load({
jsonData: storeStatusJson,
copyFiltersToJson: true,
copySortToJson: true
});
},
listeners: {
click: function(){
// if (validateFn()) {
var searchCustomerJsonData = {
StartDate: startDateField.getValue(),
EndDate: endDateField.getValue()
};
storeStatusJson = searchCustomerJsonData;

//reset back to page 1
// mainStoreStatusGrid.getStore().currentPage = 1;
mainStatusStore.load({
jsonData: storeStatusJson,
copyFiltersToJson: true,
copySortToJson: true
});
}
// }
}
}); */
/***********************************************
* Search Button
***********************************************/
/*Ext.widget("button",{
renderTo: 'searchBtn',
text: 'Search',
cls: 'srchBtn',
//href: 'mainStatus.do',
handler: function(){
//window.location="mainStatus.do";
//TODO do something, remove href
mainStatusStore.clearFilter();
mainStatusStore.load({
params:{
StartDate: startDateField.getValue(),
EndDate: endDateField.getValue()
}
});
}
});*/

/***********************************************
* New Conversion Button
***********************************************/
Ext.widget("button",{
renderTo: 'newConversionBtn',
text: 'New Conversion',
cls: 'srchBtn',
handler: function(){
window.location="newconversion.do";
}
});




/***********************************************
* Store Status Grid
***********************************************/
Ext.define('StoreStatus', {
extend: 'Ext.data.Model',
fields: ["storeNumber", "rpmsite", "storeName", "user",
{name: "startTime", type: "date", dateFormat: 'time'},
"status",
{name: "endTime", type: "date", dateFormat: 'time'},
{name: "statusId", type: "number"}]
});

var itemsPerPage = 5;

var mainStatusStore = Ext.create("Ext.data.Store", {
pageSize: itemsPerPage,
model: 'StoreStatus',
proxy: {
type: 'ajax',
url : 'storeListStatus.json',
extraParams: {
StartDate: startDateField.getValue(),
EndDate: endDateField.getValue()
},
reader: {
type: 'json',
root: 'items',
totalProperty: 'total'
}
},
listeners: {
beforeload: function(store, operation){
operation.jsonData = storeStatusJson;
operation.copyFiltersToJson = true; //copies "start" and "limit" params to JSON
operation.copySortToJson = true; //copies "sort" params to JSON
}
}
});

/*mainStatusStore.load({
params:{
start:0,
limit: itemsPerPage
}
});*/

var mainStoreStatusGrid = Ext.create('Ext.grid.Panel', {
id: 'mainStatusGridPanel',
title: 'Store Status',
store: mainStatusStore,
renderTo: 'mainStatusTable',
width: '100%',
cls: 'grid',
scroll: 'vertical',
layout: 'fit',
viewConfig: {
trackOver: false,
stripeRows: false,
getRowClass: function(record, rowIndex, rowParams, store){
if(!record) return '';
return getStatusPrefix(record.data.statusId) + 'Row';
}
},
columns: [
{header: 'Store Number', dataIndex: 'storeNumber'},
{header: 'RPM Site', dataIndex: 'rpmsite'},
{header: 'Store Name', dataIndex: 'storeName', flex: 4,
renderer: function(value, meta, record){

if (record.data.status == 'ERROR' || record.data.status == 'Aborted'){
return Ext.String.format(value, record.data.storeNumber, record.data.status,record.data.storeName);
} else {

return Ext.String.format('<a href="detailedStatus.do?storeInfo={1} - {3}&status={2}">{0}</a>',
value, record.data.storeNumber, record.data.status,record.data.storeName);
}
}
},
{header: 'Initiated By', dataIndex: 'user', flex: 2},
{header: 'Start Time', dataIndex: 'startTime',flex: 5, xtype: 'datecolumn', format: 'Y-m-d h:i A'},
{header: 'Status', dataIndex: 'status',flex: 3,
renderer: function(value, meta, record){

var css = getStatusPrefix(record.data.statusId) + "Label";

if (value == 'ERROR'){
return Ext.String.format('<span class="{0}">{1}</span>',
css, value, record.data.storeNumber);
} else {
return Ext.String.format('<span class="{0}">{1}</span>', css, value);
}
}
},
{header: 'End Time', dataIndex: 'endTime',flex: 6, xtype: 'datecolumn', format: 'Y-m-d h:i A'},
{flex: 7, sortable: false}
],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: mainStatusStore,
displayInfo: true
})
});

/**
* Get the remaining space of the viewport for the grid height
*/
function getGridHeight(){
return getRemainingHeight("mainStatusGridPanel", ["mainHeader", "header"]);
}

//Have to set the grid height after the widget is created
//so it can grab the padding values for the grid
mainStoreStatusGrid.setHeight(getGridHeight());

Ext.EventManager.onWindowResize(function(){
mainStoreStatusGrid.setHeight(getGridHeight());
mainStoreStatusGrid.forceComponentLayout();
}, mainStoreStatusGrid);

/***********************************************
* Search Button
***********************************************/
Ext.widget("button",{
renderTo: 'searchBtn',
text: 'Search',
cls: 'srchBtn',
//href: 'mainStatus.do',
/*handler: function(){
//window.location="mainStatus.do";
var searchCustomerJsonData = {
StartDate: startDateField.getValue(),
EndDate: endDateField.getValue()
};
storeStatusJson = searchCustomerJsonData;

//reset back to page 1
// mainStoreStatusGrid.getStore().currentPage = 1;
mainStatusStore.load({
jsonData: storeStatusJson,
copyFiltersToJson: true,
copySortToJson: true
});
},*/
listeners: {
click: function(){
// if (validateFn()) {
var searchCustomerJsonData = {
StartDate: startDateField.getValue(),
EndDate: endDateField.getValue()
};
storeStatusJson = searchCustomerJsonData;

//reset back to page 1
// mainStoreStatusGrid.getStore().currentPage = 1;
mainStatusStore.load({
jsonData: storeStatusJson,
copyFiltersToJson: true,
copySortToJson: true
});
}
// }
}
});
});

[flanders]

First of all, please wrap your code in CODE tags, so its readable.

Secondly, it looks like you are not using the proper methods for paging but rather send some internal variables by hand. Furthermore, you are loading the data from a json file so you always get the same (full) result. No mather what page the store requrests, it will always display the records received from the server side. So if you ask for recrods 1 to 20 but get the first 50, your store will contain the first 50 records.

[sudhavani]

Ext.onReady(function() {

            /*******************************************************************
             * Start Date
             ******************************************************************/
            var startDateField = Ext.widget("datefield", {
                renderTo : "startDateFld",
                width : 95,
                allowBlank : false,
                maxValue : new Date(),
                value : new Date(new Date().getTime() - 86400000), // yesterday
                cls : 'middle'
            });

            /*******************************************************************
             * End Date
             ******************************************************************/
            var endDateField = Ext.widget("datefield", {
                renderTo : "endDateFld",
                width : 95,
                allowBlank : false,
                maxValue : new Date(),
                value : new Date(),
                cls : 'middle'
            });
            var storeStatusJson;

            /*******************************************************************
             * Search Button
             ******************************************************************/
            /*
             * Ext.widget("button",{ renderTo: 'searchBtn', text: 'Search', cls:
             * 'srchBtn', //href: 'mainStatus.do', handler: function(){
             * //window.location="mainStatus.do"; var searchCustomerJsonData = {
             * StartDate: startDateField.getValue(), EndDate:
             * endDateField.getValue() }; storeStatusJson =
             * searchCustomerJsonData;
             * 
             * //reset back to page 1 //
             * mainStoreStatusGrid.getStore().currentPage = 1;
             * mainStatusStore.load({ jsonData: storeStatusJson,
             * copyFiltersToJson: true, copySortToJson: true }); }, listeners: {
             * click: function(){ // if (validateFn()) { var
             * searchCustomerJsonData = { StartDate: startDateField.getValue(),
             * EndDate: endDateField.getValue() }; storeStatusJson =
             * searchCustomerJsonData;
             * 
             * //reset back to page 1 //
             * mainStoreStatusGrid.getStore().currentPage = 1;
             * mainStatusStore.load({ jsonData: storeStatusJson,
             * copyFiltersToJson: true, copySortToJson: true }); } // } } });
             */
            /*******************************************************************
             * Search Button
             ******************************************************************/
            /*
             * Ext.widget("button",{ renderTo: 'searchBtn', text: 'Search', cls:
             * 'srchBtn', //href: 'mainStatus.do', handler: function(){
             * //window.location="mainStatus.do"; //TODO do something, remove
             * href mainStatusStore.clearFilter(); mainStatusStore.load({
             * params:{ StartDate: startDateField.getValue(), EndDate:
             * endDateField.getValue() } }); } });
             */

            /*******************************************************************
             * New Conversion Button
             ******************************************************************/
            Ext.widget("button", {
                renderTo : 'newConversionBtn',
                text : 'New Conversion',
                cls : 'srchBtn',
                handler : function() {
                    window.location = "newconversion.do";
                }
            });

            /*******************************************************************
             * Store Status Grid
             ******************************************************************/
            Ext.define('StoreStatus', {
                extend : 'Ext.data.Model',
                fields : [ "storeNumber", "rpmsite", "storeName", "user", {
                    name : "startTime",
                    type : "date",
                    dateFormat : 'time'
                }, "status", {
                    name : "endTime",
                    type : "date",
                    dateFormat : 'time'
                }, {
                    name : "statusId",
                    type : "number"
                } ]
            });

            var itemsPerPage = 5;

            var mainStatusStore = Ext.create("Ext.data.Store", {
                pageSize : itemsPerPage,
                model : 'StoreStatus',
                proxy : {
                    type : 'ajax',
                    url : 'storeListStatus.json',
                    extraParams : {
                        StartDate : startDateField.getValue(),
                        EndDate : endDateField.getValue()
                    },
                    reader : {
                        type : 'json',
                        root : 'items',
                        totalProperty : 'total'
                    }
                },
                listeners : {
                    beforeload : function(store, operation) {
                        operation.jsonData = storeStatusJson;
                        operation.copyFiltersToJson = true; // copies "start"
                                                            // and "limit"
                                                            // params to JSON
                        operation.copySortToJson = true; // copies "sort"
                                                            // params to JSON
                    }
                }
            });

            /*
             * mainStatusStore.load({ params:{ start:0, limit: itemsPerPage }
             * });
             */

            var mainStoreStatusGrid = Ext
                    .create(
                            'Ext.grid.Panel',
                            {
                                id : 'mainStatusGridPanel',
                                title : 'Store Status',
                                store : mainStatusStore,
                                renderTo : 'mainStatusTable',
                                width : '100%',
                                cls : 'grid',
                                scroll : 'vertical',
                                layout : 'fit',
                                viewConfig : {
                                    trackOver : false,
                                    stripeRows : false,
                                    getRowClass : function(record, rowIndex,
                                            rowParams, store) {
                                        if (!record)
                                            return '';
                                        return getStatusPrefix(record.data.statusId)
                                                + 'Row';
                                    }
                                },
                                columns : [
                                        {
                                            header : 'Store Number',
                                            dataIndex : 'storeNumber'
                                        },
                                        {
                                            header : 'RPM Site',
                                            dataIndex : 'rpmsite'
                                        },
                                        {
                                            header : 'Store Name',
                                            dataIndex : 'storeName',
                                            flex : 4,
                                            renderer : function(value, meta,
                                                    record) {

                                                if (record.data.status == 'ERROR'
                                                        || record.data.status == 'Aborted') {
                                                    return Ext.String
                                                            .format(
                                                                    value,
                                                                    record.data.storeNumber,
                                                                    record.data.status,
                                                                    record.data.storeName);
                                                } else {

                                                    return Ext.String
                                                            .format(
                                                                    '<a href="detailedStatus.do?storeInfo={1} - {3}&status={2}">{0}</a>',
                                                                    value,
                                                                    record.data.storeNumber,
                                                                    record.data.status,
                                                                    record.data.storeName);
                                                }
                                            }
                                        },
                                        {
                                            header : 'Initiated By',
                                            dataIndex : 'user',
                                            flex : 2
                                        },
                                        {
                                            header : 'Start Time',
                                            dataIndex : 'startTime',
                                            flex : 5,
                                            xtype : 'datecolumn',
                                            format : 'Y-m-d h:i A'
                                        },
                                        {
                                            header : 'Status',
                                            dataIndex : 'status',
                                            flex : 3,
                                            renderer : function(value, meta,
                                                    record) {

                                                var css = getStatusPrefix(record.data.statusId)
                                                        + "Label";

                                                if (value == 'ERROR') {
                                                    return Ext.String
                                                            .format(
                                                                    '<span class="{0}">{1}</span>',
                                                                    css,
                                                                    value,
                                                                    record.data.storeNumber);
                                                } else {
                                                    return Ext.String
                                                            .format(
                                                                    '<span class="{0}">{1}</span>',
                                                                    css, value);
                                                }
                                            }
                                        }, {
                                            header : 'End Time',
                                            dataIndex : 'endTime',
                                            flex : 6,
                                            xtype : 'datecolumn',
                                            format : 'Y-m-d h:i A'
                                        }, {
                                            flex : 7,
                                            sortable : false
                                        } ],
                                // paging bar on the bottom
                                bbar : Ext.create('Ext.PagingToolbar', {
                                    store : mainStatusStore,
                                    displayInfo : true
                                })
                            });

            /**
             * Get the remaining space of the viewport for the grid height
             */
            function getGridHeight() {
                return getRemainingHeight("mainStatusGridPanel", [
                        "mainHeader", "header" ]);
            }

            // Have to set the grid height after the widget is created
            // so it can grab the padding values for the grid
            mainStoreStatusGrid.setHeight(getGridHeight());

            Ext.EventManager.onWindowResize(function() {
                mainStoreStatusGrid.setHeight(getGridHeight());
                mainStoreStatusGrid.forceComponentLayout();
            }, mainStoreStatusGrid);

            /*******************************************************************
             * Search Button
             ******************************************************************/
            Ext.widget("button", {
                renderTo : 'searchBtn',
                text : 'Search',
                cls : 'srchBtn',
                // href: 'mainStatus.do',
                /*
                 * handler: function(){ //window.location="mainStatus.do"; var
                 * searchCustomerJsonData = { StartDate:
                 * startDateField.getValue(), EndDate: endDateField.getValue() };
                 * storeStatusJson = searchCustomerJsonData;
                 * 
                 * //reset back to page 1 //
                 * mainStoreStatusGrid.getStore().currentPage = 1;
                 * mainStatusStore.load({ jsonData: storeStatusJson,
                 * copyFiltersToJson: true, copySortToJson: true }); },
                 */
                listeners : {
                    click : function() {
                        //    if (validateFn()) {                    
                        var searchCustomerJsonData = {
                            StartDate : startDateField.getValue(),
                            EndDate : endDateField.getValue()
                        };
                        storeStatusJson = searchCustomerJsonData;

                        //reset back to page 1
                        //   mainStoreStatusGrid.getStore().currentPage = 1;
                        mainStatusStore.load({
                            jsonData : storeStatusJson,
                            copyFiltersToJson : true,
                            copySortToJson : true
                        });
                    }
                //    }
                }
            });
        });

I passed in limit and start to the dao and I am getting correct values from database. I am having trouble with display on the form. I looked at the params sent to json. My start date is not changing even I change it in the form. Any suggestion is appreciated.

[flanders]

If I get it right (which I'm not sure about) the issue is that when the final handle fires the values for startDate and endDate in your request are not getting updated?

This is because they are defined as fixed extraParams. I would recommend removing them from there and adding them as filters on the store. This way they will be send to the server and can you can update them using the filter() method on the store. (Don't forget to add id's to the filters to make sure you replace the existing onces)

Might that be the issue?

[sudhavani]

Yes. Can you please explain more or give em example of how I cna add filter to the store?

[flanders]

It's all in the documentation:
http://docs.sencha.com/ext-js/4-1/#!...-method-filter

If, after reading and trying this, any specific questions remain. Feel free to ask them

[sudhavani]

Thank you very much