1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    India
    Posts
    29
    Answers
    2
    Vote Rating
    0
    funnyfox is on a distinguished road

      0  

    Default Unanswered: Unable to Implement EXT JS GridPanel Paging

    Unanswered: Unable to Implement EXT JS GridPanel Paging


    So my GridPanels Scrollbars are not working properly, They work properly during the initial load, Later when the grid is reloaded with new search filters the scrolling fails.

    So I have decided to implement Paging for the grids. Here is my code.

    DataStore Code

    Code:
    function loadByCriteria(criteria){
        this.load({
            params:{
                start:0,
                limit: config.pageSize,
                json : Ext.JSON.encode(criteria)
            }
        });
    }
    
    Ext.define('tz.model.Invoice', {
        extend: 'Ext.data.Model',
        fields : [ {name: 'id', type: 'int'},'fullName','vendorName','projectName','status','comments','invoiceNo','projectCode',
                   {name: 'billingFrom', type: 'date', dateFormat: 'Y-m-d H:i:s.u'},
                   {name: 'billingTo', type: 'date', dateFormat: 'Y-m-d H:i:s.u'},
                   {name: 'created', type: 'date', dateFormat: 'Y-m-d H:i:s.u'}, ........
        ]
    });
    
    Ext.define('tz.store.InvoiceStore', {
        extend : 'Ext.data.Store',
        model: 'tz.model.Invoice',
        buffered: true,
        pageSize: 15,
        proxy: {
            type: 'ajax',
            url: '/timeSheetz/remote/invoice/search?',
            reader: {
                type: 'json',
                root: 'rows',
                totalProperty: 'size'
            },
            simpleSortMode: true
        },
        loadByCriteria: loadByCriteria
    });

    I have a search Panel based on which the Grid is updated. Here is the code for Searchpanel.js


    Code:
    search : function() {        
            var values = app.invoiceSearchPanel.getValues();
            var params = new Array();
            params.push(['name','like', values.name]);        
            params.push(['vendorName','like', values.vendorName]);
            params.push(['status','like', values.status]);
            params.push(['invoiceNo','like', values.invoiceNo]);
            params.push(['invoiceAmountFrom','>',values.invoiceAmountFrom]);
            params.push(['invoiceAmountTo','>',values.invoiceAmountTo]);
            var filter = getFilter(params);
            filter.pageSize=100;
            ds.invoiceStore.loadByCriteria(filter);
        }
    Added the below code to my GridPanel
    Code:
            
                {
                    xtype: 'pagingtoolbar',
                    store:  me.store,   // same store GridPanel is using
                    dock: 'bottom',
                    displayInfo: true
                }
    Here comes the JAVA code.
    Code:
    @RequestMapping(value = "/search", method = {RequestMethod.POST,RequestMethod.GET })
      public String list(@RequestParam("json") String json, Map<String, Object> map) throws JSONException {
            SearchFilter filter = ParamParser.parse(json);
            List<Invoice> invs = billingService.findByCriteria(filter);        
            return returnJson(map, toJSON(invs).toString());        
        }

    Code:
    public List<Invoice> findByCriteria(SearchFilter filter) {         
            String invQuery = " select * from Invoice as e where 1=1"          
            String paramQuery = "";        
            Map<String, Param> map = filter.getParamMap(); 
            if (map.get("name") != null) {
                paramQuery += " and (u.firstName like '%" + map.get("name").getStrValue()+ "%'";
                paramQuery += " or u.lastName like '%" + map.get("name").getStrValue()+ "%'";
                paramQuery += " or concat(u.firstName,' ',u.lastName) like '%" + map.get("name").getStrValue()+ "%' )";
                }
            if (map.get("vendorName") != null) {
                paramQuery += " and v.name like '%" + map.get("vendorName").getStrValue()+ "%'";
            }
            if (map.get("status") != null) {
                paramQuery += " and i.status like '%" + map.get("status").getStrValue()+ "%'";
            }
            if (map.get("invoiceNo") != null) {
                paramQuery += " and i.invoiceNo  like '%" +map.get("invoiceNo").getStrValue()+ "%'";
            }        
            if (map.get("invoiceAmountFrom") != null) {
                paramQuery += " and i.invoiceAmount  >= " +map.get("invoiceAmountFrom").getStrValue();
            }
            if (map.get("invoiceAmountTo") != null) {
                paramQuery += " and i.invoiceAmount <=" +map.get("invoiceAmountTo").getStrValue();
            }        
    
            if(paramQuery.equals("")){
                return list;
            } else {
                query = invQuery + paramQuery;        
        // Changing the code to display Paging in GridPanel
        List<Invoice> list = sessionFactory.getCurrentSession().createQuery(query).setFirstResult(0).setMaxResults(filter.getPageSize()).list();
                        return list;
            }        
        }
    Even After implementing Grid Paging, I can see all the records of a give pageSize are displaying on single page itself.
    Suppose I give PageSize of 15, I see only 15 records in the grid and no more next button enabled.

    I am confused how the grid shows the count of all the records in dispayInfo and renders 15 records per page.

    Can anyone help me fix this.

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Answers
    4
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    You need to handle start and limit on the server side also, in your query.

    SELECT * FROM table_name LIMIT 0, 15

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    India
    Posts
    29
    Answers
    2
    Vote Rating
    0
    funnyfox is on a distinguished road

      0  

    Default


    If you see the code I have line

    Code:
    sessionFactory.getCurrentSession().createQuery(query).setFirstResult(0).
     setMaxResults(filter.getPageSize()).list();
    I should pass start parameter to .setFirstResult(start),
    but the problem is nothing is returning to JAVA when I press next button.

    Based on the given pagesize , No of records are loading in the grid.
    Suppose if there are a total of 120 records and my pagesize is defined as 20, then
    only 20 records are getting displayed and next button is disabled.

    I couldn't figure out how I can link both js and Java for paging.
    When i searched I found a tutorial here. But my implementation is similar to
    the tutorial in the above link, not sure what I am missing.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi