3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.ux.ProgressBarPager
18 * Plugin for displaying a progressbar inside of a paging toolbar instead of plain text
20 * Create a new ItemSelector
21 * @param {Object} config Configuration options
23 Ext.define('Ext.ux.ProgressBarPager', {
26 requires: ['Ext.ProgressBar'],
28 * @cfg {Integer} width
29 * <p>The default progress bar width. Default is 225.</p>
33 * @cfg {String} defaultText
34 * <p>The text to display while the store is loading. Default is 'Loading...'</p>
36 defaultText : 'Loading...',
38 * @cfg {Object} defaultAnimCfg
39 * <p>A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
46 constructor : function(config) {
48 Ext.apply(this, config);
52 init : function (parent) {
54 if(parent.displayInfo) {
57 displayItem = parent.child("#displayItem");
59 parent.remove(displayItem, true);
62 this.progressBar = Ext.create('Ext.ProgressBar', {
63 text : this.defaultText,
65 animate : this.defaultAnimCfg
68 parent.displayItem = this.progressBar;
70 parent.add(parent.displayItem);
72 Ext.apply(parent, this.parentOverrides);
74 this.progressBar.on('render', function(pb) {
75 pb.mon(pb.getEl().applyStyles('cursor:pointer'), 'click', this.handleProgressBarClick, this);
76 }, this, {single: true});
80 // This method handles the click for the progress bar
81 handleProgressBarClick : function(e){
82 var parent = this.parent,
83 displayItem = parent.displayItem,
84 box = this.progressBar.getBox(),
86 position = xy[0]- box.x,
87 pages = Math.ceil(parent.store.getTotalCount()/parent.pageSize),
88 newpage = Math.ceil(position/(displayItem.width/pages));
90 parent.store.loadPage(newpage);
93 // private, overriddes
96 // This method updates the information via the progress bar.
97 updateInfo : function(){
99 var count = this.store.getCount(),
100 pageData = this.getPageData(),
101 message = count === 0 ?
105 pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
107 percentage = pageData.pageCount > 0 ? (pageData.currentPage / pageData.pageCount) : 0;
109 this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);