[4.1 Beta 1] Sliding Pager fails with empty store

**James Goddard** · 25 Jan 2012 12:41 PM

REQUIRED INFORMATION
Ext version tested:

Ext 4.1 Beta 1

Browser versions tested against:

Chrome 16.0.912.75

DOCTYPE tested against:

html

Description:

Exception in Sliding Pager witn no data.

Steps to reproduce the problem:

Load enclosed script

The result that was expected:

No error.

The result that occurs instead:

Uncaught TypeError: Cannot read property 'pageCount' of undefined

Test Case:

Code:

<!DOCTYPE html>
<html>
   <head>
      <title id="page-title">ExtJS 4.1 Bug</title>
      <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
      <script type="text/javascript" src="js/extjs/ext-all-debug.js"></script> 
      <script type="text/javascript" src="js/extjs/examples/ux/SlidingPager.js"></script> 


      <script type="text/javascript">
            Ext.onReady(function() {
               Ext.create('Ext.data.Store', {
                  storeId:'simpsonsStore',
                  fields:['name', 'email', 'phone'],
                  data: [
                  ],
                  proxy: {
                     type: 'ajax',
                     url: 'data.json',
                     reader: {
                        type: 'json',
                        root: 'items'
                     }
                  }
               });

               Ext.create('Ext.grid.Panel', {
                  title: 'Simpsons',
                  store: Ext.data.StoreManager.lookup('simpsonsStore'),
                  columns: [
                     { header: 'Name',dataIndex: 'name', editor: 'textfield' },
                     { header: 'Email', dataIndex: 'email', flex:1 },
                     { header: 'Phone', dataIndex: 'phone' }
                  ],
                  bbar: Ext.create('Ext.PagingToolbar', {
                     pageSize: 10,
                     store: Ext.data.StoreManager.lookup('simpsonsStore'),
                     displayInfo: true,
                     plugins: Ext.create('Ext.ux.SlidingPager', {})
                  }),
                  height: 200,
                  width: 400,
                  renderTo: Ext.getBody(),
                  listeners: {
                     render: function () { this.store.load (); }
                  }
               });
            });
      </script>
   </head>
   <body>
   </body>
</html>

Data File:

Code:

{
   items: []
}

HELPFUL INFORMATION
Debugging already done:
This occurs only if a store with no data is loaded after the grid is rendered. The cause is the "onLoad" function of Ext.toolbar.Paging. If the store is empty it does not set pageData so it passes undefined to the Sliding Pager event.

In 4.0.X this if statement did not exist and pageData was always set.

**Always83** · 3 Feb 2013 9:40 AM

hi...
my tested solution is to replace SlidingPager.js with this one (where in bold/italic the changed rows):

Code:

/**
* @class Ext.ux.SlidingPager
* @extends Object
* Plugin for PagingToolbar which replaces the textfield input with a slider
* @constructor
* Create a new ItemSelector
* @param {Object} config Configuration options
*/
Ext.define('Ext.ux.SlidingPager', {
    requires: [
        'Ext.slider.Single',
        'Ext.slider.Tip'
    ],


    constructor : function(config) {
        if (config) {
            Ext.apply(this, config);
        }
    },


    init : function(pbar){
        var idx = pbar.items.indexOf(pbar.child("#inputItem")),
            slider;


        Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){
            c.hide();
        });


        slider = Ext.create('Ext.slider.Single', {
            width: 114,
            minValue: 1,
            maxValue: 1,
            hideLabel: true,
            tipText: function(thumb) {
                return Ext.String.format('Page <b>{0}</b> of <b>{1}</b>', thumb.value, thumb.slider.maxValue);
            },
            listeners: {
                changecomplete: function(s, v){
                    pbar.store.loadPage(v);
                }
            }
        });


        pbar.insert(idx + 1, slider);


        pbar.on({
            change: function(pb, data){
               var pageCount = 0;
               var currentPage = 0;
               if(!!data){
                  pageCount= data.pageCount
                  currentPage = data.currentPage
               }
               slider.setMaxValue(pageCount);
               slider.setValue(currentPage);
            }
        });
    }
});

[4.1 Beta 1] Sliding Pager fails with empty store

Thread Tools

Search Thread

Display

[4.1 Beta 1] Sliding Pager fails with empty store

[4.1 Beta 1] Sliding Pager fails with empty store