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