Results 1 to 5 of 5

Thread: Grid Pagination problem

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
      0  

    Default 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
    9,389
    Vote Rating
    498
      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
      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
    9,389
    Vote Rating
    498
      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
      0  

    Default

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •