Grid Pagination problem

[tevinj]

Hi,
When i display all the records the pagination works correctly. But when i do searching based on some parameters and while clicking the next button it shows 2nd page which contains all the data not the search result.I think the search values are not passing to the 2nd page. What will I do? Help me plz.
Thanks,
Tevin

[scottmartin]

Are you sending the correct information to the the server:
start,limit

And is the server sending the correct data back: total records

Regards,
Scott.

[tevinj]

Are you sending the correct information to the the server:
start,limit

And is the server sending the correct data back: total records

Regards,
Scott.

when I search in the first page the parameters are passed correctly and total records set accordingly. but when I click second page the search parameters become null values or empty strings and it passes only start and limit parameters

[scottmartin]

Here is an example of a grid with a search bar. The search value is maintain on page change by sending the value as a extraparam in the beforeload listener.

Ext.onReady(function(){

	Ext.define('model', {
	    extend: 'Ext.data.Model',
	    idProperty: 'abbr',
	    fields: [
	        { name: 'abbr' },
	        { name: 'name' },
	        { name: 'slogan' }
	    ],
	    proxy: {
	        type: 'ajax',
	        actionMethods: 'POST',
	        url: 'server.php',
	        reader: {
	            type: 'json',
	            root: 'data',
	            totalProperty: 'total'
	        },

	    	afterRequest: function(request,success){
	    		console.log(request);
	    		console.log(success);
	    	}

	    }

	});

	var store = Ext.create('Ext.data.Store', {
	    autoLoad: true, // also tested false using button to load
	    type: 'json',
	    model: 'model',
	    pageSize: 35,
	    remoteSort: true,
	    sorters: [
	        {
	            property : 'abbr',
	            direction: 'ASC'
	        }
	    ],
	    listeners: {
	    	beforeload: function(){
	    		var searchValue = toolbar.down('#search-field').value;
	    		store.getProxy().extraParams = {}; // clear all previous
	    		store.getProxy().extraParams.search = searchValue; // update persistent param

	    	}
	    }

	});

    var toolbar = Ext.create('widget.toolbar', {
        dock: 'top',
        ui: 'default',
        items: ['Search',
        {
             xtype: 'textfield',
             itemId: 'search-field',
             name: 'searchField',
             hideLabel: true,
             width: 200
        },
		{
            xtype: 'button',
            text: '<<< search value',
            handler: function(){ 
		        store.load(
		        {
                    params  : {
                    	start: 0,
                    	limit: 35,
                    	sort: '[{"property":"abbr","direction":"ASC"}]'
                    },
			        callback: function(records,operation,success){
			            // inspect: operation.resultSet.message (object)
			            // inspect: operation.response.responseText (json)
			        }
		        });
		    }    
        }        
        ]
    });

    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {
                text     : 'State',
                width    : 75,
                sortable : true,
                dataIndex: 'abbr'
            },
            {
                text     : 'Name',
                width    : 175,
                sortable : true,
                dataIndex: 'name'
            },
            {
                text     : 'Slogan',
                flex     : 1,
                sortable : true,
                dataIndex: 'slogan'
            },

        ],

        height: 650, // remove for variable height
        width: 600,
        title: 'JSON Grid',
        renderTo: Ext.getBody(),

        viewConfig: { 
			loadingHeight: 150,
			loadingText: 'This is a loading text message ...'
		},	

        dockedItems: [
            toolbar
        ],

	    bbar: Ext.create('Ext.PagingToolbar', {
	        store: store,
	        itemId: 'paging-toolbar',
	        displayInfo: true,
	        displayMsg: 'Displaying {0} - {1} of {2}',
	        emptyMsg: 'No records to display'
	    })

    });

	var button = new Ext.Button({
	  text: 'load store',    
	  width: 150, 
	  renderTo: Ext.getBody(),
	  handler: function(){
	  	store.load();
	  }
	});

	var searchField = toolbar.down('#search-field');
	searchField.focus();

});

Regards,
Scott.

[tevinj]

Thank you scott . I got the required result by setting the search value as base param.