Results 1 to 2 of 2

Thread: EXT 4.2.1 GridPanel Paging Toolbar

  1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    New York
    Posts
    188
    Answers
    2

    Default Answered: EXT 4.2.1 GridPanel Paging Toolbar

    Hi I'm using EXTJS 4.2.1 and I have a view with 2 child components. A FormPanel and a GridPanel. The Form Panel is used to search for records, which are then displayed in the GridPanel.

    The GridPanel
    contains remote paging. By default, the view is loaded with 15 records (the pageSize) and there are currently 3 pages worth of data (38 records).

    The issue I'm having is, in the View's controller, I handle the search function, send the request to the backend and the results are shown in the GridPanel correctly. But the PagingToolbar still shows that there are 3 pages and 38 total records, even though the totalRecords property is sent back in the response.

    How do I get the PagingToolbar to reflect the new set of data loaded into the store?


    Code:
    Ext.define('DDRM.controller.company.CompanyMaintenanceController', {
        extend : 'DDRM.controller.DDRMBaseController',
    
        .....
        init : function() {
            var me = this;
            
            this.control({
                'button[name="searchCompanies"]': {
                    click: this.searchForCompanies
                }
            });
        },
    
        searchForCompanies: function(button, event, eOpts) {
            var me = this;
            
            var form = button.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    submitEmptyText: true,
                    url: '/ddrm-war/companies/searchCompanies.json',
                    params : {
                        page: 1,
                        start : 0,
                        limit : 15
                    },
                    method: 'POST',
                    waitMsg: 'Searching Please Wait...',
                    success: function(form, action) {
                        var companyStore = me.getCompaniesStore();
                        companyStore.loadData(action.result.companies);
                     
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Company Search Error', 'Please contact your system administrator');
                    }
                });
            }
        }
    });
    Code:
    Ext.define('DDRM.store.Companies', {
        extend : 'Ext.data.Store',
        model : 'DDRM.model.Company',
        pageSize: 15,
        proxy : {
            sortParam: 'sortField',
            type : 'ajax',
            url : '/ddrm-war/companies/getAllCompanies.json',
            reader : {
                type : 'json',
                root : 'companies',
                idProperty : 'symbol',
                successProperty : 'success',
                totalProperty: 'totalSize'
            },
            listeners : {
                exception : function(proxy, response, operation) {
                    Ext.MessageBox.show({
                        title : 'DDRM Analysis System Error',
                        msg : 'Error getting companies data',
                        icon : Ext.MessageBox.ERROR,
                        buttons : Ext.Msg.OK
                    });
                }
            }
        }
    });
    PHP Code:
    {
        
    "companies": [
            {
                
    "symbol""ABM",
                
    "companyName""ABM Industries Inc.",
                
    "industry""Business Services",
                
    "dividendStatus""Dividend Champion",
                
    "yearsDividendIncreased"48,
                
    "lastUpdatedBy""system",
                
    "lastUpdatedDate""2015-01-11T05:00:00.000+0000"
            
    },
            {
                
    "symbol""ADP",
                
    "companyName""Automatic Data Proc.",
                
    "industry""Business Services",
                
    "dividendStatus""Dividend Champion",
                
    "yearsDividendIncreased"40,
                
    "lastUpdatedBy""system",
                
    "lastUpdatedDate""2015-01-11T05:00:00.000+0000"
            
    },
            {
                
    "symbol""BRC",
                
    "companyName""Brady Corp.",
                
    "industry""Business Services",
                
    "dividendStatus""Dividend Champion",
                
    "yearsDividendIncreased"29,
                
    "lastUpdatedBy""system",
                
    "lastUpdatedDate""2015-01-11T05:00:00.000+0000"
            
    },
            {
                
    "symbol""CTAS",
                
    "companyName""Cintas Corp.",
                
    "industry""Business Services",
                
    "dividendStatus""Dividend Champion",
                
    "yearsDividendIncreased"32,
                
    "lastUpdatedBy""system",
                
    "lastUpdatedDate""2015-01-11T05:00:00.000+0000"
            
    }
        ],
        
    "totalSize"4,
        
    "success"true


  2. I've looked through the documentation and forum again. I was able to find a solution for my code above. I added the following lines to my success callback


    PHP Code:
    companyStore.totalCount action.result.totalSize;
    Ext.ComponentQuery.query('pagingtoolbar')[0].onLoad(); 
    PHP Code:
    searchForCompanies: function(buttoneventeOpts) {
            var 
    me this;
            
            var 
    form button.up('form').getForm();
            if (
    form.isValid()) {
                
    form.submit({
                    
    submitEmptyTexttrue,
                    
    url'/ddrm-war/companies/searchCompanies.json',
                    
    params : {
                        
    page1,
                        
    start 0,
                        
    limit 15
                    
    },
                    
    method'POST',
                    
    waitMsg'Searching Please Wait...',
                    
    success: function(formaction) {
                        var 
    companyStore me.getCompaniesStore();
                        
    companyStore.loadData(action.result.companies);
                        
    companyStore.totalCount action.result.totalSize;
                        
    Ext.ComponentQuery.query('pagingtoolbar')[0].onLoad();
                    },
                    
    failure: function(formaction) {
                        
    Ext.Msg.alert('Company Search Error''Please contact your system administrator');
                    }
                });
            }
        } 

  3. #2
    Sencha User
    Join Date
    Dec 2008
    Location
    New York
    Posts
    188
    Answers
    2

    Default

    I've looked through the documentation and forum again. I was able to find a solution for my code above. I added the following lines to my success callback


    PHP Code:
    companyStore.totalCount action.result.totalSize;
    Ext.ComponentQuery.query('pagingtoolbar')[0].onLoad(); 
    PHP Code:
    searchForCompanies: function(buttoneventeOpts) {
            var 
    me this;
            
            var 
    form button.up('form').getForm();
            if (
    form.isValid()) {
                
    form.submit({
                    
    submitEmptyTexttrue,
                    
    url'/ddrm-war/companies/searchCompanies.json',
                    
    params : {
                        
    page1,
                        
    start 0,
                        
    limit 15
                    
    },
                    
    method'POST',
                    
    waitMsg'Searching Please Wait...',
                    
    success: function(formaction) {
                        var 
    companyStore me.getCompaniesStore();
                        
    companyStore.loadData(action.result.companies);
                        
    companyStore.totalCount action.result.totalSize;
                        
    Ext.ComponentQuery.query('pagingtoolbar')[0].onLoad();
                    },
                    
    failure: function(formaction) {
                        
    Ext.Msg.alert('Company Search Error''Please contact your system administrator');
                    }
                });
            }
        } 

Posting Permissions

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