Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / examples / ux / SlidingPager.js
index 2c06846..2eddccc 100644 (file)
@@ -1,38 +1,54 @@
-/*!
- * Ext JS Library 3.0.0
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-Ext.ux.SlidingPager = Ext.extend(Object, {\r
-    init : function(pbar){\r
-        Ext.each(pbar.items.getRange(2,6), function(c){\r
-            c.hide();\r
-        });\r
-        var slider = new Ext.Slider({\r
-            width: 114,\r
-            minValue: 1,\r
-            maxValue: 1,\r
-            plugins: new Ext.ux.SliderTip({\r
-                getText : function(s){\r
-                    return String.format('Page <b>{0}</b> of <b>{1}</b>', s.value, s.maxValue);\r
-                }\r
-            }),\r
-            listeners: {\r
-                changecomplete: function(s, v){\r
-                    pbar.changePage(v);\r
-                }\r
-            }\r
-        });\r
-        pbar.insert(5, slider);\r
-        pbar.on({\r
-            change: function(pb, data){\r
-                slider.maxValue = data.pages;\r
-                slider.setValue(data.activePage);\r
-            },\r
-            beforedestroy: function(){\r
-                slider.destroy();\r
-            }\r
-        });\r
-    }\r
-});
\ No newline at end of file
+/**
+* @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', {
+    extend: 'Object',
+    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){
+                slider.setMaxValue(data.pageCount);
+                slider.setValue(data.currentPage);
+            }
+        });
+    }
+});