1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    tevinj is on a distinguished road

      0  

    Default Grid Pagination problem

    Grid Pagination problem


    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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,973
    Vote Rating
    453
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    tevinj is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    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

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,973
    Vote Rating
    453
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    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.

    Code:
    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.

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    tevinj is on a distinguished road

      0  

    Default


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

Thread Participants: 1

Tags for this Thread