examples/ux/SlidingPager.js

   1 /**
   2 * @class Ext.ux.SlidingPager
   3 * @extends Object
   4 * Plugin for PagingToolbar which replaces the textfield input with a slider
   5 * @constructor
   6 * Create a new ItemSelector
   7 * @param {Object} config Configuration options
   8 */
   9 Ext.define('Ext.ux.SlidingPager', {
  10     extend: 'Object',
  11     requires: [
  12         'Ext.slider.Single',
  13         'Ext.slider.Tip'
  14     ],
  15
  16     constructor : function(config) {
  17         if (config) {
  18             Ext.apply(this, config);
  19         }
  20     },
  21
  22     init : function(pbar){
  23         var idx = pbar.items.indexOf(pbar.child("#inputItem")),
  24             slider;
  25
  26         Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){
  27             c.hide();
  28         });
  29
  30         slider = Ext.create('Ext.slider.Single', {
  31             width: 114,
  32             minValue: 1,
  33             maxValue: 1,
  34             hideLabel: true,
  35             tipText: function(thumb) {
  36                 return Ext.String.format('Page <b>{0}</b> of <b>{1}</b>', thumb.value, thumb.slider.maxValue);
  37             },
  38             listeners: {
  39                 changecomplete: function(s, v){
  40                     pbar.store.loadPage(v);
  41                 }
  42             }
  43         });
  44
  45         pbar.insert(idx + 1, slider);
  46
  47         pbar.on({
  48             change: function(pb, data){
  49                 slider.setMaxValue(data.pageCount);
  50                 slider.setValue(data.currentPage);
  51             }
  52         });
  53     }
  54 });