SlidingPager.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-ux-SlidingPager-method-constructor'><span id='Ext-ux-SlidingPager'>/**
  19. </span></span>* @class Ext.ux.SlidingPager
  20. * @extends Object
  21. * Plugin for PagingToolbar which replaces the textfield input with a slider
  22. * @constructor
  23. * Create a new ItemSelector
  24. * @param {Object} config Configuration options
  25. */
  26. Ext.define('Ext.ux.SlidingPager', {
  27. extend: 'Object',
  28. requires: [
  29. 'Ext.slider.Single',
  30. 'Ext.slider.Tip'
  31. ],
  32. constructor : function(config) {
  33. if (config) {
  34. Ext.apply(this, config);
  35. }
  36. },
  37. init : function(pbar){
  38. var idx = pbar.items.indexOf(pbar.child(&quot;#inputItem&quot;)),
  39. slider;
  40. Ext.each(pbar.items.getRange(idx - 2, idx + 2), function(c){
  41. c.hide();
  42. });
  43. slider = Ext.create('Ext.slider.Single', {
  44. width: 114,
  45. minValue: 1,
  46. maxValue: 1,
  47. hideLabel: true,
  48. tipText: function(thumb) {
  49. return Ext.String.format('Page &lt;b&gt;{0}&lt;/b&gt; of &lt;b&gt;{1}&lt;/b&gt;', thumb.value, thumb.slider.maxValue);
  50. },
  51. listeners: {
  52. changecomplete: function(s, v){
  53. pbar.store.loadPage(v);
  54. }
  55. }
  56. });
  57. pbar.insert(idx + 1, slider);
  58. pbar.on({
  59. change: function(pb, data){
  60. slider.setMaxValue(data.pageCount);
  61. slider.setValue(data.currentPage);
  62. }
  63. });
  64. }
  65. });
  66. </pre>
  67. </body>
  68. </html>