<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js"><span id='Ext-ux-SlidingPager'>/**
|
</span> * Plugin for PagingToolbar which replaces the textfield input with a slider
|
*/
|
Ext.define('Ext.ux.SlidingPager', {
|
requires: [
|
'Ext.slider.Single',
|
'Ext.slider.Tip'
|
],
|
|
<span id='Ext-ux-SlidingPager-method-constructor'> /**
|
</span> * Creates new SlidingPager.
|
* @param {Object} config Configuration options
|
*/
|
constructor : function(config) {
|
if (config) {
|
Ext.apply(this, config);
|
}
|
},
|
|
<span id='Ext-ux-SlidingPager-method-init'> init : function(pbar){
|
</span> 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);
|
}
|
});
|
}
|
});
|
</pre>
|
</body>
|
</html>
|