examples/docs/source/SlidingPager.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 <div id="prop-Ext.DataView.LabelEditor-SlidingPager"></div>/**
  16  * Plugin for PagingToolbar which replaces the textfield input with a slider
  17  */
  18 Ext.ux.SlidingPager = Ext.extend(Object, {
  19     init : function(pbar){
  20         var idx = pbar.items.indexOf(pbar.inputItem);
  21         Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){
  22             c.hide();
  23         });
  24         var slider = new Ext.Slider({
  25             width: 114,
  26             minValue: 1,
  27             maxValue: 1,
  28             plugins: new Ext.slider.Tip({
  29                 getText : function(thumb) {
  30                     return String.format('Page <b>{0}</b> of <b>{1}</b>', thumb.value, thumb.slider.maxValue);
  31                 }
  32             }),
  33             listeners: {
  34                 changecomplete: function(s, v){
  35                     pbar.changePage(v);
  36                 }
  37             }
  38         });
  39         pbar.insert(idx + 1, slider);
  40         pbar.on({
  41             change: function(pb, data){
  42                 slider.setMaxValue(data.pages);
  43                 slider.setValue(data.activePage);
  44             }
  45         });
  46     }
  47 });</pre>
  48 </body>
  49 </html>