1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
<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>
</head>
<body onload="prettyPrint();">
<pre class="prettyprint lang-js">/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
/**
* @class Ext.ux.ProgressBarPager
* @extends Object
* Plugin (ptype = 'tabclosemenu') for displaying a progressbar inside of a paging toolbar instead of plain text
*
* @ptype progressbarpager
* @constructor
* Create a new ItemSelector
* @param {Object} config Configuration options
* @xtype itemselector
*/
Ext.ux.ProgressBarPager = Ext.extend(Object, {
<div id="cfg-Ext.ux.ProgressBarPager-progBarWidth"></div>/**
* @cfg {Integer} progBarWidth
* <p>The default progress bar width. Default is 225.</p>
*/
progBarWidth : 225,
<div id="cfg-Ext.ux.ProgressBarPager-defaultText"></div>/**
* @cfg {String} defaultText
* <p>The text to display while the store is loading. Default is 'Loading...'</p>
*/
defaultText : 'Loading...',
<div id="cfg-Ext.ux.ProgressBarPager-defaultAnimCfg"></div>/**
* @cfg {Object} defaultAnimCfg
* <p>A {@link Ext.Fx Ext.Fx} configuration object. Default is { duration : 1, easing : 'bounceOut' }.</p>
*/
defaultAnimCfg : {
duration : 1,
easing : 'bounceOut'
},
constructor : function(config) {
if (config) {
Ext.apply(this, config);
}
},
//public
init : function (parent) {
if(parent.displayInfo){
this.parent = parent;
var ind = parent.items.indexOf(parent.displayItem);
parent.remove(parent.displayItem, true);
this.progressBar = new Ext.ProgressBar({
text : this.defaultText,
width : this.progBarWidth,
animate : this.defaultAnimCfg
});
parent.displayItem = this.progressBar;
parent.add(parent.displayItem);
parent.doLayout();
Ext.apply(parent, this.parentOverrides);
this.progressBar.on('render', function(pb) {
pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
}, this, {single: true});
}
},
// private
// This method handles the click for the progress bar
handleProgressBarClick : function(e){
var parent = this.parent,
displayItem = parent.displayItem,
box = this.progressBar.getBox(),
xy = e.getXY(),
position = xy[0]-box.x,
pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
newpage = Math.ceil(position/(displayItem.width/pages));
parent.changePage(newpage);
},
// private, overriddes
parentOverrides : {
// private
// This method updates the information via the progress bar.
updateInfo : function(){
if(this.displayItem){
var count = this.store.getCount(),
pgData = this.getPageData(),
pageNum = this.readPage(pgData),
msg = count == 0 ?
this.emptyMsg :
String.format(
this.displayMsg,
this.cursor+1, this.cursor+count, this.store.getTotalCount()
);
pageNum = pgData.activePage; ;
var pct = pageNum / pgData.pages;
this.displayItem.updateProgress(pct, msg, this.animate || this.defaultAnimConfig);
}
}
}
});
Ext.preg('progressbarpager', Ext.ux.ProgressBarPager);
</pre>
</body>
</html>
|
