examples/grid/SlidingPager.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 Ext.ux.SlidingPager = Ext.extend(Ext.util.Observable, {\r
  10     init : function(pbar){\r
  11         this.pagingBar = pbar;\r
  12 \r
  13         pbar.on('render', this.onRender, this);\r
  14         pbar.on('beforedestroy', this.onDestroy, this);\r
  15     },\r
  16 \r
  17     onRender : function(pbar){\r
  18         Ext.each(pbar.items.getRange(2,6), function(c){\r
  19             c.hide();\r
  20         });\r
  21         var td = document.createElement("td");\r
  22         pbar.tr.insertBefore(td, pbar.tr.childNodes[5]);\r
  23 \r
  24         td.style.padding = '0 5px';\r
  25 \r
  26         this.slider = new Ext.Slider({\r
  27             width: 114,\r
  28             minValue: 1,\r
  29             maxValue: 1,\r
  30             plugins:new Ext.ux.SliderTip({\r
  31                 bodyStyle:'padding:5px;',\r
  32                 getText : function(s){\r
  33                     return String.format('Page <b>{0}</b> of <b>{1}</b>', s.value, s.maxValue);\r
  34                 }\r
  35             })\r
  36         });\r
  37         this.slider.render(td);\r
  38 \r
  39         this.slider.on('changecomplete', function(s, v){\r
  40             pbar.changePage(v);\r
  41         });\r
  42 \r
  43         pbar.on('change', function(pb, data){\r
  44             this.slider.maxValue = data.pages;\r
  45             this.slider.setValue(data.activePage);\r
  46         }, this);\r
  47     },\r
  48 \r
  49     onDestroy : function(){\r
  50         this.slider.destroy();\r
  51     }\r
  52 });